feat: color mode on feature grid

kopexa-grc · Dec 30, 2024 · 4570638 · 4570638
1 parent 0ffa7d1
commit 4570638
Show file tree

Hide file tree

Showing 11 changed files with 9,463 additions and 23 deletions.
diff --git a/src/app/(frontend)/layout.tsx b/src/app/(frontend)/layout.tsx
@@ -50,7 +50,9 @@ export default async function RootLayout({
           <link href="https://www.google-analytics.com" rel="preconnect" />
           <GoogleAnalytics />
         </head>
-        <body className={`antialiased ${ManropeFont.variable}`}>
+        <body
+          className={`antialiased bg-background text-foreground ${ManropeFont.variable}`}
+        >
           <GoogleTagManager />
           <Providers>
             <Header mainMenu={mainMenu} />

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -34,7 +34,8 @@
     --chart-5: 27 87% 67%;
   }
 
-  .dark {
+  .dark,
+  [data-theme="dark"] {
     --background: 20 14.3% 4.1%;
     --foreground: 60 9.1% 97.8%;
     --card: 20 14.3% 4.1%;

diff --git a/src/blocks/feature-grid/config.ts b/src/blocks/feature-grid/config.ts
@@ -1,4 +1,5 @@
 import { link } from "@/fields/link";
+import { themeField } from "@/fields/theme";
 import type { Block } from "payload";
 
 export const FeatureGrid: Block = {
@@ -9,6 +10,7 @@ export const FeatureGrid: Block = {
     plural: "Feature Grids",
   },
   fields: [
+    themeField(),
     {
       name: "layout",
       type: "select",
@@ -92,17 +94,7 @@ export const FeatureGrid: Block = {
         condition: (_, siblingData) => siblingData?.showPromoCard,
       },
       fields: [
-        {
-          name: "dark",
-          type: "checkbox",
-          label: "Is dark?",
-          admin: {
-            style: {
-              alignSelf: "flex-end",
-            },
-            width: "50%",
-          },
-        },
+        themeField(),
         {
           name: "title",
           type: "text",

diff --git a/src/blocks/feature-grid/feature-grid-block.tsx b/src/blocks/feature-grid/feature-grid-block.tsx
@@ -1,8 +1,8 @@
+import { ColorMode } from "@/components/cms/color-mode";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Icon, type IconName } from "@/components/ui/icon";
 import { PromoCard } from "@/components/ui/promo-card";
 import { Heading, Paragraph } from "@/components/ui/typography";
-import { cn } from "@/lib/utils";
 import type { FeatureGridBlock as FeatureGridBlockProps } from "@/payload-types";
 import { tv } from "tailwind-variants";
 
@@ -67,14 +67,15 @@ export const FeatureGridBlock = ({
   cards = [],
   showPromoCard,
   promoCard,
+  theme,
 }: Props) => {
   const css = styles({
     layout: layout ?? "grid",
     alignment: headline.alignment ?? "center",
   });
 
   return (
-    <section className={css.root()}>
+    <ColorMode as="section" theme={theme} className={css.root()}>
       <div className={css.container()}>
         {/* Header */}
         {headline && (
@@ -114,8 +115,8 @@ export const FeatureGridBlock = ({
 
         {/* Optional Promo Card */}
         {showPromoCard && promoCard?.title && promoCard?.description && (
-          <div className="col-span-full">
-            <PromoCard.Root className={cn(promoCard.dark && "dark")}>
+          <ColorMode className="col-span-full" theme={promoCard.theme}>
+            <PromoCard.Root>
               <PromoCard.Content>
                 <PromoCard.Text>
                   <p className="text-2xl font-semibold mb-3">
@@ -130,9 +131,9 @@ export const FeatureGridBlock = ({
                 )}
               </PromoCard.Content>
             </PromoCard.Root>
-          </div>
+          </ColorMode>
         )}
       </div>
-    </section>
+    </ColorMode>
   );
 };
diff --git a/src/components/cms/color-mode.tsx b/src/components/cms/color-mode.tsx
@@ -0,0 +1,22 @@
+import { forwardRef } from "react";
+import { Box, type BoxProps } from "../ui/box";
+import type { ThemeField } from "@/payload-types";
+
+export type ColorModeProps = BoxProps<"div" | "section"> & {
+  theme: ThemeField;
+};
+
+export const ColorMode = forwardRef<HTMLDivElement, ColorModeProps>(
+  (props, ref) => {
+    const { children, theme, ...restProps } = props;
+    const { colorMode } = theme ?? {};
+
+    return (
+      <Box {...restProps} ref={ref} data-theme={colorMode ?? "light"}>
+        {children}
+      </Box>
+    );
+  }
+);
+
+ColorMode.displayName = "ColorMode";
diff --git a/src/components/ui/typography/heading.tsx b/src/components/ui/typography/heading.tsx
@@ -5,7 +5,7 @@ import { tv, type VariantProps } from "tailwind-variants";
 import { cn } from "@/lib/utils";
 
 export const headingVariants = tv({
-  base: "font-semibold m-0",
+  base: "font-semibold m-0 text-foreground",
   variants: {
     level: {
       1: "text-4xl md:text-5xl lg:text-7xl",

diff --git a/src/fields/theme/index.ts b/src/fields/theme/index.ts
@@ -0,0 +1,27 @@
+import type { Field } from "payload";
+
+export const themeField = (): Field => {
+  return {
+    name: "theme",
+    type: "group",
+    interfaceName: "ThemeField",
+    fields: [
+      {
+        type: "select",
+        name: "colorMode",
+        required: true,
+        defaultValue: "light",
+        options: [
+          {
+            label: "Light",
+            value: "light",
+          },
+          {
+            label: "Dark",
+            value: "dark",
+          },
+        ],
+      },
+    ],
+  };
+};