From 8d74fd98443bb3c0a28325be27b41281b59f3581 Mon Sep 17 00:00:00 2001
From: Ola Rubaj <52197250+olayway@users.noreply.github.com>
Date: Thu, 5 Oct 2023 12:11:37 +0200
Subject: [PATCH] [core/Footer][xs]: minor style fixes

---
 .changeset/violet-fans-juggle.md              |   5 +
 .../core/src/ui/Layout/Footer.stories.tsx     |  47 +++++++
 packages/core/src/ui/Layout/Footer.tsx        | 122 ++++++++++--------
 packages/core/src/ui/index.ts                 |   1 +
 packages/core/src/ui/types.ts                 |   4 +-
 5 files changed, 125 insertions(+), 54 deletions(-)
 create mode 100644 .changeset/violet-fans-juggle.md
 create mode 100644 packages/core/src/ui/Layout/Footer.stories.tsx

diff --git a/.changeset/violet-fans-juggle.md b/.changeset/violet-fans-juggle.md
new file mode 100644
index 00000000..3166ee09
--- /dev/null
+++ 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
new file mode 100644
index 00000000..b7791174
--- /dev/null
+++ 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
index f3348b1b..47e164c2 100644
--- 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
index fec9c682..cb9b5abf 100644
--- 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
index dbbc5b60..ff22d893 100644
--- 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