/* Sklep internetowy — single-file React component - Stylowanie: TailwindCSS (użyj w projekcie PostCSS + Tailwind) - Gotowy do wklejenia do pliku np. src/App.jsx lub do komponentu w Next.js - Zawiera: lista produktów, koszyk, filtr, szybki checkout (symulacja), responsywność - Jak użyć: 1. Utwórz projekt React (vite / create-react-app / Next.js). 2. Skonfiguruj TailwindCSS (https://tailwindcss.com/docs/installation). 3. Wklej ten plik jako src/App.jsx i uruchom dev server. - Możliwości rozbudowy: podpięcie backendu (API produktów), płatności (Stripe), autoryzacja użytkowników, CMS dla produktów. */ import React, { useState, useMemo } from "react"; // Przykładowe dane produktów const SAMPLE_PRODUCTS = [ { id: "p1", title: "Klasyczny T-shirt", price: 59.0, image: "https://images.unsplash.com/photo-1512436991641-6745cdb1723f?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&s=0a3f6d7c0c2b9b9d3ea1e7f9b6f6b9a6", tag: "ubrania", description: "Wygodny bawełniany t-shirt — idealny na co dzień.", }, { id: "p2", title: "Słuchawki Bluetooth", price: 299.0, image: "https://images.unsplash.com/photo-1518441902117-1d0a3b0f6c5f?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&s=2bfa8cd6b1c2a4f9c9c9f6b7e8a1d2c3", tag: "elektronika", description: "Bezprzewodowe słuchawki z ANC i długim czasem pracy baterii.", }, { id: "p3", title: "Kubek ceramiczny", price: 39.0, image: "https://images.unsplash.com/photo-1517685352821-92cf88aee5a5?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&s=8b3e2a3b6f5e9b1a9f1d2c3b4a5e6f7a", tag: "dom", description: "Elegancki kubek do kawy, pojemność 350 ml.", }, { id: "p4", title: "Plecak miejski", price: 199.0, image: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&s=4b2f6b1a0b2c3d4e5f6a7b8c9d0e1f2a", tag: "akcesoria", description: "Plecak z oddychającym tyłem i przegrodą na laptopa.", }, ]; export default function ShopApp() { const [products] = useState(SAMPLE_PRODUCTS); const [query, setQuery] = useState(""); const [tagFilter, setTagFilter] = useState("wszystko"); const [cart, setCart] = useState({}); const [showCheckout, setShowCheckout] = useState(false); const [buyer, setBuyer] = useState({ name: "", email: "" }); const tags = useMemo(() => ["wszystko", ...Array.from(new Set(products.map((p) => p.tag)))], [products]); const filtered = products.filter((p) => { const matchesQuery = p.title.toLowerCase().includes(query.toLowerCase()) || p.description.toLowerCase().includes(query.toLowerCase()); const matchesTag = tagFilter === "wszystko" ? true : p.tag === tagFilter; return matchesQuery && matchesTag; }); const addToCart = (product, qty = 1) => { setCart((prev) => { const current = prev[product.id] || { ...product, qty: 0 }; return { ...prev, [product.id]: { ...current, qty: current.qty + qty } }; }); }; const removeFromCart = (id) => { setCart((prev) => { const copy = { ...prev }; delete copy[id]; return copy; }); }; const changeQty = (id, qty) => { setCart((prev) => ({ ...prev, [id]: { ...prev[id], qty: Math.max(1, qty) } })); }; const subtotal = Object.values(cart).reduce((s, it) => s + it.price * it.qty, 0); const shipping = subtotal > 0 ? 15 : 0; const total = subtotal + shipping; const handleCheckout = () => { // Symulacja checkoutu — w prawdziwej implementacji tu wywołasz API płatności if (!buyer.email || !buyer.name) { alert("Podaj imię i e‑mail, aby sfinalizować zamówienie."); return; } setShowCheckout(true); }; const placeOrder = () => { // tu normalnie: wyślij zamówienie do backendu, zainicjuj płatność const order = { id: `order_${Date.now()}`, buyer, items: Object.values(cart), subtotal, shipping, total, createdAt: new Date().toISOString(), }; console.log("Zamówienie (symulacja):", order); alert("Dziękujemy! Twoje zamówienie zostało przyjęte (symulacja)."); setCart({}); setShowCheckout(false); setBuyer({ name: "", email: "" }); }; return (

Mój Sklep

Przykładowy sklep — gotowy do rozbudowy

setQuery(e.target.value)} placeholder="Szukaj produktów..." className="border rounded-md px-3 py-2 w-48 md:w-64 focus:outline-none focus:ring-2" />

{/* Sidebar */} {/* Product grid */}

{filtered.map((p)=> (

{p.title}

{p.description}

{p.price.toFixed(2)} zł

Brutto (przykład)

))} {filtered.length===0 && (

Brak produktów spełniających kryteria.

)}

{/* Cart drawer (prosty) */}

Twój koszyk

{Object.values(cart).length===0 ? (

Koszyk jest pusty.

) : (

{Object.values(cart).map((it)=> (

{it.title}

{it.price.toFixed(2)} zł

changeQty(it.id, Number(e.target.value))} className="w-16 border rounded-md px-2 py-1" />

))}

Podsumowanie{subtotal.toFixed(2)} zł

Wysyłka{shipping.toFixed(2)} zł

Razem{total.toFixed(2)} zł

setBuyer({...buyer, name: e.target.value})} className="w-full border rounded-md px-3 py-2" /> setBuyer({...buyer, email: e.target.value})} className="w-full border rounded-md px-3 py-2" />

)}

Symulacja: brak rzeczywistych płatności.

{/* Modal checkout */} {showCheckout && (

Potwierdź zamówienie

{Object.values(cart).map((it)=> (

{it.title} × {it.qty}

{(it.price*it.qty).toFixed(2)} zł

))}

Razem: {total.toFixed(2)} zł

)}

); }

roster9store