Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

start layout props #168

Merged
merged 6 commits into from
Apr 17, 2024
Merged

start layout props #168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9042736
start layout props
guitavano Apr 17, 2024
4ed6411
improve footer
guitavano Apr 17, 2024
8548f53
fmt
guitavano Apr 17, 2024
ffea419
improve cookie consent
guitavano Apr 17, 2024
3520dd7
improve faq
guitavano Apr 17, 2024
cff66e7
improve category card list and banner
guitavano Apr 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
222 changes: 27 additions & 195 deletions components/footer/Footer.tsx
View file
Open in desktop
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 @@ -171,189 +136,56 @@ function Footer({
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,
},
},
}: Props) {
const _logo = layout?.hide?.logo ? <></> : <Logo logo={logo} />;
const _newsletter = layout?.hide?.newsletter ? <></> : (
const _logo = <Logo logo={logo} />;
const _newsletter = (
<Newsletter
content={newsletter}
layout={{
tiled: layout?.variation == "Variation 4" ||
layout?.variation == "Variation 5",
}}
/>
);
const _sectionLinks = layout?.hide?.sectionLinks ? <></> : (
const _sectionLinks = (
<FooterItems
sections={sections}
justify={layout?.variation == "Variation 2" ||
layout?.variation == "Variation 3"}
justify={false}
/>
);
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 _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
15 changes: 6 additions & 9 deletions components/product/ProductShelf.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { SendEventOnView } from "../../components/Analytics.tsx";
import ProductCard from "../../components/product/ProductCard.tsx";
import Icon from "../../components/ui/Icon.tsx";
import Header from "../../components/ui/SectionHeader.tsx";
import Slider from "../../components/ui/Slider.tsx";
import SliderJS from "../../islands/SliderJS.tsx";
import { useId } from "../../sdk/useId.ts";
Expand All @@ -20,8 +19,6 @@ export interface Props {
mobile?: 1 | 2 | 3 | 4 | 5;
desktop?: 1 | 2 | 3 | 4 | 5;
};
headerAlignment?: "center" | "left";
headerfontSize?: "Normal" | "Large" | "Small";
showArrows?: boolean;
};
}
Expand Down Expand Up @@ -55,12 +52,12 @@ function ProductShelf({
};
return (
<div class="w-full container py-8 flex flex-col gap-6 lg:py-10">
<Header
title={title || ""}
description={description || ""}
fontSize={layout?.headerfontSize || "Large"}
alignment={layout?.headerAlignment || "center"}
/>
<div class="flex flex-col gap-2">
<h2 class="text-base-content text-center text-3xl font-semibold">
{title}
</h2>
<p class="text-center">{description}</p>
</div>

<div
id={id}
Expand Down
20 changes: 7 additions & 13 deletions components/product/ProductShelfTabbed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { usePartialSection } from "deco/hooks/usePartialSection.ts";
import { SendEventOnView } from "../../components/Analytics.tsx";
import ProductCard from "../../components/product/ProductCard.tsx";
import Icon from "../../components/ui/Icon.tsx";
import Header from "../../components/ui/SectionHeader.tsx";
import Slider from "../../components/ui/Slider.tsx";
import SliderJS from "../../islands/SliderJS.tsx";
import { useId } from "../../sdk/useId.ts";
Expand All @@ -21,18 +20,13 @@ export interface Props {
tabs: Tab[];
title?: string;
description?: string;
layout?: {
headerAlignment?: "center" | "left";
headerfontSize?: "Normal" | "Large";
};
tabIndex?: number;
}

function TabbedProductShelf({
tabs,
title,
description,
layout,
tabIndex,
}: Props) {
const id = useId();
Expand All @@ -48,12 +42,12 @@ function TabbedProductShelf({

return (
<div class="w-full container py-8 flex flex-col gap-8 lg:gap-12 lg:py-10">
<Header
title={title || ""}
description={description || ""}
fontSize={layout?.headerfontSize || "Large"}
alignment={layout?.headerAlignment || "center"}
/>
<div class="flex flex-col gap-2">
<h2 class="text-base-content text-center text-3xl font-semibold">
{title}
</h2>
<p class="text-center">{description}</p>
</div>

<div class="flex justify-center">
<div class="tabs tabs-boxed">
Expand Down Expand Up @@ -94,7 +88,7 @@ function TabbedProductShelf({
<Icon size={24} id="ChevronLeft" strokeWidth={3} />
</Slider.PrevButton>
</div>
<div class="hidden relative sm:block z-10 col-start-3 row-start-3">
<div class="hidden relative sm:block z-10 col-start-3 row-start-3 font-">
<Slider.NextButton class="btn btn-circle btn-outline absolute left-1/2 bg-base-100">
<Icon size={24} id="ChevronRight" strokeWidth={3} />
</Slider.NextButton>
Expand Down
2 changes: 1 addition & 1 deletion components/ui/CategoryBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ function Banner(props: SectionProps<ReturnType<typeof loader>>) {
{title}
</span>
</h1>
<h2>
<h2 class="text-base-content text-center text-3xl font-semibold">
<span class="text-xl font-medium text-base-100">
{subtitle}
</span>
Expand Down
Loading
Loading