Skip to content

Commit

Permalink
improve footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@guitavano
guitavano committed Apr 17, 2024
1 parent 9042736 commit 4ed6411
Show file tree
Hide file tree
Showing 13 changed files with 92 additions and 244 deletions.
236 changes: 32 additions & 204 deletions components/footer/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,32 +56,6 @@ export interface NewsletterForm {
helpText?: string;
}

export interface Layout {
backgroundColor?:
| "Primary"
| "Secondary"
| "Accent"
| "Base 100"
| "Base 100 inverted";
variation?:
| "Variation 1"
| "Variation 2"
| "Variation 3"
| "Variation 4"
| "Variation 5";
hide?: {
logo?: boolean;
newsletter?: boolean;
sectionLinks?: boolean;
socialLinks?: boolean;
paymentMethods?: boolean;
mobileApps?: boolean;
regionOptions?: boolean;
extraLinks?: boolean;
backToTheTop?: boolean;
};
}

export interface Props {
logo?: {
image: ImageWidget;
Expand All @@ -108,17 +82,8 @@ export interface Props {
backToTheTop?: {
text?: string;
};
layout?: Layout;
}

const LAYOUT = {
"Primary": "bg-primary text-primary-content",
"Secondary": "bg-secondary text-secondary-content",
"Accent": "bg-accent text-accent-content",
"Base 100": "bg-base-100 text-base-content",
"Base 100 inverted": "bg-base-content text-base-100",
};

function Footer({
logo,
newsletter = {
Expand Down Expand Up @@ -170,190 +135,53 @@ function Footer({
mobileApps = { apple: "/", android: "/" },
regionOptions = { currency: [], language: [] },
extraLinks = [],
backToTheTop,
layout = {
backgroundColor: "Primary",
variation: "Variation 1",
hide: {
logo: false,
newsletter: false,
sectionLinks: false,
socialLinks: false,
paymentMethods: false,
mobileApps: false,
regionOptions: false,
extraLinks: false,
backToTheTop: false,
},
},
backToTheTop
}: Props) {
const _logo = layout?.hide?.logo ? <></> : <Logo logo={logo} />;
const _newsletter = layout?.hide?.newsletter ? <></> : (
<Newsletter
content={newsletter}
layout={{
tiled: layout?.variation == "Variation 4" ||
layout?.variation == "Variation 5",
}}
/>
);
const _sectionLinks = layout?.hide?.sectionLinks ? <></> : (
<FooterItems
sections={sections}
justify={layout?.variation == "Variation 2" ||
layout?.variation == "Variation 3"}
/>
);
const _social = layout?.hide?.socialLinks
? <></>
: <Social content={social} vertical={layout?.variation == "Variation 3"} />;
const _payments = layout?.hide?.paymentMethods
? <></>
: <PaymentMethods content={payments} />;
const _apps = layout?.hide?.mobileApps
? <></>
: <MobileApps content={mobileApps} />;
const _region = layout?.hide?.regionOptions
? <></>
: <RegionSelector content={regionOptions} />;
const _links = layout?.hide?.extraLinks
? <></>
: <ExtraLinks content={extraLinks} />;
const _logo = <Logo logo={logo} />;
const _newsletter = <Newsletter
content={newsletter}
/>
const _sectionLinks = <FooterItems
sections={sections}
justify={false}
/>
const _social = <Social content={social}/>;
const _payments = <PaymentMethods content={payments} />;
const _apps = <MobileApps content={mobileApps} />;
const _region = <RegionSelector content={regionOptions} />;
const _links = <ExtraLinks content={extraLinks} />;

return (
<footer
class={clx(
"w-full flex flex-col pt-10 pb-2 md:pb-10 gap-10",
LAYOUT[layout?.backgroundColor ?? "Primary"],
"bg-primary text-primary-content",
)}
>
<div class="lg:container mx-6 lg:mx-auto">
{(!layout?.variation || layout?.variation == "Variation 1") && (
<div class="flex flex-col gap-10">
<div class="flex flex-col md:flex-row md:justify-between md:flex-wrap lg:flex-nowrap gap-8 lg:gap-12">
{_logo}
{_sectionLinks}
{_newsletter}
</div>
<Divider />
<div class="flex flex-col md:flex-row gap-10 md:gap-14 md:items-end">
{_payments}
{_social}
<div class="flex flex-col lg:flex-row gap-10 lg:gap-14 lg:items-end">
{_apps}
{_region}
</div>
</div>
<Divider />
<div class="flex flex-col-reverse md:flex-row md:justify-between gap-10">
<PoweredByDeco />
{_links}
</div>
</div>
)}
{layout?.variation == "Variation 2" && (
<div class="flex flex-col gap-10">
<div class="flex flex-col md:flex-row gap-10">
<div class="flex flex-col gap-10 lg:w-1/2">
{_logo}
{_social}
{_payments}
{_apps}
{_region}
</div>
<div class="flex flex-col gap-10 lg:gap-20 lg:w-1/2 lg:pr-10">
{_newsletter}
{_sectionLinks}
</div>
</div>
<Divider />
<div class="flex flex-col-reverse md:flex-row md:justify-between gap-10">
<PoweredByDeco />
{_links}
</div>
</div>
)}
{layout?.variation == "Variation 3" && (
<div class="flex flex-col gap-10">
<div class="flex flex-col gap-10">
<div class="flex flex-col md:flex-row md:justify-between md:flex-wrap lg:flex-nowrap gap-8 lg:gap-12">
{_logo}
<div class="flex flex-col lg:flex-row gap-14">
<div class="flex flex-col md:flex-row lg:flex-col md:justify-between lg:justify-normal gap-10 lg:w-2/5">
{_newsletter}
<div class="flex flex-col gap-10">
{_payments}
{_apps}
</div>
</div>
<div class="flex flex-col gap-10 lg:gap-20 lg:w-3/5 lg:items-end">
<div class="flex flex-col md:flex-row gap-10">
{_sectionLinks}
{_social}
</div>
{_region}
</div>
</div>
<Divider />
<div class="flex flex-col-reverse md:flex-row md:justify-between gap-10">
<PoweredByDeco />
{_links}
</div>
</div>
)}
{layout?.variation == "Variation 4" && (
<div class="flex flex-col gap-10">
{_sectionLinks}
{_newsletter}
{layout?.hide?.newsletter ? <></> : <Divider />}
<div class="flex flex-col lg:flex-row gap-10 lg:gap-20 lg:justify-between">
{_sectionLinks}
<div class="flex flex-col md:flex-row lg:flex-col gap-10 lg:gap-10 lg:w-2/5 lg:pl-10">
<div class="flex flex-col md:flex-row gap-10 lg:gap-20">
<div class="lg:flex-auto">
{_payments}
</div>
<div class="lg:flex-auto">
{_social}
</div>
</div>
<div class="flex flex-col gap-10 lg:gap-10">
{_region}
{_apps}
</div>
</div>
</div>
<Divider />
<div class="flex flex-col md:flex-row md:justify-between gap-10 md:items-center">
{_logo}
<PoweredByDeco />
</div>
</div>
)}
{layout?.variation == "Variation 5" && (
<div class="flex flex-col gap-10">
{_newsletter}
{layout?.hide?.newsletter ? <></> : <Divider />}
{_logo}
<div class="flex flex-col md:flex-row gap-10 lg:gap-20 md:justify-between">
{_sectionLinks}
<div class="flex flex-col gap-10 md:w-2/5 lg:pl-10">
{_payments}
{_social}
{_apps}
</div>
</div>
<Divider />
<div class="flex flex-col-reverse md:flex-row md:justify-between gap-10 md:items-center">
<PoweredByDeco />
<div class="flex flex-col md:flex-row gap-10 md:items-center">
{_links}
{_region}
</div>
<Divider />
<div class="flex flex-col md:flex-row gap-10 md:gap-14 md:items-end">
{_payments}
{_social}
<div class="flex flex-col lg:flex-row gap-10 lg:gap-14 lg:items-end">
{_apps}
{_region}
</div>
</div>
)}
<Divider />
<div class="flex flex-col-reverse md:flex-row md:justify-between gap-10">
<PoweredByDeco />
{_links}
</div>
</div>
</div>
{layout?.hide?.backToTheTop
? <></>
: <BackToTop content={backToTheTop?.text} />}
<BackToTop content={backToTheTop?.text} />
</footer>
);
}
Expand Down
4 changes: 3 additions & 1 deletion components/product/ProductShelf.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,9 @@ function ProductShelf({
return (
<div class="w-full container py-8 flex flex-col gap-6 lg:py-10">
<div class="flex flex-col gap-2">
<h2 class="text-base-content text-center text-3xl font-semibold">{title}</h2>
<h2 class="text-base-content text-center text-3xl font-semibold">
{title}
</h2>
<p class="text-center">{description}</p>
</div>

Expand Down
4 changes: 3 additions & 1 deletion components/product/ProductShelfTabbed.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,9 @@ function TabbedProductShelf({
return (
<div class="w-full container py-8 flex flex-col gap-8 lg:gap-12 lg:py-10">
<div class="flex flex-col gap-2">
<h2 class="text-base-content text-center text-3xl font-semibold">{title}</h2>
<h2 class="text-base-content text-center text-3xl font-semibold">
{title}
</h2>
<p class="text-center">{description}</p>
</div>

Expand Down
6 changes: 4 additions & 2 deletions sections/Category/CategoryGrid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,9 +82,11 @@ function CategoryGrid(props: Props) {
<div
id={id}
class="container mt-16"
>
>
<div class="flex flex-col gap-2">
<h2 class="text-base-content text-center text-3xl font-semibold">{header.title}</h2>
<h2 class="text-base-content text-center text-3xl font-semibold">
{header.title}
</h2>
<p class="text-base-content text-center">{header.description}</p>
</div>

Expand Down
6 changes: 4 additions & 2 deletions sections/Category/CategoryList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,9 +116,11 @@ function CategoryList(props: Props) {
<div
id={id}
class="container py-8 flex flex-col gap-8 lg:gap-10 text-base-content"
>
>
<div class="flex flex-col gap-2">
<h2 class="text-base-content text-center text-3xl font-semibold">{header.title}</h2>
<h2 class="text-base-content text-center text-3xl font-semibold">
{header.title}
</h2>
<p class="text-base-content text-center">{header.description}</p>
</div>

Expand Down
16 changes: 8 additions & 8 deletions sections/Content/Benefits.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,9 @@ export default function Benefits(

return (
<div
class={`flex gap-4 ${showDivider ? "pb-4 lg:pr-8 lg:border-r lg:border-b-0" : ""}`}
class={`flex gap-4 ${
showDivider ? "pb-4 lg:pr-8 lg:border-r lg:border-b-0" : ""
}`}
>
<div class="flex-none">
<Icon
Expand All @@ -62,14 +64,10 @@ export default function Benefits(
/>
</div>
<div class="flex-auto flex flex-col gap-1 lg:gap-2">
<div
class="text-base lg:text-xl leading-7 text-base-content"
>
<div class="text-base lg:text-xl leading-7 text-base-content">
{benefit.label}
</div>
<p
class="text-sm leading-5 text-neutral"
>
<p class="text-sm leading-5 text-neutral">
{benefit.description}
</p>
</div>
Expand All @@ -80,7 +78,9 @@ export default function Benefits(
return (
<div class="w-full container px-4 py-8 flex flex-col gap-8 lg:gap-10 lg:py-10 lg:px-0">
<div class="flex flex-col gap-2">
<h2 class="text-base-content text-center text-3xl font-semibold">{title}</h2>
<h2 class="text-base-content text-center text-3xl font-semibold">
{title}
</h2>
<p class="text-center">{description}</p>
</div>
<div class="w-full flex justify-center">
Expand Down
8 changes: 5 additions & 3 deletions sections/Content/BlogPosts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,9 +119,11 @@ function BlogPosts({
return (
<div class="w-full container py-8 flex flex-col gap-6 pb-16">
<div class="px-9">
<div class="flex flex-col gap-2">
<h2 class="text-base-content text-center text-3xl font-semibold">{title}</h2>
</div>
<div class="flex flex-col gap-2">
<h2 class="text-base-content text-center text-3xl font-semibold">
{title}
</h2>
</div>
</div>
<div
id={id}
Expand Down
Loading

0 comments on commit 4ed6411

Please sign in to comment.