71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
'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>
|
|
);
|
|
}
|