"use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { MapPin, Plus, Pencil, Trash2, Star } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" import { DotPattern } from "@/components/backgrounds/dot-pattern" import { stagger, staggerItem, cardHover, cardHoverTarget } from "@/lib/animations" const initialAddresses = [ { id: 1, label: "Home", name: "Alex Lee", street: "123 Main Street", city: "Springfield", state: "IL", zip: "62701", country: "United States", phone: "+1 (555) 123-4567", default: true, }, { id: 2, label: "Work", name: "Alex Lee", street: "456 Corporate Blvd, Suite 200", city: "Chicago", state: "IL", zip: "60601", country: "United States", phone: "+1 (555) 987-6543", default: false, }, { id: 3, label: "Vacation Home", name: "Alex Lee", street: "789 Beach Avenue", city: "Miami", state: "FL", zip: "33101", country: "United States", phone: "+1 (555) 456-7890", default: false, }, ] export default function AddressBook() { const [addresses, setAddresses] = useState(initialAddresses) const setDefault = (id: number) => { setAddresses((prev) => prev.map((a) => ({ ...a, default: a.id === id })) ) } const removeAddress = (id: number) => { setAddresses((prev) => prev.filter((a) => a.id !== id)) } return (

Address Book

Manage your saved addresses.

{addresses.map((addr) => (

{addr.label}

{addr.name}

{addr.street}

{addr.city}, {addr.state} {addr.zip}

{addr.country}

{addr.phone}

{addr.default ? ( Default ) : ( )}

))}

) }