Address Book 1 - Address book list with edit modes and default selection

1"use client";
2 
3import {
4  MapPin,
5  MoreVertical,
6  Pencil,
7  Plus,
8  Save,
9  Trash2,
10  X,
11} from "lucide-react";
12import { useState } from "react";
13 
14import { Badge } from "@/components/ui/badge";
15import { Button } from "@/components/ui/button";
16import { Card, CardContent } from "@/components/ui/card";
17import {
18  DropdownMenu,
19  DropdownMenuContent,
20  DropdownMenuItem,
21  DropdownMenuTrigger,
22} from "@/components/ui/dropdown-menu";
23import { Input } from "@/components/ui/input";
24import { Label } from "@/components/ui/label";
25import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
26import {
27  Select,
28  SelectContent,
29  SelectItem,
30  SelectTrigger,
31  SelectValue,
32} from "@/components/ui/select";
33import { cn } from "@/lib/utils";
34 
35interface Address {
36  id: string;
37  name: string;
38  street: string;
39  city: string;
40  state: string;
41  zip: string;
42  country: string;
43  phone: string;
44  isDefault: boolean;
45  type: "home" | "work" | "other";
46}
47 
48const DEFAULT_ADDRESSES: Address[] = [
49  {
50    id: "1",
51    name: "John Doe",
52    street: "123 Main Street, Apt 4B",
53    city: "New York",
54    state: "NY",
55    zip: "10001",
56    country: "United States",
57    phone: "(212) 555-1234",
58    isDefault: true,
59    type: "home",
60  },
61  {
62    id: "2",
63    name: "John Doe",
64    street: "456 Business Ave, Suite 100",
65    city: "New York",
66    state: "NY",
67    zip: "10018",
68    country: "United States",
69    phone: "(212) 555-5678",
70    isDefault: false,
71    type: "work",
72  },
73];
74 
75interface AddressBook1Props {
76  addresses?: Address[];
77  className?: string;
78}
79 
80const AddressBook1 = ({
81  addresses: initialAddresses = DEFAULT_ADDRESSES,
82  className,
83}: AddressBook1Props) => {
84  const [addresses, setAddresses] = useState(initialAddresses);
85  const [selectedId, setSelectedId] = useState(
86    addresses.find((a) => a.isDefault)?.id || addresses[0]?.id,
87  );
88  const [editingId, setEditingId] = useState<string | null>(null);
89  const [isAddingNew, setIsAddingNew] = useState(false);
90  const [editForm, setEditForm] = useState<Partial<Address>>({});
91 
92  const startEditing = (address: Address) => {
93    setEditingId(address.id);
94    setEditForm({ ...address });
95  };
96 
97  const cancelEditing = () => {
98    setEditingId(null);
99    setEditForm({});
100  };
101 
102  const saveEdit = () => {
103    if (
104      editingId &&
105      editForm.name &&
106      editForm.street &&
107      editForm.city &&
108      editForm.state &&
109      editForm.zip &&
110      editForm.country &&
111      editForm.phone &&
112      editForm.type
113// … truncated