From bc89babc139e3f135042e1cd454293ffef4a5db5 Mon Sep 17 00:00:00 2001 From: seaznCode Date: Mon, 6 Oct 2025 18:11:39 +0200 Subject: [PATCH] second shop concept --- src/app/shop/public/page.tsx | 908 +++++++++++++++++++++++++---------- 1 file changed, 651 insertions(+), 257 deletions(-) diff --git a/src/app/shop/public/page.tsx b/src/app/shop/public/page.tsx index 0b16c9a..554684e 100644 --- a/src/app/shop/public/page.tsx +++ b/src/app/shop/public/page.tsx @@ -1,321 +1,715 @@ 'use client' -import { useState, useEffect } from 'react' -import { StarIcon } from '@heroicons/react/20/solid' -import { HeartIcon, ShoppingCartIcon } from '@heroicons/react/24/outline' -import { HeartIcon as HeartIconSolid } from '@heroicons/react/24/solid' +import { useState } from 'react' +import { MagnifyingGlassIcon, FunnelIcon, Squares2X2Icon, ListBulletIcon, HeartIcon, StarIcon, ShoppingCartIcon } from '@heroicons/react/20/solid' +import { HeartIcon as HeartOutlineIcon } from '@heroicons/react/24/outline' +import { ChevronDownIcon } from '@heroicons/react/24/outline' import PageLayout from '../../components/PageLayout' -// Mock-Produktdaten im Tailwind UI Plus Format -const products = [ +const categories = [ + 'Alle Kategorien', + 'Technik', + 'Beauty', + 'Kleidung', + 'Getränke', + 'Lifestyle', + 'Büro' +] + +const sortOptions = [ + { name: 'Beliebteste', href: '#', current: true }, + { name: 'Neueste', href: '#', current: false }, + { name: 'Preis: Niedrig zu Hoch', href: '#', current: false }, + { name: 'Preis: Hoch zu Niedrig', href: '#', current: false }, +] + +// Sample Products Data - Profit Planet Theme +const sampleProducts = [ { id: 1, - name: 'Premium Bio-Kaffee Starter Set', - price: '€24.99', - rating: 5, - reviewCount: 142, - imageSrc: 'https://images.unsplash.com/photo-1559056199-641a0ac8b55e?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', - imageAlt: 'Premium Bio-Kaffee Set mit Bohnen und Filter', - href: '#', - category: 'Getränke', + name: 'EcoDesk Pro', + category: 'Büro', + price: 299.99, + originalPrice: 399.99, + rating: 4.8, + reviews: 124, + image: 'https://images.unsplash.com/photo-1586953208448-b95a79798f07?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80', + badge: 'Bestseller', inStock: true, + brand: 'EcoTech', + description: 'Nachhaltiger Steh-Sitz-Schreibtisch aus recyceltem Bambus' }, { id: 2, - name: 'Nachhaltiger Laptop-Ständer', - price: '€89.99', - rating: 5, - reviewCount: 87, - imageSrc: 'https://images.unsplash.com/photo-1527864550417-7fd91fc51a46?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', - imageAlt: 'Ergonomischer Laptop-Ständer aus Bambus', - href: '#', - category: 'Technik', + name: 'Smart Success Journal', + category: 'Lifestyle', + price: 49.99, + rating: 3, + reviews: 89, + image: 'https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80', + badge: 'Neu', inStock: true, + brand: 'GreenLife', + description: 'Digital verknüpftes Erfolgs-Tagebuch mit App-Integration' }, { id: 3, - name: 'Öko-Sportbekleidung Set', - price: '€149.99', - rating: 5, - reviewCount: 203, - imageSrc: 'https://images.unsplash.com/photo-1506629905607-b5f9a71351e8?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', - imageAlt: 'Nachhaltige Sportkleidung aus recycelten Materialien', - href: '#', - category: 'Kleidung', - inStock: false, + name: 'Wireless Charging Pad Pro', + category: 'Technik', + price: 79.99, + originalPrice: 99.99, + rating: 4.6, + reviews: 203, + image: 'https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80', + badge: 'Sale', + inStock: true, + brand: 'EcoTech', + description: 'Schnelles kabelloses Laden mit Solarenergie-Option' }, { id: 4, - name: 'Smart Home Energie-Monitor', - price: '€199.99', - rating: 4, - reviewCount: 156, - imageSrc: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', - imageAlt: 'Smart Home Gerät zur Energieüberwachung', - href: '#', - category: 'Technik', + name: 'Organic Green Tea Set', + category: 'Getränke', + price: 34.99, + rating: 3.1, + reviews: 67, + image: 'https://images.unsplash.com/photo-1556679343-c7306c1976bc?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80', inStock: true, + brand: 'GreenLife', + description: 'Premium Bio-Tee-Sammlung für mehr Fokus und Energie' }, { id: 5, - name: 'Bio-Hautpflege Starter-Set', - price: '€79.99', - rating: 4, - reviewCount: 92, - imageSrc: 'https://images.unsplash.com/photo-1556228578-8c89e6adf883?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', - imageAlt: 'Natürliche Hautpflege Produkte ohne Chemikalien', - href: '#', - category: 'Beauty', - inStock: true, + name: 'Sustainable Business Shirt', + category: 'Kleidung', + price: 89.99, + rating: 4.5, + reviews: 156, + image: 'https://images.unsplash.com/photo-1596755094514-f87e34085b2c?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80', + inStock: false, + brand: 'SustainableStyle', + description: 'Elegantes Businesshemd aus nachhaltiger Bio-Baumwolle' }, { id: 6, - name: 'Solarbetriebene Powerbank', - price: '€129.99', - rating: 5, - reviewCount: 78, - imageSrc: 'https://images.unsplash.com/photo-1609091839311-d5365f9ff1c5?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', - imageAlt: 'Portable Solarenergie Powerbank', - href: '#', - category: 'Technik', + name: 'Anti-Blue Light Glasses', + category: 'Lifestyle', + price: 59.99, + rating: 4.4, + reviews: 91, + image: 'https://images.unsplash.com/photo-1574258495973-f010dfbb5371?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80', inStock: true, + brand: 'EcoTech', + description: 'Stilvolle Blaulichtfilter-Brille für digitale Professionals' }, { id: 7, - name: 'Nachhaltige Trinkflasche', - price: '€25.99', - rating: 4, - reviewCount: 64, - imageSrc: 'https://images.unsplash.com/photo-1523362628745-0c100150b504?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', - imageAlt: 'Wiederverwendbare Edelstahl Trinkflasche', - href: '#', - category: 'Lifestyle', + name: 'Glow Serum Vitamin C', + category: 'Beauty', + price: 24.99, + rating: 2.8, + reviews: 234, + image: 'https://images.unsplash.com/photo-1620916566398-39f1143ab7be?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80', + badge: 'Bestseller', inStock: true, + brand: 'GreenLife', + description: 'Natürliches Vitamin C Serum für strahlende Haut' }, { id: 8, - name: 'Öko-Notizbuch Set', - price: '€19.99', - rating: 5, - reviewCount: 41, - imageSrc: 'https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', - imageAlt: 'Recyceltes Papier Notizbuch Set', - href: '#', + name: 'Productivity Planner 2025', category: 'Büro', + price: 39.99, + rating: 4.3, + reviews: 445, + image: 'https://images.unsplash.com/photo-1517842645767-c639042777db?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80', + badge: 'Bestseller', inStock: true, - }, - { - id: 9, - name: 'Bambus Handy-Halterung', - price: '€32.99', - rating: 4, - reviewCount: 24, - imageSrc: 'https://images.unsplash.com/photo-1572635196237-14b3f281503f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', - imageAlt: 'Nachhaltige Bambus Handy-Halterung', - href: '#', - category: 'Technik', - inStock: true, - }, + brand: 'SustainableStyle', + description: 'Der ultimative Planer für maximale Produktivität' + } ] -function classNames(...classes: (string | undefined | null | boolean)[]): string { - return classes.filter(Boolean).join(' ') -} - -export default function ShopPage() { +export default function StorePage() { + const [selectedCategory, setSelectedCategory] = useState('Alle Kategorien') + const [searchQuery, setSearchQuery] = useState('') + const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid') + const [showFilters, setShowFilters] = useState(false) const [favorites, setFavorites] = useState([]) - const [isLoading, setIsLoading] = useState(true) + + // Filter states + const [priceRange, setPriceRange] = useState({ min: '', max: '' }) + const [selectedRatings, setSelectedRatings] = useState([]) + const [selectedAvailability, setSelectedAvailability] = useState([]) + const [selectedBrand, setSelectedBrand] = useState('Alle Marken') + const [sortBy, setSortBy] = useState('Beliebteste') - // Load favorites from localStorage on component mount - useEffect(() => { - const savedFavorites = localStorage.getItem('shop-favorites') - if (savedFavorites) { - try { - setFavorites(JSON.parse(savedFavorites)) - } catch (error) { - console.error('Error parsing favorites from localStorage:', error) - } + // Filter products based on all criteria + const filteredProducts = sampleProducts.filter(product => { + // Search filter + const matchesSearch = product.name.toLowerCase().includes(searchQuery.toLowerCase()) || + product.description.toLowerCase().includes(searchQuery.toLowerCase()) + + // Category filter + const matchesCategory = selectedCategory === 'Alle Kategorien' || product.category === selectedCategory + + // Price filter + const minPrice = priceRange.min ? parseFloat(priceRange.min) : 0 + const maxPrice = priceRange.max ? parseFloat(priceRange.max) : Infinity + const matchesPrice = product.price >= minPrice && product.price <= maxPrice + + // Rating filter + const matchesRating = selectedRatings.length === 0 || selectedRatings.some(rating => { + if (rating === 5) return product.rating >= 4.8 + if (rating === 4) return product.rating >= 4.0 + if (rating === 3) return product.rating >= 3.0 + return false + }) + + // Availability filter + const matchesAvailability = selectedAvailability.length === 0 || selectedAvailability.some(availability => { + if (availability === 'inStock') return product.inStock + if (availability === 'preOrder') return !product.inStock + return false + }) + + // Brand filter + const matchesBrand = selectedBrand === 'Alle Marken' || product.brand === selectedBrand + + return matchesSearch && matchesCategory && matchesPrice && matchesRating && matchesAvailability && matchesBrand + }) + + // Sort products + const sortedProducts = [...filteredProducts].sort((a, b) => { + switch (sortBy) { + case 'Neueste': + return b.id - a.id // Assuming higher ID means newer + case 'Preis: Niedrig zu Hoch': + return a.price - b.price + case 'Preis: Hoch zu Niedrig': + return b.price - a.price + case 'Beliebteste': + default: + return b.rating - a.rating // Higher rating first } - setIsLoading(false) - }, []) + }) - // Save favorites to localStorage whenever favorites change - useEffect(() => { - if (!isLoading) { - localStorage.setItem('shop-favorites', JSON.stringify(favorites)) - } - }, [favorites, isLoading]) + // Reset all filters + const resetFilters = () => { + setSelectedCategory('Alle Kategorien') + setSearchQuery('') + setPriceRange({ min: '', max: '' }) + setSelectedRatings([]) + setSelectedAvailability([]) + setSelectedBrand('Alle Marken') + setSortBy('Beliebteste') + } + // Toggle favorite status const toggleFavorite = (productId: number) => { - setFavorites(prev => { - const newFavorites = prev.includes(productId) + setFavorites(prev => + prev.includes(productId) ? prev.filter(id => id !== productId) : [...prev, productId] - - // Show feedback to user - const product = products.find(p => p.id === productId) - if (product) { - if (newFavorites.includes(productId)) { - console.log(`❤️ ${product.name} zu Favoriten hinzugefügt`) - } else { - console.log(`💔 ${product.name} aus Favoriten entfernt`) - } - } - - return newFavorites - }) - } - - const addToCart = (productId: number) => { - const product = products.find(p => p.id === productId) - if (product) { - console.log(`🛒 ${product.name} zum Warenkorb hinzugefügt`) - // Hier würde die echte Add-to-Cart Logik implementiert werden - // z.B. API-Call oder Zustand-Update - } - } - - if (isLoading) { - return ( - -
-
-
-

Shop wird geladen...

-
-
- ) } return (
- {/* Header Section */} -
-
-
-
-

Profit Planet Shop

-

- Entdecke nachhaltige und innovative Produkte, die sowohl deinem Geldbeutel als auch dem Planeten helfen -

+ {/* Modern Compact Header with Background Image */} +
+ {/* Background Image with Overlay */} +
+
+
+ + {/* Header Content */} +
+
+ {/* Store Title */} +
+

+ Profit Planet Store +

+

+ Nachhaltige Produkte für deinen Erfolg +

+
+ + {/* Search & Navigation Section */} +
+ {/* Search Bar - Tailwind UI Plus Style */} +
+
+
+
+ setSearchQuery(e.target.value)} + /> +
+
+ + {/* Category Navigation - Horizontal Tabs Style */} +
+
+ +
+
+
- {/* Products Section - Tailwind UI Plus "Product Grid" */} -
-

Products

+ {/* Filters & View Options Bar */} +
+
+
+ {/* Left: Results Count & Filters */} +
+

+ {sortedProducts.length} Produkte gefunden +

+ + +
-
- {products.map((product) => ( - + {/* Right: Sort & View Options */} +
+ {/* Sort Dropdown */}
- {/* Product Image */} -
- {product.imageAlt} - - {/* Favorite Button - Now with better positioning */} - - - {/* Category Badge */} -
- - {product.category} - -
- - {/* Out of Stock Overlay */} - {!product.inStock && ( -
- - Ausverkauft - -
- )} -
- - {/* Product Info */} -
-
-

- {product.name} -

- - {/* Rating */} -
-
- {[0, 1, 2, 3, 4].map((rating) => ( -
-

({product.reviewCount})

-
-
-

{product.price}

-
- - {/* Add to Cart Button */} -
+ + {/* View Mode Toggle */} +
+ +
- - ))} +
+
+ + {/* Expandable Filters Section */} + {showFilters && ( +
+
+
+ {/* Price Range */} +
+

Preis

+
+
+ setPriceRange({...priceRange, min: e.target.value})} + className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-[#8D6B1D] sm:text-sm sm:leading-6" + /> + setPriceRange({...priceRange, max: e.target.value})} + className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-[#8D6B1D] sm:text-sm sm:leading-6" + /> +
+
+
+ + {/* Rating Filter */} +
+

Bewertung

+
+ {[ + { label: '5 Sterne', value: 5 }, + { label: '4+ Sterne', value: 4 }, + { label: '3+ Sterne', value: 3 } + ].map((rating) => ( + + ))} +
+
+ + {/* Availability */} +
+

Verfügbarkeit

+
+ + +
+
+ + {/* Brand Filter */} +
+

Marke

+
+ +
+
+
+ + {/* Filter Actions */} +
+ +
+
+
+ )} + + {/* Products Grid/List */} +
+ {sortedProducts.length === 0 ? ( +
+

Keine Produkte gefunden

+

+ Versuche andere Suchbegriffe oder Filter +

+
+ ) : ( + <> + {/* Grid View */} + {viewMode === 'grid' && ( +
+ {sortedProducts.map((product) => ( +
+ {/* Product Image - Clickable area for product page */} +
+ + {product.name} + + + {/* Badge */} + {product.badge && ( +
+ + {product.badge} + +
+ )} + + {/* Favorite Button */} + + + {/* Stock Status */} + {!product.inStock && ( +
+ + Ausverkauft + +
+ )} +
+ + {/* Product Info - Non-clickable */} +
+
+

+ + {product.name} + +

+

{product.brand}

+ + {/* Rating */} +
+
+ {[0, 1, 2, 3, 4].map((rating) => ( + rating ? 'text-yellow-400' : 'text-gray-300'} + h-3 w-3 flex-shrink-0 + `} + /> + ))} +
+

({product.reviews})

+
+
+ + {/* Price and Cart Button - Non-clickable for product page */} +
+
+

€{product.price}

+ {product.originalPrice && ( +

€{product.originalPrice}

+ )} +
+ +
+
+
+ ))} +
+ )} + + {/* List View */} + {viewMode === 'list' && ( +
+ {sortedProducts.map((product) => ( +
+ {/* Product Image */} +
+ {product.name} + {product.badge && ( +
+ + {product.badge} + +
+ )} +
+ + {/* Product Details */} +
+
+
+

{product.name}

+

{product.brand}

+

{product.description}

+ + {/* Rating */} +
+
+ {[0, 1, 2, 3, 4].map((rating) => ( + rating ? 'text-yellow-400' : 'text-gray-300'} + h-4 w-4 flex-shrink-0 + `} + /> + ))} +
+

({product.reviews} Bewertungen)

+ {!product.inStock && ( + + Ausverkauft + + )} +
+
+ + {/* Price and Actions */} +
+
+

€{product.price}

+ {product.originalPrice && ( +

€{product.originalPrice}

+ )} +
+ +
+ + + +
+
+
+
+
+ ))} +
+ )} + + )} +
)