Design adrress component in Profile

[dwip708]

This is what it currently looks like.

Implement the address component. Unlike personal Information, no need to take all state variables and functions as props. Simply take a dummy data in your component and local state variables and functions and implement just like Personal Information page.

[aniruddhaadak80]

I am working on this . Please assign this to me @dwip708 .

[aniruddhaadak80]

`import React, { useState } from 'react'; import { Card, CardContent } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Pencil, Plus, Save, X } from 'lucide-react';

const AddressComponent = () => { // Dummy initial addresses data const initialAddresses = [ { id: 1, type: 'Home', street: '123 Main St', city: 'San Francisco', state: 'CA', zipCode: '94105', isDefault: true }, { id: 2, type: 'Work', street: '456 Market St', city: 'San Francisco', state: 'CA', zipCode: '94103', isDefault: false } ];

const [addresses, setAddresses] = useState(initialAddresses); const [editingId, setEditingId] = useState(null); const [isAdding, setIsAdding] = useState(false); const [newAddress, setNewAddress] = useState({ type: '', street: '', city: '', state: '', zipCode: '', isDefault: false });

const handleEdit = (id) => { setEditingId(id); setIsAdding(false); };

const handleSave = (id) => { setEditingId(null); };

const handleCancel = () => { setEditingId(null); setIsAdding(false); setNewAddress({ type: '', street: '', city: '', state: '', zipCode: '', isDefault: false }); };

const handleAdd = () => { setIsAdding(true); setEditingId(null); };

const handleAddSave = () => { setAddresses([ ...addresses, { ...newAddress, id: addresses.length + 1 } ]); setIsAdding(false); setNewAddress({ type: '', street: '', city: '', state: '', zipCode: '', isDefault: false }); };

const handleInputChange = (id, field, value) => { if (id === 'new') { setNewAddress({ ...newAddress,

  });
} else {
  setAddresses(addresses.map(addr =>
    addr.id === id ? { ...addr, [field]: value } : addr
  ));
}

};

return (

Addresses

{!isAdding && ( Add Address )}

{addresses.map((address) => (

{editingId === address.id ? ( <> handleInputChange(address.id, 'type', e.target.value)} className="mb-2" placeholder="Address Type" /> handleInputChange(address.id, 'street', e.target.value)} className="mb-2" placeholder="Street Address" />

handleInputChange(address.id, 'city', e.target.value)} placeholder="City" /> handleInputChange(address.id, 'state', e.target.value)} placeholder="State" />

handleInputChange(address.id, 'zipCode', e.target.value)} className="mt-2" placeholder="ZIP Code" /> ) : ( <>

{address.type} {address.isDefault && ( Default )}

{address.street}

{address.city}, {address.state} {address.zipCode}

)}

{editingId === address.id ? ( <> handleSave(address.id)} className="flex items-center gap-1" > ) : ( handleEdit(address.id)} className="flex items-center gap-1" > )}

))} {isAdding && (

handleInputChange('new', 'type', e.target.value)} placeholder="Address Type (e.g., Home, Work)" className="mb-2" /> handleInputChange('new', 'street', e.target.value)} placeholder="Street Address" className="mb-2" />

handleInputChange('new', 'city', e.target.value)} placeholder="City" /> handleInputChange('new', 'state', e.target.value)} placeholder="State" />

handleInputChange('new', 'zipCode', e.target.value)} placeholder="ZIP Code" className="mt-2" />

Save Cancel

)}

); }; export default AddressComponent;` This is the code for address.js file . Where to add it , guide me please @dwip708

[dwip708]

@aniruddhaadak80

Create a Address.js component in the folder ProfileComponents inside components. Attach the code there. Finally render the component in Profile.js.

Also attach a screenshot of the page with the PR.