chore: setup project for production

components/dynamic-navbar/currencySelect.jsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+
+const CurrencySelect = ({ selectedCurrency, setSelectedCurrency, SUPPORTED_CURRENCIES }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="relative w-32">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full px-4 py-2.5 bg-white border border-gray-200 rounded-lg shadow-sm 
+        flex items-center justify-between text-gray-700 text-sm font-medium
+        hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 
+        transition-all duration-200 group"
+      >
+        {SUPPORTED_CURRENCIES[selectedCurrency]?.country}
+        <ChevronDown 
+          className={`w-4 h-4 text-gray-400 transition-transform duration-200 
+          ${isOpen ? 'rotate-180' : ''} group-hover:text-gray-600`}
+        />
+      </button>
+
+      {isOpen && (
+        <div 
+          className="absolute w-full mt-2 bg-white border border-gray-200 rounded-lg shadow-lg 
+          overflow-hidden z-50 animate-in fade-in slide-in-from-top-2 duration-200"
+        >
+          <div className="max-h-60 overflow-auto scrollbar-thin scrollbar-thumb-gray-200 hover:scrollbar-thumb-gray-300">
+            {Object.entries(SUPPORTED_CURRENCIES).map(([code, { country }]) => (
+              <button
+                key={code}
+                onClick={() => {
+                  setSelectedCurrency(code);
+                  setIsOpen(false);
+                }}
+                className={`w-full px-4 py-2.5 text-left text-sm transition-colors duration-150
+                hover:bg-gray-50 focus:outline-none focus:bg-gray-50
+                ${selectedCurrency === code ? 'bg-blue-50 text-blue-600 font-medium' : 'text-gray-700'}
+                ${selectedCurrency === code ? 'hover:bg-blue-50' : 'hover:bg-gray-50'}`}
+              >
+                {country}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CurrencySelect;

components/dynamic-navbar/dynamicNavbar.jsx

@@ -0,0 +1,54 @@
+import React, { useContext } from "react";
+import Link from "next/link";
+import {
+  NavigationMenu,
+  NavigationMenuItem,
+  NavigationMenuList,
+  NavigationMenuLink,
+  navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu";
+import ProductContext from "@/app/contexts/productContext";
+
+const DynamicNavbar = ({ toggleMenu }) => {
+  const { category } = useContext(ProductContext);
+
+  if (!category) {
+    return null;
+  }
+
+  const categoryItems = category?.map((category) => ({
+    label: category.category_name,
+    url: `/collections/${category.id}`,
+  }));
+
+  const consultation = {
+    label: "Rudraksha consultation",
+    url: "/products/premium-rudraksha-consultation-astrology",
+  };
+
+  const visibleItems = [...categoryItems.slice(0, 4), consultation];
+
+  return (
+    <NavigationMenu className="text-xl">
+      <NavigationMenuList className="text-2xl">
+        {visibleItems.map((item) => (
+          <NavigationMenuItem key={item.label}>
+            <Link href={item.url} legacyBehavior passHref>
+              <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                {item.label}
+              </NavigationMenuLink>
+            </Link>
+          </NavigationMenuItem>
+        ))}
+
+        <NavigationMenuItem>
+          <button onClick={toggleMenu} className={navigationMenuTriggerStyle()}>
+            More
+          </button>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  );
+};
+
+export default DynamicNavbar;