'use client'; import * as React from 'react'; import * as Accordion from '@radix-ui/react-accordion'; import { RiAccountBoxLine, RiAccountCircleLine, RiArrowDownSLine, RiArrowUpSLine, RiCakeLine, RiCheckLine, RiCloseLine, RiMailLine, RiMapPin2Line, RiQuillPenLine, RiSettings2Line, RiSmartphoneLine, RiSuitcaseLine, RiUser4Line, RiUserSettingsLine, } from '@remixicon/react'; import * as Badge from './components/ui/badge'; import * as Button from './components/ui/button'; import * as CompactButton from './components/ui/compact-button'; import * as Input from './components/ui/input'; import * as Label from './components/ui/label'; import * as Modal from './components/ui/modal'; type FormData = { fullName: string; phone: string; dateOfBirth: string; occupation: string; email: string; address: string; username: string; language: string; bio: string; company: string; website: string; }; function IconInfoCustom(props: React.SVGProps) { return ( ); } const InputWithIcons = ({ value, onChange, size: _size, ...props }: React.InputHTMLAttributes) => { const [isFocused, setIsFocused] = React.useState(false); const { input } = Input.inputVariants(); const { root: compactButtonRoot, icon: compactButtonIcon } = CompactButton.compactButtonVariants({ variant: 'ghost' }); const handleClear = () => { const event = { target: { name: props.name, value: '' }, } as React.ChangeEvent; onChange?.(event); }; const handleComplete = () => { console.log('Completed:', value); }; return ( setIsFocused(true)} onBlur={() => setIsFocused(false)} className={input({ size: 'small' })} /> {isFocused && ( <> )} ); }; export default function AccountSetupModal() { const [open, setOpen] = React.useState(true); const [formData, setFormData] = React.useState({ fullName: '', phone: '', dateOfBirth: '', occupation: '', email: '', address: '', username: '', language: '', bio: '', company: '', website: '', }); const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target; setFormData((prev) => ({ ...prev, [name]: value, })); }; const handlePhoneChange = (e: React.ChangeEvent) => { const value = e.target.value.replace(/\D/g, ''); const masked = value .replace(/^(\d{3})/, '($1) ') .replace(/^($\d{3}$ )(\d{3})/, '$1$2-') .replace(/(\d{4})\d+?$/, '$1') .slice(0, 14); const event = { target: { name: 'phone', value: masked }, } as React.ChangeEvent; handleInputChange(event); }; const handleDateChange = (e: React.ChangeEvent) => { const value = e.target.value.replace(/[^\d/]/g, ''); const masked = value .replace(/^(\d{2})(\d)/, '$1/$2') .replace(/^(\d{2}\/\d{2})(\d)/, '$1/$2') .slice(0, 10); const event = { target: { name: 'dateOfBirth', value: masked }, } as React.ChangeEvent; handleInputChange(event); }; const handleSubmit = () => { console.log('Form data:', formData); setOpen(false); }; return ( Open Modal {/* Required Information */}

Required Information

Provide required information.

In Progress

Full Name

Phone

Date of Birth

Occupation

Address

{/* Profile Customization */}

Profile Customization

Provide information for profile customization.

Incomplete

Username

Language

{/* Optional Information */}

Optional Information

Provide optional information.

Incomplete

Bio

Company

Website

setOpen(false)} className='flex-1' > Skip Proceed

); }