support multi brands site

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

components/logo-square.tsx

@@ -1,13 +1,20 @@
 import Image from 'next/image';
 
+const { STORE_PREFIX } = process.env;
 export default function LogoSquare({ dark = false }: { dark?: boolean }) {
   return (
     <div className="h-12 md:h-[55px]">
       {dark ? (
-        <Image src="/dark-logo.svg" alt="Logo" width={327} height={61} className="h-full w-full" />
+        <Image
+          src={`/${STORE_PREFIX}/dark-logo.svg`}
+          alt="Logo"
+          width={327}
+          height={61}
+          className="h-full w-full"
+        />
       ) : (
         <Image
-          src="/logo.svg"
+          src={`/${STORE_PREFIX}/logo.svg`}
           alt="Logo"
           width={327}
           height={61}

components/manufacturers-grid/index.tsx

@@ -16,27 +16,32 @@ const ManufacturersGrid = ({ manufacturers, variant = 'home' }: ManufacturersGri
 
   return (
     <div className="h-auto max-h-[700px] w-full overflow-auto rounded px-10 py-6 shadow">
-      <p className="flex items-center gap-2">
+      {popularManufacturers.length ? (
-        <StarIcon className="size-4" />
+        <>
-        <span className="font-medium text-blue-800">Popular Manufacturers</span>
+          <p className="flex items-center gap-2">
-      </p>
+            <StarIcon className="size-4" />
-      <div className="mt-6 grid grid-cols-2 gap-x-12 gap-y-5 md:grid-cols-3 md:gap-y-8 lg:grid-cols-4 xl:grid-cols-5">
+            <span className="font-medium text-blue-800">Popular Manufacturers</span>
-        {popularManufacturers.map((manufacturer) => (
+          </p>
-          <div key={manufacturer.id} className="flex flex-col gap-2">
+          <div className="mt-6 grid grid-cols-2 gap-x-12 gap-y-5 md:grid-cols-3 md:gap-y-8 lg:grid-cols-4 xl:grid-cols-5">
-            {variant === 'home' ? (
+            {popularManufacturers.map((manufacturer) => (
-              <ManufacturerItem manufacturer={manufacturer} />
+              <div key={manufacturer.id} className="flex flex-col gap-2">
-            ) : (
+                {variant === 'home' ? (
-              <ManufacturerItem
+                  <ManufacturerItem manufacturer={manufacturer} />
-                manufacturer={manufacturer}
+                ) : (
-                className={'rounded border border-primary px-2 py-1'}
+                  <ManufacturerItem
-                href={`/search/${variant}?${MAKE_FILTER_ID}=${manufacturer.id}`}
+                    manufacturer={manufacturer}
-              />
+                    className={'border-primary rounded border px-2 py-1'}
-            )}
+                    href={`/search/${variant}?${MAKE_FILTER_ID}=${manufacturer.id}`}
-            {variant === 'home' && <ButtonGroup manufacturer={manufacturer} />}
+                  />
+                )}
+                {variant === 'home' && <ButtonGroup manufacturer={manufacturer} />}
+              </div>
+            ))}{' '}
           </div>
-        ))}
+          <hr className="my-10 w-full" />
-      </div>
+        </>
-      <hr className="my-10 w-full" />
+      ) : null}
+
       <p className="flex items-center gap-2">
         <GlobeAltIcon className="size-4" />
         <span className="font-medium text-blue-800">All Manufacturers</span>
@@ -51,7 +56,7 @@ const ManufacturersGrid = ({ manufacturers, variant = 'home' }: ManufacturersGri
               ) : (
                 <ManufacturerItem
                   manufacturer={manufacturer}
-                  className={'rounded border border-primary px-2 py-1'}
+                  className={'border-primary rounded border px-2 py-1'}
                   href={`/search/${variant}?${MAKE_FILTER_ID}=${manufacturer.id}`}
                 />
               )}

lib/styles.ts

@@ -1,4 +1,4 @@
-export const colors = {
+export const carPartPlanetColor = {
   primary: {
     DEFAULT: '#EF6C02',
     emphasis: '#C85900',
@@ -20,3 +20,26 @@ export const colors = {
     600: '#111C55'
   }
 };
+
+export const remanTransmissionColor = {
+  primary: {
+    DEFAULT: '#1A99DE',
+    emphasis: '#0073E6',
+    muted: '#5BAFDD'
+  },
+  content: {
+    subtle: '#9ca3af', // gray-400
+    DEFAULT: '#6b7280', // gray-500
+    emphasis: '#374151', // gray-700
+    strong: '#111827', // gray-900
+    inverted: '#ffffff' // white
+  },
+  dark: '#091242',
+  secondary: '#1A99DE',
+  blue: {
+    800: '#1C1F35',
+    200: '#666C89',
+    500: '#2D3A7B',
+    600: '#111C55'
+  }
+};

lib/utils.ts

@@ -16,6 +16,7 @@ export const ensureStartsWith = (stringToCheck: string, startsWith: string) =>
 export const validateEnvironmentVariables = () => {
   const requiredEnvironmentVariables = [
     'SHOPIFY_STORE_DOMAIN',
+    'STORE_PREFIX',
     'SHOPIFY_STOREFRONT_ACCESS_TOKEN',
     'SHOPIFY_CUSTOMER_ACCOUNT_API_CLIENT_ID',
     'SHOPIFY_CUSTOMER_ACCOUNT_API_URL',

tailwind.config.js

@@ -1,5 +1,12 @@
 const plugin = require('tailwindcss/plugin');
-import { colors } from './lib/styles.ts';
+import { carPartPlanetColor, remanTransmissionColor } from './lib/styles.ts';
+
+const { STORE_PREFIX } = process.env;
+
+const getCustomColors = {
+  'car-part-planet': carPartPlanetColor,
+  'reman-transmission': remanTransmissionColor
+};
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -7,7 +14,7 @@ module.exports = {
   content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {
-      colors,
+      colors: getCustomColors[STORE_PREFIX],
       fontFamily: {
         sans: ['var(--font-geist-sans)']
       },