mirror of
https://gitlab.com/davidels1986/ore-cart-checkout.git
synced 2026-10-30 02:59:13 +00:00
Changes
This commit is contained in:
gpt-engineer-app[bot]
parent
7a48d4ff3e
commit
d36eebbcdc
1 changed files with 50 additions and 42 deletions
|
|
@ -6,12 +6,14 @@ import { products } from '@/data/products';
|
|||
import { Button } from '@/components/ui/button';
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
|
||||
import { Filter } from 'lucide-react';
|
||||
import { useIsMobile } from '@/hooks/use-mobile';
|
||||
import Fuse from 'fuse.js';
|
||||
|
||||
const Products = () => {
|
||||
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [filterOpen, setFilterOpen] = useState(false);
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
const fuse = useMemo(() => new Fuse(products, {
|
||||
keys: [
|
||||
|
|
@ -49,40 +51,42 @@ const Products = () => {
|
|||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
{/* Mobile Header with Search and Filter */}
|
||||
<section className="bg-card border-b py-4 md:py-6">
|
||||
<section className="bg-card border-b py-4 lg:py-6">
|
||||
<div className="container mx-auto px-4">
|
||||
<h1 className="font-display text-xl md:text-3xl font-bold text-foreground mb-3 md:mb-4">
|
||||
<h1 className="font-display text-xl lg:text-3xl font-bold text-foreground mb-3 lg:mb-4">
|
||||
All Products
|
||||
</h1>
|
||||
|
||||
{/* Mobile: Search + Filter Button Row */}
|
||||
<div className="flex gap-2 md:hidden">
|
||||
<div className="flex-1">
|
||||
<SearchBar value={searchQuery} onChange={setSearchQuery} />
|
||||
{/* Mobile/Tablet Portrait: Search + Filter Button Row */}
|
||||
{isMobile && (
|
||||
<div className="flex gap-2">
|
||||
<div className="flex-1">
|
||||
<SearchBar value={searchQuery} onChange={setSearchQuery} />
|
||||
</div>
|
||||
<Sheet open={filterOpen} onOpenChange={setFilterOpen}>
|
||||
<SheetTrigger asChild>
|
||||
<Button variant="outline" size="icon" className="shrink-0">
|
||||
<Filter className="h-4 w-4" />
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="bottom" className="h-[70vh]">
|
||||
<SheetHeader>
|
||||
<SheetTitle>Filter by Category</SheetTitle>
|
||||
</SheetHeader>
|
||||
<div className="mt-4">
|
||||
<CategorySidebar
|
||||
selectedCategory={selectedCategory}
|
||||
onSelectCategory={handleCategorySelect}
|
||||
/>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
<Sheet open={filterOpen} onOpenChange={setFilterOpen}>
|
||||
<SheetTrigger asChild>
|
||||
<Button variant="outline" size="icon" className="shrink-0">
|
||||
<Filter className="h-4 w-4" />
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="bottom" className="h-[70vh]">
|
||||
<SheetHeader>
|
||||
<SheetTitle>Filter by Category</SheetTitle>
|
||||
</SheetHeader>
|
||||
<div className="mt-4">
|
||||
<CategorySidebar
|
||||
selectedCategory={selectedCategory}
|
||||
onSelectCategory={handleCategorySelect}
|
||||
/>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Active filter badge on mobile */}
|
||||
{selectedCategory && (
|
||||
<div className="mt-2 md:hidden">
|
||||
{selectedCategory && isMobile && (
|
||||
<div className="mt-2">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
|
|
@ -97,34 +101,38 @@ const Products = () => {
|
|||
</section>
|
||||
|
||||
{/* Main Content */}
|
||||
<section className="container mx-auto px-4 py-4 md:py-8">
|
||||
<section className="container mx-auto px-4 py-4 lg:py-8">
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
{/* Category Sidebar - Desktop Only */}
|
||||
<div className="hidden lg:block lg:sticky lg:top-4 lg:self-start">
|
||||
<CategorySidebar
|
||||
selectedCategory={selectedCategory}
|
||||
onSelectCategory={setSelectedCategory}
|
||||
/>
|
||||
</div>
|
||||
{!isMobile && (
|
||||
<div className="lg:sticky lg:top-4 lg:self-start">
|
||||
<CategorySidebar
|
||||
selectedCategory={selectedCategory}
|
||||
onSelectCategory={setSelectedCategory}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Products Section */}
|
||||
<div className="flex-1">
|
||||
{/* Desktop Search Bar */}
|
||||
<div className="hidden md:block mb-6">
|
||||
<SearchBar value={searchQuery} onChange={setSearchQuery} />
|
||||
</div>
|
||||
{!isMobile && (
|
||||
<div className="mb-6">
|
||||
<SearchBar value={searchQuery} onChange={setSearchQuery} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results Info */}
|
||||
<div className="mb-3 md:mb-4">
|
||||
<p className="text-muted-foreground text-xs md:text-sm">
|
||||
<div className="mb-3 lg:mb-4">
|
||||
<p className="text-muted-foreground text-xs lg:text-sm">
|
||||
{displayProducts.length} products found
|
||||
{searchQuery.length >= 2 && ` for "${searchQuery}"`}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Products Grid - Full screen on mobile */}
|
||||
<div className="md:max-h-[70vh] md:overflow-y-auto md:pr-2 scrollbar-thin">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-3 gap-3 md:gap-4">
|
||||
{/* Products Grid */}
|
||||
<div className="lg:max-h-[70vh] lg:overflow-y-auto lg:pr-2 scrollbar-thin">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-3 gap-3 lg:gap-4">
|
||||
{displayProducts.map((product) => (
|
||||
<ProductCard key={product.id} product={product} />
|
||||
))}
|
||||
|
|
|
|||
Loading…
Reference in a new issue