[core/Footer][xs]: minor style fixes

.changeset/violet-fans-juggle.md

@@ -0,0 +1,5 @@
+---
+'@portaljs/core': patch
+---
+
+Minor footer style fixes.

packages/core/src/ui/Layout/Footer.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Footer } from './Footer';
+
+const meta: Meta<typeof Footer> = {
+    component: Footer,
+    tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Footer>;
+
+export const Basic: Story = {
+    args: {
+        author: {
+            name: "John Doe",
+        }
+    },
+};
+
+
+export const Links: Story = {
+    args: {
+        links: [
+            { name: "Link A", href: "#" },
+            { name: "Link B", href: "#" }
+        ],
+        author: {
+            name: "John Doe",
+        }
+    },
+};
+
+
+export const Logo: Story = {
+    args: {
+        links: [
+            { name: "Link A", href: "#" },
+            { name: "Link B", href: "#" }
+        ],
+        author: {
+            name: "John Doe",
+            logo: "https://via.placeholder.com/150"
+        }
+    },
+};

packages/core/src/ui/Layout/Footer.tsx

@@ -3,57 +3,75 @@ import Link from "next/link.js";
 import { AuthorConfig, NavLink } from "../types";
 
 interface Props {
-  links: Array<NavLink>;
     author: AuthorConfig;
+    links?: Array<NavLink>;
 }
 
+// TODO replace this with some nice tailwindui footer
 export const Footer: React.FC<Props> = ({ links, author }) => {
     return (
-    <footer className="bg-background dark:bg-background-dark prose dark:prose-invert max-w-none flex flex-col items-center justify-center w-full h-auto pt-10 pb-20">
+        <footer className="bg-background dark:bg-background-dark text-primary dark:text-primary-dark pt-16 pb-20 px-14 flex flex-col items-center justify-center gap-3">
-      <div className="flex w-full flex-wrap justify-center">
+            {links && (
+                <div className="flex w-full flex-wrap justify-center mb-2">
                     {links.map((item) => (
                         <Link
                             key={item.href}
                             href={item.href}
-            className="inline-flex items-center mx-4 px-1 pt-1 font-regular hover:text-slate-300 no-underline"
+                            className="inline-flex items-center mx-4 px-1 py-1 text-black hover:text-primary dark:text-white hover:dark:text-primary-dark no-underline font-semibold"
                         >
                             {/* TODO aria-current={item.current ? "page" : undefined} */}
                             {item.name}
                         </Link>
                     ))}
                 </div>
-      <p className="flex items-center justify-center">
+            )}
-        Created by
+            <p className="flex items-center justify-center gap-2">
+                <span>Created by</span>
+                {author.url ? (
                     <a
                         href={author.url}
                         target="_blank"
                         rel="noopener noreferrer"
-          className="flex items-center no-underline"
+                        className="flex items-center gap-1 no-underline font-semibold text-black dark:text-white"
+                    >
+                        {author.logo && (
+                            <img
+                                src={author.logo}
+                                alt="Logo"
+                                className="h-6 block"
+                            />
+                        )}
+                        <span>{author.name}</span>
+                    </a>
+                ) : (
+                    <span
+                        className="flex items-center gap-1 no-underline font-semibold text-black dark:text-white"
                     >
                         {author.logo && (
                             <img
                                 src={author.logo}
                                 alt={author.name}
-              className="my-0 mx-1 h-6 block"
+                                className="h-6 block"
                             />
                         )}
-          {author.name}
+                        <span>{author.name}</span>
-        </a>
+                    </span>
+                )}
             </p>
-      <p className="flex items-center justify-center">
+            <p className="flex items-center justify-center gap-1">
-        Made with
+                <span>Made with</span>
                 <a
                     href="https://flowershow.app/"
                     target="_blank"
                     rel="noopener noreferrer"
-          className="flex items-center no-underline"
+                    className="flex items-center gap-1 no-underline font-semibold text-black dark:text-white"
                 >
                     <img
                         src="https://flowershow.app/images/logo.svg"
-            alt="Flowershow"
+                        alt="Logo"
-            className="my-0 mx-1 h-6 block"
+                        className="h-6 block"
                     />
-          Flowershow
+                    <span>Flowershow</span>
                 </a>
             </p>
         </footer>

packages/core/src/ui/index.ts

@@ -7,6 +7,7 @@ export {
   TocSection,
   EditThisPage,
   useTableOfContents,
+  Footer
 } from "./Layout";
 export { Pre } from "./Pre";
 export { CustomLink } from "./Base/CustomLink";

packages/core/src/ui/types.ts

@@ -9,8 +9,8 @@ export interface NavLink {
 
 export interface AuthorConfig {
   name: string;
-  url: string;
+  url?: string;
-  logo: string;
+  logo?: string;
 }
 
 // social