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

datopian · Oct 5, 2023 · 8d74fd9 · 8d74fd9
1 parent 3ae6852
commit 8d74fd9
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 54 deletions.
diff --git a/.changeset/violet-fans-juggle.md b/.changeset/violet-fans-juggle.md
@@ -0,0 +1,5 @@
+---
+'@portaljs/core': patch
+---
+
+Minor footer style fixes.
diff --git a/packages/core/src/ui/Layout/Footer.stories.tsx b/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"
+        }
+    },
+};
diff --git a/packages/core/src/ui/Layout/Footer.tsx b/packages/core/src/ui/Layout/Footer.tsx
@@ -3,59 +3,77 @@ import Link from "next/link.js";
 import { AuthorConfig, NavLink } from "../types";
 
 interface Props {
-  links: Array<NavLink>;
-  author: AuthorConfig;
+    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">
-      <div className="flex w-full flex-wrap justify-center">
-        {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"
-          >
-            {/* TODO aria-current={item.current ? "page" : undefined} */}
-            {item.name}
-          </Link>
-        ))}
-      </div>
-      <p className="flex items-center justify-center">
-        Created by
-        <a
-          href={author.url}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="flex items-center no-underline"
-        >
-          {author.logo && (
-            <img
-              src={author.logo}
-              alt={author.name}
-              className="my-0 mx-1 h-6 block"
-            />
-          )}
-          {author.name}
-        </a>
-      </p>
-      <p className="flex items-center justify-center">
-        Made with
-        <a
-          href="https://flowershow.app/"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="flex items-center no-underline"
-        >
-          <img
-            src="https://flowershow.app/images/logo.svg"
-            alt="Flowershow"
-            className="my-0 mx-1 h-6 block"
-          />
-          Flowershow
-        </a>
-      </p>
-    </footer>
-  );
+    return (
+        <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">
+            {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 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 gap-2">
+                <span>Created by</span>
+                {author.url ? (
+                    <a
+                        href={author.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        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="h-6 block"
+                            />
+                        )}
+                        <span>{author.name}</span>
+                    </span>
+                )}
+            </p>
+            <p className="flex items-center justify-center gap-1">
+                <span>Made with</span>
+                <a
+                    href="https://flowershow.app/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-1 no-underline font-semibold text-black dark:text-white"
+                >
+                    <img
+                        src="https://flowershow.app/images/logo.svg"
+                        alt="Logo"
+                        className="h-6 block"
+                    />
+                    <span>Flowershow</span>
+                </a>
+            </p>
+        </footer>
+    );
 };
diff --git a/packages/core/src/ui/index.ts b/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";

diff --git a/packages/core/src/ui/types.ts b/packages/core/src/ui/types.ts
@@ -9,8 +9,8 @@ export interface NavLink {
 
 export interface AuthorConfig {
   name: string;
-  url: string;
-  logo: string;
+  url?: string;
+  logo?: string;
 }
 
 // social