add color to footerwidgets

src/app/(main)/[locale]/layout.tsx

@@ -14,13 +14,15 @@ import {
 } from "studio/lib/interfaces/companyDetails";
 import { LegalDocument } from "studio/lib/interfaces/legalDocuments";
 import { Navigation } from "studio/lib/interfaces/navigation";
+import { ColorPalette } from "studio/lib/interfaces/pages";
 import { SocialMediaProfiles } from "studio/lib/interfaces/socialMedia";
 import {
   COMPANY_INFO_QUERY,
   COMPANY_LOCATIONS_QUERY,
   LEGAL_DOCUMENTS_BY_LANG_QUERY,
 } from "studio/lib/queries/admin";
 import {
+  FOOTER_COLOR_QUERY,
   NAV_QUERY,
   SOME_PROFILES_QUERY,
 } from "studio/lib/queries/siteSettings";
@@ -54,6 +56,7 @@ export default async function Layout({
     initialSoMe,
     initialLegal,
     initialCompanyLocations,
+    initialColorPallette,
   ] = await Promise.all([
     loadStudioQuery<Navigation>(
       NAV_QUERY,
@@ -76,6 +79,11 @@ export default async function Layout({
       {},
       { perspective },
     ),
+    loadStudioQuery<ColorPalette[] | null>(
+      FOOTER_COLOR_QUERY,
+      { language: params.locale },
+      { perspective },
+    ),
   ]);
 
   return (
@@ -89,8 +97,8 @@ export default async function Layout({
             legalData={initialLegal.data}
             companyInfo={initialCompanyInfo.data}
             companyLocations={initialCompanyLocations.data}
-            /* brandAssets={initialBrandAssets.data} */
             soMeData={initialSoMe.data}
+            footerColorPalette={initialColorPallette.data}
           />
         </NextIntlClientProvider>
 

src/components/navigation/footer/Footer.tsx

@@ -1,5 +1,8 @@
+"use client";
+
 import Image from "next/image";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { ReactNode } from "react";
 
@@ -11,6 +14,7 @@ import {
 } from "studio/lib/interfaces/companyDetails";
 import { LegalDocument } from "studio/lib/interfaces/legalDocuments";
 import { ILink, Navigation } from "studio/lib/interfaces/navigation";
+import { ColorPalette } from "studio/lib/interfaces/pages";
 import {
   SocialMediaLink,
   SocialMediaProfiles,
@@ -27,6 +31,7 @@ export interface IFooter {
   legalData: LegalDocument[];
   companyInfo: CompanyInfo;
   companyLocations: CompanyLocation[];
+  footerColorPalette: ColorPalette[] | null;
 }
 
 const Footer = ({
@@ -35,13 +40,20 @@ const Footer = ({
   /* legalData, */
   companyInfo,
   companyLocations,
+  footerColorPalette,
 }: IFooter) => {
   const t = useTranslations("footer");
+  const pathname = usePathname();
 
   return (
     <footer className={styles.footer}>
       <div className={styles.wrapper}>
-        <FooterIllustration color={"#FFD02F"} />
+        <FooterIllustration
+          color={
+            footerColorPalette?.find((item) => pathname.includes(item.slug))
+              ?.footerWidgetColor || "#FFD02F"
+          }
+        />
         <div className={styles.footerContent}>
           <nav className={styles.nav}>
             <div className={styles.flex_container_left}>

src/components/navigation/footer/FooterPreview.tsx

@@ -2,21 +2,21 @@
 import { QueryResponseInitial, useQuery } from "@sanity/react-loader";
 
 import Footer from "src/components/navigation/footer/Footer";
-import { BrandAssets } from "studio/lib/interfaces/brandAssets";
 import {
   CompanyInfo,
   CompanyLocation,
 } from "studio/lib/interfaces/companyDetails";
 import { LegalDocument } from "studio/lib/interfaces/legalDocuments";
 import { Navigation } from "studio/lib/interfaces/navigation";
+import { ColorPalette } from "studio/lib/interfaces/pages";
 import { SocialMediaProfiles } from "studio/lib/interfaces/socialMedia";
 import {
   COMPANY_INFO_QUERY,
   COMPANY_LOCATIONS_QUERY,
   LEGAL_DOCUMENTS_BY_LANG_QUERY,
 } from "studio/lib/queries/admin";
 import {
-  BRAND_ASSETS_QUERY,
+  FOOTER_COLOR_QUERY,
   NAV_QUERY,
   SOME_PROFILES_QUERY,
 } from "studio/lib/queries/siteSettings";
@@ -32,32 +32,35 @@ function useInitialData<T>(
 export default function FooterPreview({
   initialNav,
   initialCompanyInfo,
-  initialBrandAssets,
   initialSoMe,
   initialLegal,
   language,
   initialCompanyLocations,
+  initialFooterColor,
 }: {
   initialNav: QueryResponseInitial<Navigation>;
   initialCompanyInfo: QueryResponseInitial<CompanyInfo>;
-  initialBrandAssets: QueryResponseInitial<BrandAssets>;
   initialSoMe: QueryResponseInitial<SocialMediaProfiles | null>;
   initialLegal: QueryResponseInitial<LegalDocument[] | null>;
   language: string;
   initialCompanyLocations: QueryResponseInitial<CompanyLocation[]>;
+  initialFooterColor: QueryResponseInitial<ColorPalette[] | null>;
 }) {
   const { data: newNav } = useQuery(
     NAV_QUERY,
     { language },
     { initial: initialNav },
   );
   const newCompanyInfo = useInitialData(COMPANY_INFO_QUERY, initialCompanyInfo);
-  const newBrandAssets = useInitialData(BRAND_ASSETS_QUERY, initialBrandAssets);
   const newSoMedata = useInitialData(SOME_PROFILES_QUERY, initialSoMe);
   const newCompanyLocations = useInitialData(
     COMPANY_LOCATIONS_QUERY,
     initialCompanyLocations,
   );
+  const newFooterColorPallette = useInitialData(
+    FOOTER_COLOR_QUERY,
+    initialFooterColor,
+  );
 
   const { data: newLegal } = useQuery(
     LEGAL_DOCUMENTS_BY_LANG_QUERY,
@@ -67,17 +70,17 @@ export default function FooterPreview({
   return (
     newNav &&
     newCompanyInfo &&
-    newBrandAssets &&
     newSoMedata &&
     newLegal &&
-    newCompanyLocations && (
+    newCompanyLocations &&
+    newFooterColorPallette && (
       <Footer
         navigationData={newNav}
         companyInfo={newCompanyInfo}
         companyLocations={newCompanyLocations}
-        /* brandAssets={newBrandAssets} */
         soMeData={newSoMedata}
         legalData={newLegal}
+        footerColorPalette={newFooterColorPallette}
       />
     )
   );

studio/lib/interfaces/pages.ts

@@ -225,4 +225,10 @@ export interface PageBuilder {
   sections: Section[];
   slug: Slug;
   seo: SeoData;
+  footerWidgetColor?: string;
+}
+
+export interface ColorPalette {
+  footerWidgetColor: string;
+  slug: string;
 }

studio/lib/queries/siteSettings.ts

@@ -67,6 +67,14 @@ export const EMPLOYEE_PAGE_SLUG_AND_TITLE_QUERY = groq`
   }
 `;
 
+//Color Palette Query
+export const FOOTER_COLOR_QUERY = groq`
+  *[_type == "pageBuilder"]{
+    "footerWidgetColor": footerWidgetColor.hex,
+    "slug": ${translatedFieldFragment("slug")}
+    }
+`;
+
 //Social Media Profiles
 export const SOME_PROFILES_QUERY = groq`
   *[_type == "soMeLinksID" && _id == "soMeLinksID"][0]

studio/schemas/documents/pageBuilder.ts

@@ -65,6 +65,13 @@ const pageBuilder = defineType({
         learningSection,
       ],
     }),
+    defineField({
+      name: "footerWidgetColor",
+      type: "color",
+      title: "Footer Widget Color",
+      description: "This color will be used for the widgets in the footer.",
+      options: { disableAlpha: true },
+    }),
   ],
   preview: {
     select: {

studio/studioConfig.tsx

@@ -1,3 +1,4 @@
+import { colorInput } from "@sanity/color-input";
 import { documentInternationalization } from "@sanity/document-internationalization";
 import { visionTool } from "@sanity/vision";
 import { WorkspaceOptions } from "sanity";
@@ -55,6 +56,7 @@ const config: WorkspaceOptions = {
       },
     }),
     media(),
+    colorInput(),
   ],
 };