[V0_FILE]typescriptreact:file="app/wishlist/page.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Heart, Trash2, ArrowLeft } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import Link from "next/link" interface WishlistItem { id: string name: string price: string creator: string addedAt: string } export default function WishlistPage() { const [wishlistItems, setWishlistItems] = useState([]) useEffect(() => { const wishlist = JSON.parse(localStorage.getItem("wishlist") || "[]") setWishlistItems(wishlist) }, []) const removeFromWishlist = (id: string) => { const updatedWishlist = wishlistItems.filter((item) => item.id !== id) setWishlistItems(updatedWishlist) localStorage.setItem("wishlist", JSON.stringify(updatedWishlist)) } return (

{/* Header */}

Buy 6 7 R34

Wishlist {wishlistItems.length > 0 && ( {wishlistItems.length} )}

{/* Main Content */}

Back to Store

Your Wishlist

{wishlistItems.length} {wishlistItems.length === 1 ? "item" : "items"} saved for later

{wishlistItems.length === 0 ? (

Your wishlist is empty

Start adding items you love to keep track of them

) : (

{wishlistItems.map((item) => (

Visual Hidden

{item.name}

by {item.creator}

{item.price}

Added {new Date(item.addedAt).toLocaleDateString()}

))}

)}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { ShoppingCart, Heart, AlertCircle, EyeOff, Bell } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import Link from "next/link" export default function Component() { const [isInWishlist, setIsInWishlist] = useState(false) const [wishlistCount, setWishlistCount] = useState(0) const [showNotifyForm, setShowNotifyForm] = useState(false) const [email, setEmail] = useState("") const [isNotified, setIsNotified] = useState(false) useEffect(() => { // Only get wishlist count, don't auto-set item as in wishlist const wishlist = JSON.parse(localStorage.getItem("wishlist") || "[]") setWishlistCount(wishlist.length) // Remove the automatic wishlist check - user must manually add items }, []) const toggleWishlist = () => { const wishlist = JSON.parse(localStorage.getItem("wishlist") || "[]") const item = { id: "67r34", name: "The 6 7 R34", price: "$67", creator: "🏳️‍⚧️🫷Mason67✝️🎣⚾️🫸🏳️‍🌈", addedAt: new Date().toISOString(), } if (isInWishlist) { // Remove from wishlist const updatedWishlist = wishlist.filter((w: any) => w.id !== item.id) localStorage.setItem("wishlist", JSON.stringify(updatedWishlist)) setIsInWishlist(false) setWishlistCount(updatedWishlist.length) } else { // Add to wishlist wishlist.push(item) localStorage.setItem("wishlist", JSON.stringify(wishlist)) setIsInWishlist(true) setWishlistCount(wishlist.length) } } const handleNotifySubmit = (e: React.FormEvent) => { e.preventDefault() if (email) { // Store notification request const notifications = JSON.parse(localStorage.getItem("notifications") || "[]") notifications.push({ email, item: "67r34", requestedAt: new Date().toISOString(), }) localStorage.setItem("notifications", JSON.stringify(notifications)) setIsNotified(true) setShowNotifyForm(false) } } return (

{/* Header */}

Buy 6 7 R34

Wishlist {wishlistCount > 0 && ( {wishlistCount} )}

{/* Main Content */}

{/* Hidden Visual Section */}

Visual Hidden

The 6 7 R34 appearance is not shown

{[1, 2, 3, 4].map((i) => (

))}

{/* Product Details */}

SOLD OUT

The 6 7 R34

Currently unavailable for purchase.

Created by 🏳️‍⚧️🫷Mason67✝️🎣⚾️🫸🏳️‍🌈

Price $67

Limited supply

{/* Sold Out Alert */}

Currently Sold Out

The 6 7 R34 is temporarily unavailable for purchase. While 67 copies exist, none are currently being sold.

Check back later for availability updates.

{/* Action Buttons */}

{showNotifyForm ? (

Email Address setEmail(e.target.value)} className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-md text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter your email" required />

) : isNotified ? ( ) : ( )}

{/* Footer */}

) }