\n 👜 Beaded Bags Boutique\n

\n \n

\n setIsCartOpen(true)}\n className=\"relative p-2 text-gray-600 hover:text-purple-600 transition-colors\"\n >\n \n {getCartItemCount() > 0 && (\n \n {getCartItemCount()}\n \n )}\n \n

\n\n {/* Hero Section */}\n

\n Handcrafted Beaded Elegance\n

\n Discover our collection of unique, artisan-made beaded bags\n

\n document.getElementById('products')?.scrollIntoView()}\n className=\"bg-white text-purple-600 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition-colors\"\n >\n Shop Now\n \n

\n\n {/* Filters and Search */}\n

\n {/* Search */}\n

\n setSearchTerm(e.target.value)}\n className=\"w-full md:w-64 pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent\"\n />\n \n

\n\n {/* Category Filter */}\n

\n setSelectedCategory(\"all\")}\n className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${\n selectedCategory === \"all\"\n ? \"bg-purple-600 text-white\"\n : \"bg-gray-200 text-gray-700 hover:bg-gray-300\"\n }`}\n >\n All Categories\n \n {categories.map(category => (\n setSelectedCategory(category)}\n className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${\n selectedCategory === category\n ? \"bg-purple-600 text-white\"\n : \"bg-gray-200 text-gray-700 hover:bg-gray-300\"\n }`}\n >\n {category}\n \n ))}\n

\n\n {/* Products Grid */}\n

\n {filteredProducts.length === 0 ? (\n

No bags found matching your criteria.

\n ) : (\n

\n {filteredProducts.map(product => (\n \n ))}\n

\n )}\n

\n\n {/* Footer */}\n \n\n {/* Cart Sidebar */}\n setIsCartOpen(false)}\n cart={cart}\n onUpdateQuantity={updateCartQuantity}\n onRemoveItem={removeFromCart}\n onCheckout={() => {\n setIsCartOpen(false);\n setIsCheckoutOpen(true);\n }}\n total={getCartTotal()}\n />\n\n {/* Checkout Modal */}\n setIsCheckoutOpen(false)}\n cart={cart}\n total={getCartTotal()}\n onOrderComplete={() => {\n clearCart();\n setIsCheckoutOpen(false);\n }}\n />\n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/gracie1/Beadebag/code/frontend/components/App.tsx","extension","actionData","errors"]