[core/Footer][xs]: minor style fixes
This commit is contained in:
Ola Rubaj
parent
3ae685253b
commit
8d74fd9844
5
.changeset/violet-fans-juggle.md
Normal file
5
.changeset/violet-fans-juggle.md
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
'@portaljs/core': patch
|
||||
---
|
||||
|
||||
Minor footer style fixes.
|
||||
47
packages/core/src/ui/Layout/Footer.stories.tsx
Normal file
47
packages/core/src/ui/Layout/Footer.stories.tsx
Normal file
@ -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"
|
||||
}
|
||||
},
|
||||
};
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -7,6 +7,7 @@ export {
|
||||
TocSection,
|
||||
EditThisPage,
|
||||
useTableOfContents,
|
||||
Footer
|
||||
} from "./Layout";
|
||||
export { Pre } from "./Pre";
|
||||
export { CustomLink } from "./Base/CustomLink";
|
||||
|
||||
@ -9,8 +9,8 @@ export interface NavLink {
|
||||
|
||||
export interface AuthorConfig {
|
||||
name: string;
|
||||
url: string;
|
||||
logo: string;
|
||||
url?: string;
|
||||
logo?: string;
|
||||
}
|
||||
|
||||
// social
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user