@@ -237,6 +175,7 @@ function App() {
item={item}
onIncrement={() => updateQuantity(item.product.id, (qty) => qty + 1)}
onDecrement={() => updateQuantity(item.product.id, (qty) => qty - 1)}
+ onRemove={() => updateQuantity(item.product.id, () => 0)}
/>
))}
@@ -261,6 +200,14 @@ function App() {
)}
+ {children}
+
+ )
+}
+
+function HomePage() {
+ return (
+ <>
New season edit
@@ -269,9 +216,9 @@ function App() {
Curated furniture, lighting, and objects crafted in small batches and ready to ship.
-
+
Shop the collection
-
+
+
+ )
+}
+
+function App() {
+ const [cart, setCart] = useState
>({})
+ const [isCartOpen, setIsCartOpen] = useState(false)
+ const [highlightedProduct, setHighlightedProduct] = useState<{
+ id: string
+ token: number
+ } | null>(null)
+ const highlightTimeoutRef = useRef(null)
+ const highlightSequenceRef = useRef(0)
+
+ const cartItems = useMemo(() => {
+ return Object.entries(cart)
+ .map(([productId, quantity]) => {
+ const product = productDictionary[productId]
+ if (!product) return null
+ return { product, quantity }
+ })
+ .filter(Boolean) as CartLineItem[]
+ }, [cart])
+
+ const cartCount = useMemo(
+ () => cartItems.reduce((total, item) => total + item.quantity, 0),
+ [cartItems],
+ )
+ const subtotal = useMemo(
+ () => cartItems.reduce((total, item) => total + item.product.price * item.quantity, 0),
+ [cartItems],
+ )
+ const shipping = subtotal === 0 || subtotal >= freeShippingThreshold ? 0 : flatShippingRate
+ const total = subtotal + shipping
+ const freeShippingMessage =
+ subtotal === 0
+ ? 'Start building your bag to unlock complimentary delivery.'
+ : shipping === 0
+ ? 'Shipping is on us today.'
+ : `Add ${currency.format(freeShippingThreshold - subtotal)} more for free express delivery.`
+
+ const updateQuantity = (productId: string, updater: (current: number) => number) => {
+ setCart((current) => {
+ const nextQuantity = updater(current[productId] ?? 0)
+ if (nextQuantity <= 0) {
+ const rest = { ...current }
+ delete rest[productId]
+ return rest
+ }
+ return { ...current, [productId]: nextQuantity }
+ })
+ }
+
+ const addToCart = (productId: string) => {
+ updateQuantity(productId, (current) => current + 1)
+
+ // Clear any existing timeout
+ if (highlightTimeoutRef.current) {
+ clearTimeout(highlightTimeoutRef.current)
+ highlightTimeoutRef.current = null
+ }
+
+ // If this product is already highlighted, briefly remove the highlight to restart the animation
+ if (highlightedProduct?.id === productId) {
+ setHighlightedProduct(null)
+ // Use setTimeout with 0ms to ensure the state update is processed before re-adding
+ setTimeout(() => {
+ const token = ++highlightSequenceRef.current
+ setHighlightedProduct({ id: productId, token })
+ highlightTimeoutRef.current = window.setTimeout(() => {
+ setHighlightedProduct((currentHighlight) =>
+ currentHighlight?.token === token ? null : currentHighlight,
+ )
+ }, 1200)
+ }, 0)
+ } else {
+ // First time highlighting this product
+ const token = ++highlightSequenceRef.current
+ setHighlightedProduct({ id: productId, token })
+ highlightTimeoutRef.current = window.setTimeout(() => {
+ setHighlightedProduct((currentHighlight) =>
+ currentHighlight?.token === token ? null : currentHighlight,
+ )
+ }, 1200)
+ }
+ }
+
+ useEffect(() => {
+ return () => {
+ if (highlightTimeoutRef.current) {
+ clearTimeout(highlightTimeoutRef.current)
+ }
+ }
+ }, [])
+
+ const toggleCart = () => setIsCartOpen((open) => !open)
+
+ const isHighlighted = (productId: string) => highlightedProduct?.id === productId
+
+ return (
+
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
)
}
diff --git a/src/ProductCard.tsx b/src/ProductCard.tsx
new file mode 100644
index 0000000..37b0eec
--- /dev/null
+++ b/src/ProductCard.tsx
@@ -0,0 +1,99 @@
+import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import './App.css'
+import { type Product } from './data/products'
+import { getAverageRating } from './utils/reviews'
+
+const currency = new Intl.NumberFormat('en-US', {
+ style: 'currency',
+ currency: 'USD',
+})
+
+type ProductCardProps = {
+ product: Product
+ onAdd: () => void
+ isHighlighted: boolean
+}
+
+export default function ProductCard({ product, onAdd, isHighlighted }: ProductCardProps) {
+ const [averageRating, setAverageRating] = useState(null)
+
+ useEffect(() => {
+ const loadRating = () => {
+ const rating = getAverageRating(product.id)
+ setAverageRating(rating)
+ }
+ loadRating()
+
+ const handleReviewAdded = () => {
+ const newRating = getAverageRating(product.id)
+ setAverageRating(newRating)
+ }
+
+ window.addEventListener('reviewAdded', handleReviewAdded)
+ return () => {
+ window.removeEventListener('reviewAdded', handleReviewAdded)
+ }
+ }, [product.id])
+
+ const handleAddClick = (e: React.MouseEvent) => {
+ e.preventDefault()
+ e.stopPropagation()
+ onAdd()
+ }
+
+ return (
+
+
+
+ {product.badge &&
{product.badge}}
+
+
{product.category}
+
{product.name}
+
{product.description}
+
+ {currency.format(product.price)}
+ {averageRating !== null && (
+ ★ {averageRating.toFixed(1)}
+ )}
+
+
+ {product.colors.map((color) => (
+ {color}
+ ))}
+
+
+
+
+
+
Product not found
+
Sorry, we couldn't find the product you're looking for.
+
+ Back to shop
+
+
+
+
+
+
+ ← Back to products
+
+
+
+
+
+ {product.badge &&
{product.badge}}
+
+
+
+
{product.category}
+
{product.name}
+
{product.description}
+
+
+ {currency.format(product.price)}
+ {averageRating !== null && (
+ ★ {averageRating.toFixed(1)}
+ )}
+
+
+
+
Available colors:
+
+ {product.colors.map((color) => (
+
+ ))}
+
+
+
+
+
+
+
Product details
+
+ - Premium materials and craftsmanship
+ - 30-day return policy
+ - Complimentary shipping on orders over $150
+ - Design consultation available
+
+
+
+
+
+
+
+
+
+ ← Back to home
+
+
+
+
Featured pieces
+
Crafted to layer beautifully
+
+ Mix tactile fabrics, natural woods, and sculptural silhouettes for your signature look.
+
+
+ {products.map((product) => (
+
addToCart(product.id)}
+ isHighlighted={isHighlighted(product.id)}
+ />
+ ))}
+
+
+ {[1, 2, 3, 4, 5].map((value) => (
+
+ ))}
+
+ )
+}
+
+type ReviewsProps = {
+ productId: string
+}
+
+function generateCaptcha() {
+ const num1 = Math.floor(Math.random() * 10) + 1
+ const num2 = Math.floor(Math.random() * 10) + 1
+ return { question: `${num1} + ${num2}`, answer: num1 + num2 }
+}
+
+export default function Reviews({ productId }: ReviewsProps) {
+ const [reviews, setReviews] = useState([])
+ const [name, setName] = useState('')
+ const [text, setText] = useState('')
+ const [rating, setRating] = useState(0)
+ const [captcha, setCaptcha] = useState(generateCaptcha())
+ const [captchaAnswer, setCaptchaAnswer] = useState('')
+ const [error, setError] = useState('')
+ const [isSubmitting, setIsSubmitting] = useState(false)
+
+ useEffect(() => {
+ const loadReviews = () => {
+ const stored = localStorage.getItem(`reviews-${productId}`)
+ if (stored) {
+ try {
+ const parsed = JSON.parse(stored) as Review[]
+ // Filter out old reviews without ratings
+ const validReviews = parsed.filter((review) => review.rating && review.rating > 0)
+ setReviews(validReviews)
+ // Update localStorage to remove old reviews
+ if (validReviews.length !== parsed.length) {
+ localStorage.setItem(`reviews-${productId}`, JSON.stringify(validReviews))
+ }
+ } catch {
+ // Invalid JSON, ignore
+ }
+ }
+ }
+ loadReviews()
+ }, [productId])
+
+ const handleSubmit = (e: React.FormEvent) => {
+ e.preventDefault()
+ setError('')
+
+ if (!name.trim()) {
+ setError('Please enter your name')
+ return
+ }
+
+ if (!text.trim()) {
+ setError('Please enter your review')
+ return
+ }
+
+ if (rating === 0) {
+ setError('Please select a rating')
+ return
+ }
+
+ const answer = parseInt(captchaAnswer, 10)
+ if (isNaN(answer) || answer !== captcha.answer) {
+ setError('Incorrect captcha answer. Please try again.')
+ setCaptcha(generateCaptcha())
+ setCaptchaAnswer('')
+ return
+ }
+
+ setIsSubmitting(true)
+
+ // Simulate a brief delay for better UX
+ setTimeout(() => {
+ const newReview: Review = {
+ id: Date.now().toString(),
+ productId,
+ name: name.trim(),
+ text: text.trim(),
+ rating,
+ date: new Date().toISOString(),
+ }
+
+ const updatedReviews = [newReview, ...reviews]
+ setReviews(updatedReviews)
+ localStorage.setItem(`reviews-${productId}`, JSON.stringify(updatedReviews))
+
+ // Dispatch custom event to notify other components
+ window.dispatchEvent(new CustomEvent('reviewAdded', { detail: { productId } }))
+
+ // Reset form
+ setName('')
+ setText('')
+ setRating(0)
+ setCaptchaAnswer('')
+ setCaptcha(generateCaptcha())
+ setIsSubmitting(false)
+ setError('')
+ }, 300)
+ }
+
+ const formatDate = (dateString: string) => {
+ const date = new Date(dateString)
+ return date.toLocaleDateString('en-US', {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric',
+ })
+ }
+
+ return (
+
+ Customer Reviews
+
+ {reviews.length > 0 && (
+
+ {reviews.map((review) => (
+
+
+
+
+
{review.text}
+
+ ))}
+