From a5b8f491eb6f6d69b0a4d2b97e288eda454724d8 Mon Sep 17 00:00:00 2001 From: RaviAnand Mohabir Date: Tue, 27 Aug 2024 23:45:33 +0200 Subject: [PATCH] feat: :sparkles: add feature toggles to homepage - Add take-away and delivery options - Update responsive styling --- src/app/(frontend)/[locale]/about/page.tsx | 26 +++++++++----------- src/app/(frontend)/[locale]/contact/page.tsx | 5 ++-- src/app/(frontend)/[locale]/page.tsx | 23 +++++++++++------ src/components/general/address.tsx | 6 ++--- src/components/general/contact-methods.tsx | 7 +++--- src/components/general/feature-toggle.tsx | 20 +++++++++++++++ src/components/layout/footer.tsx | 18 ++++++++++---- src/globals/About.ts | 10 ++++++++ src/i18n/de.ts | 2 ++ src/payload-types.ts | 2 ++ 10 files changed, 83 insertions(+), 36 deletions(-) create mode 100644 src/components/general/feature-toggle.tsx diff --git a/src/app/(frontend)/[locale]/about/page.tsx b/src/app/(frontend)/[locale]/about/page.tsx index 10b53fc..7305ad9 100644 --- a/src/app/(frontend)/[locale]/about/page.tsx +++ b/src/app/(frontend)/[locale]/about/page.tsx @@ -1,10 +1,10 @@ -import { Cigarette, PawPrint } from "lucide-react"; -import { Container, HStack, Stack } from "@styled-system/jsx"; +import { Cigarette, DoorOpen, PawPrint, Truck } from "lucide-react"; +import { Container, Stack } from "@styled-system/jsx"; +import FeatureToggle from "@/components/general/feature-toggle"; import { Metadata } from "next"; import { Params } from "../shared"; import RichText from "@/components/rich-text"; -import { Text } from "@/components/ui/text"; import { getAbout } from "@/api"; import { getI18n } from "@/i18n/server"; @@ -17,18 +17,14 @@ export default async function About({ params: { locale } }: { params: Params }) - {about.dogsAllowed && ( - - - {t("about.dogsAllowed")} - - )} - {about.fumoire && ( - - - {t("about.fumoire")} - - )} + + + + diff --git a/src/app/(frontend)/[locale]/contact/page.tsx b/src/app/(frontend)/[locale]/contact/page.tsx index 504a4c8..93e7dc8 100644 --- a/src/app/(frontend)/[locale]/contact/page.tsx +++ b/src/app/(frontend)/[locale]/contact/page.tsx @@ -59,14 +59,15 @@ export default async function Contact({ {t("general.address")} - +
{contact.address.embeddedMaps && ( )} diff --git a/src/app/(frontend)/[locale]/page.tsx b/src/app/(frontend)/[locale]/page.tsx index ec040c2..71172e3 100644 --- a/src/app/(frontend)/[locale]/page.tsx +++ b/src/app/(frontend)/[locale]/page.tsx @@ -1,5 +1,5 @@ -import { Box, Container, Stack, styled } from "@styled-system/jsx"; -import { Info, Palmtree, PartyPopper } from "lucide-react"; +import { Box, Container, HStack, Stack } from "@styled-system/jsx"; +import { Cigarette, DoorOpen, Info, Palmtree, PartyPopper, PawPrint, Truck } from "lucide-react"; import { getAbout, getCurrentAnnouncements, @@ -9,6 +9,7 @@ import { } from "@/api"; import { Alert } from "@/components/ui/alert"; +import FeatureToggle from "@/components/general/feature-toggle"; import Gallery from "./gallery"; import { Heading } from "@/components/ui/heading"; import Image from "next/image"; @@ -45,14 +46,10 @@ export default async function Home({ params: { locale } }: { params: Params }) { maxH="80%" align="center" px={30} - gap={24} + gap={20} color="white" > - + {announcements.docs.length > 0 && ( {t("general.announcements")} @@ -96,6 +93,16 @@ export default async function Home({ params: { locale } }: { params: Params }) { {home.tagline} + + + + + + diff --git a/src/components/general/address.tsx b/src/components/general/address.tsx index 2fc4bf3..bd7fefe 100644 --- a/src/components/general/address.tsx +++ b/src/components/general/address.tsx @@ -1,15 +1,15 @@ +import { Box, BoxProps } from "@styled-system/jsx"; import { getAbout, getContact } from "@/api"; -import { Box } from "@styled-system/jsx"; import { Locale } from "@/i18n/settings"; import { Text } from "@/components/ui/text"; -export default async function Address({ locale }: { locale: Locale }) { +export default async function Address({ locale, ...props }: { locale: Locale } & BoxProps) { const about = await getAbout({ locale }); const contact = await getContact({ locale }); return ( - + {about.name} {contact.address.street} {contact.address.number} diff --git a/src/components/general/contact-methods.tsx b/src/components/general/contact-methods.tsx index 3ac4888..e1432b3 100644 --- a/src/components/general/contact-methods.tsx +++ b/src/components/general/contact-methods.tsx @@ -1,16 +1,17 @@ -import { Grid } from "@styled-system/jsx"; +import { Grid, GridProps } from "@styled-system/jsx"; + import { Link } from "@/components/ui/link"; import { Locale } from "@/i18n/settings"; import { Text } from "@/components/ui/text"; import { getContact } from "@/api"; import { getI18n } from "@/i18n/server"; -export default async function ContactMethods({ locale }: { locale: Locale }) { +export default async function ContactMethods({ locale, ...props }: { locale: Locale } & GridProps) { const t = await getI18n(); const contact = await getContact({ locale }); return ( - + {contact.phone && ( <> {t("general.phoneNumber")} diff --git a/src/components/general/feature-toggle.tsx b/src/components/general/feature-toggle.tsx new file mode 100644 index 0000000..d749123 --- /dev/null +++ b/src/components/general/feature-toggle.tsx @@ -0,0 +1,20 @@ +import { HStack } from "@styled-system/jsx"; +import React from "react"; +import { Text } from "@/components/ui/text"; + +type FeatureToggleProps = { + feature: boolean; + icon: React.ComponentType; + label: string; +}; + +export default function FeatureToggle({ feature, icon: Icon, label }: FeatureToggleProps) { + return ( + feature && ( + + + {label} + + ) + ); +} diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx index f1ec96c..555c534 100644 --- a/src/components/layout/footer.tsx +++ b/src/components/layout/footer.tsx @@ -18,9 +18,15 @@ export default async function Footer({ locale }: { locale: Locale }) { return ( - -
- + +
+ {(contact.socialLinks ?? []).map((sl) => ( @@ -29,8 +35,10 @@ export default async function Footer({ locale }: { locale: Locale }) { ))} - - + + + + {t("general.openingTimes")} diff --git a/src/globals/About.ts b/src/globals/About.ts index e2f5b97..b965731 100644 --- a/src/globals/About.ts +++ b/src/globals/About.ts @@ -31,5 +31,15 @@ export const About: GlobalConfig = { type: "checkbox", required: true, }, + { + name: "delivery", + type: "checkbox", + required: true, + }, + { + name: "takeAway", + type: "checkbox", + required: true, + }, ], }; diff --git a/src/i18n/de.ts b/src/i18n/de.ts index 3f7203f..15213cb 100644 --- a/src/i18n/de.ts +++ b/src/i18n/de.ts @@ -31,6 +31,8 @@ export default { about: { dogsAllowed: "Hunde erlaubt", fumoire: "Fumoire verfügbar", + takeAway: "Take-away", + delivery: "Lieferung", }, contact: { name: "Name", diff --git a/src/payload-types.ts b/src/payload-types.ts index e7a83de..ad836ef 100644 --- a/src/payload-types.ts +++ b/src/payload-types.ts @@ -349,6 +349,8 @@ export interface About { } | null; dogsAllowed: boolean; fumoire: boolean; + delivery: boolean; + takeAway: boolean; updatedAt?: string | null; createdAt?: string | null; }