Skip to content

Commit

Permalink
Merge pull request #3 from deco-sites/feature/footer
Browse files Browse the repository at this point in the history 
styled footer
  • Loading branch information
@baufaker
baufaker authored Mar 28, 2024
2 parents 2b0728d + 6d08dcf commit 925dce2
Showing 1 changed file with 18 additions and 343 deletions.
361 changes: 18 additions & 343 deletions components/footer/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,359 +1,34 @@
import BackToTop from "../../components/footer/BackToTop.tsx";
import Divider from "../../components/footer/Divider.tsx";
import ExtraLinks from "../../components/footer/ExtraLinks.tsx";
import FooterItems from "../../components/footer/FooterItems.tsx";
import Logo from "../../components/footer/Logo.tsx";
import MobileApps from "../../components/footer/MobileApps.tsx";
import PaymentMethods from "../../components/footer/PaymentMethods.tsx";
import RegionSelector from "../../components/footer/RegionSelector.tsx";
import Social from "../../components/footer/Social.tsx";
import Newsletter from "../../islands/Newsletter.tsx";
import { clx } from "../../sdk/clx.ts";
import type { ImageWidget } from "apps/admin/widgets.ts";
import PoweredByDeco from "apps/website/components/PoweredByDeco.tsx";

export type Item = {
label: string;
href: string;
};

export type Section = {
label: string;
items: Item[];
};

export interface SocialItem {
label:
| "Discord"
| "Facebook"
| "Instagram"
| "Linkedin"
| "Tiktok"
| "Twitter";
link: string;
}

export interface PaymentItem {
label: "Diners" | "Elo" | "Mastercard" | "Pix" | "Visa";
}

export interface MobileApps {
/** @description Link to the app */
apple?: string;
/** @description Link to the app */
android?: string;
}

export interface RegionOptions {
currency?: Item[];
language?: Item[];
}

export interface NewsletterForm {
placeholder?: string;
buttonText?: string;
/** @format html */
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;
};
}
import Image from "apps/website/components/Image.tsx";

export interface Props {
logo?: {
image: ImageWidget;
description?: string;
};
newsletter?: {
title?: string;
/** @format textarea */
description?: string;
form?: NewsletterForm;
};
sections?: Section[];
social?: {
title?: string;
items: SocialItem[];
};
payments?: {
title?: string;
items: PaymentItem[];
alt: string;
height: number;
width: number;
};
mobileApps?: MobileApps;
regionOptions?: RegionOptions;
extraLinks?: Item[];
backToTheTop?: {
text?: string;
};
layout?: Layout;
text: string;
}

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 = {
title: "Newsletter",
description: "",
form: { placeholder: "", buttonText: "", helpText: "" },
},
sections = [{
"label": "Sobre",
"items": [
{
"href": "/quem-somos",
"label": "Quem somos",
},
{
"href": "/termos-de-uso",
"label": "Termos de uso",
},
{
"href": "/trabalhe-conosco",
"label": "Trabalhe conosco",
},
],
}, {
"label": "Atendimento",
"items": [
{
"href": "/centraldeatendimento",
"label": "Central de atendimento",
},
{
"href": "/whatsapp",
"label": "Fale conosco pelo WhatsApp",
},
{
"href": "/trocaedevolucao",
"label": "Troca e devolução",
},
],
}],
social = {
title: "Redes sociais",
items: [{ label: "Instagram", link: "/" }, { label: "Tiktok", link: "/" }],
},
payments = {
title: "Formas de pagamento",
items: [{ label: "Mastercard" }, { label: "Visa" }, { label: "Pix" }],
},
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,
},
},
text,
}: 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} />;

return (
<footer
class={clx(
"w-full flex flex-col pt-10 pb-2 md:pb-10 gap-10",
LAYOUT[layout?.backgroundColor ?? "Primary"],
)}
>
<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">
{_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">
{_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>
</div>
</div>
)}
<footer>
<div class="bg-[#eeeeee] flex justify-center items-center fixed bottom-0 w-full p-4 gap-5">
<Image
loading="lazy"
src={logo?.image || ""}
alt={logo?.alt}
width={logo?.width || 200}
height={logo?.height || 200}
/>
<span class="text-[#9b9b9b] text-xs">
{text}
</span>
</div>
{layout?.hide?.backToTheTop
? <></>
: <BackToTop content={backToTheTop?.text} />}
</footer>
);
}
Expand Down

0 comments on commit 925dce2

Please sign in to comment.