chore: transfer repo

components/build-box/client/BuildBoxPageContent.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { SortDropdown } from "@/components/products/client/SortDropdown";
+import { FilterSidebar } from "@/components/products/FilterSidebar";
+import { useProductFilters } from "@/components/products/hooks/useProductFilters";
+import { FilterButton } from "@/components/products/ProductComponents/FilterButton";
+import { useTranslation } from "@/lib/hooks/useTranslation";
+import { Product } from "lib/shopify/types";
+import { useState } from "react";
+import { ProductGrid } from "../../products/ProductGrid";
+import { BuildBoxLayout } from "./BuildBoxLayout";
+
+interface BuildBoxPageContentProps {
+  products: Product[];
+}
+
+export function BuildBoxPageContent({ products }: BuildBoxPageContentProps) {
+  const { t } = useTranslation();
+  const [isSidebarOpen, setSidebarOpen] = useState(false);
+  const { 
+    activeFilters, 
+    sortOption, 
+    sortedProducts, 
+    handleApplyFilters, 
+    handleSortChange, 
+    removeFilter, 
+    clearAllFilters, 
+    formatFilterTag 
+  } = useProductFilters(products);
+
+  // If no products, display a message
+  if (!products || products.length === 0) {
+    return (
+      <BuildBoxLayout title={t('buildBox.title')} step={1}>
+        <div className="text-center py-8">
+          <p>{t('buildBox.emptyMessage')}</p>
+        </div>
+      </BuildBoxLayout>
+    );
+  }
+
+  return (
+    <BuildBoxLayout title={t('buildBox.title')} step={1}>
+      <div className="mb-8">
+        {/* Filter and Sort Controls */}
+        <div className="flex justify-between items-center mb-4">
+          <FilterButton onClick={() => setSidebarOpen(true)} />
+          <SortDropdown 
+            value={sortOption} 
+            onChange={handleSortChange}
+            label={t('products.sort.title')}
+          />
+        </div>
+      </div>
+      
+      <ProductGrid 
+        products={sortedProducts} 
+        title="" 
+        showControls={false}
+      />
+      
+      {/* Filter Sidebar */}
+      <FilterSidebar
+        isOpen={isSidebarOpen}
+        onClose={() => setSidebarOpen(false)}
+        onApplyFilters={handleApplyFilters}
+        activeFilters={activeFilters}
+      />
+    </BuildBoxLayout>
+  );
+}