wehub-resource-sync
34 lines
13 KiB
JSON
34 lines
13 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "account-basic-info-01",
|
|
"description": "Personal information management form",
|
|
"dependencies": [
|
|
"date-fns"
|
|
],
|
|
"registryDependencies": [
|
|
"button",
|
|
"card",
|
|
"input",
|
|
"label",
|
|
"select",
|
|
"calendar",
|
|
"popover"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "creative-tim/blocks/account-basic-info-01/page.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport {\n Briefcase,\n CalendarIcon,\n Globe,\n GraduationCap,\n Mail,\n MapPin,\n Phone,\n User,\n} from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport { Card } from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\n\nexport default function AccountBasicInfo01() {\n const [birthDate, setBirthDate] = React.useState<Date>()\n\n return (\n <div className=\"mx-auto max-w-5xl p-6\">\n <Card className=\"bg-card border p-8\">\n <div className=\"border-b pb-6\">\n <h2 className=\"text-2xl font-semibold tracking-tight\">\n Personal Information\n </h2>\n <p className=\"text-muted-foreground mt-2 text-sm\">\n Manage your personal details and profile information. This\n information will be visible to other users on the platform.\n </p>\n </div>\n\n <form className=\"space-y-8\">\n {/* Basic Details Section */}\n <div className=\"space-y-6\">\n <div>\n <h3 className=\"mb-4 text-sm font-medium\">Basic Details</h3>\n <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n <div className=\"space-y-2\">\n <Label\n htmlFor=\"firstName\"\n className=\"flex items-center gap-2\"\n >\n <User className=\"text-muted-foreground h-4 w-4\" />\n First Name\n </Label>\n <Input\n id=\"firstName\"\n placeholder=\"Emma\"\n defaultValue=\"Emma\"\n />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"lastName\" className=\"flex items-center gap-2\">\n <User className=\"text-muted-foreground h-4 w-4\" />\n Last Name\n </Label>\n <Input\n id=\"lastName\"\n placeholder=\"Roberts\"\n defaultValue=\"Roberts\"\n />\n </div>\n </div>\n </div>\n\n {/* Professional Information */}\n <div>\n <h3 className=\"mb-4 text-sm font-medium\">\n Professional Information\n </h3>\n <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"gender\" className=\"flex items-center gap-2\">\n <User className=\"text-muted-foreground h-4 w-4\" />\n Gender\n </Label>\n <Select defaultValue=\"female\">\n <SelectTrigger id=\"gender\">\n <SelectValue placeholder=\"Select Gender\" />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"male\">Male</SelectItem>\n <SelectItem value=\"female\">Female</SelectItem>\n <SelectItem value=\"other\">Other</SelectItem>\n <SelectItem value=\"prefer-not-to-say\">\n Prefer not to say\n </SelectItem>\n </SelectContent>\n </Select>\n </div>\n\n <div className=\"space-y-2\">\n <Label className=\"flex items-center gap-2\">\n <CalendarIcon className=\"text-muted-foreground h-4 w-4\" />\n Birth Date\n </Label>\n <Popover>\n <PopoverTrigger asChild>\n <Button\n variant=\"outline\"\n className=\"w-full justify-start text-left font-normal\"\n >\n <CalendarIcon className=\"mr-2 h-4 w-4\" />\n {birthDate ? format(birthDate, \"PPP\") : \"Select a date\"}\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"w-auto p-0\" align=\"start\">\n <Calendar\n mode=\"single\"\n selected={birthDate}\n onSelect={setBirthDate}\n initialFocus\n />\n </PopoverContent>\n </Popover>\n </div>\n\n <div className=\"space-y-2\">\n <Label\n htmlFor=\"profession\"\n className=\"flex items-center gap-2\"\n >\n <Briefcase className=\"text-muted-foreground h-4 w-4\" />\n Profession\n </Label>\n <Select defaultValue=\"ui-ux\">\n <SelectTrigger id=\"profession\">\n <SelectValue placeholder=\"Select Profession\" />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"ui-ux\">UI/UX Designer</SelectItem>\n <SelectItem value=\"frontend\">\n Frontend Developer\n </SelectItem>\n <SelectItem value=\"backend\">Backend Developer</SelectItem>\n <SelectItem value=\"fullstack\">\n Fullstack Developer\n </SelectItem>\n <SelectItem value=\"product-manager\">\n Product Manager\n </SelectItem>\n <SelectItem value=\"data-scientist\">\n Data Scientist\n </SelectItem>\n </SelectContent>\n </Select>\n </div>\n\n <div className=\"space-y-2\">\n <Label\n htmlFor=\"education\"\n className=\"flex items-center gap-2\"\n >\n <GraduationCap className=\"text-muted-foreground h-4 w-4\" />\n Education\n </Label>\n <Select defaultValue=\"university\">\n <SelectTrigger id=\"education\">\n <SelectValue placeholder=\"Select Level\" />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"high-school\">High School</SelectItem>\n <SelectItem value=\"college\">College</SelectItem>\n <SelectItem value=\"university\">University</SelectItem>\n <SelectItem value=\"masters\">\n Master's Degree\n </SelectItem>\n <SelectItem value=\"phd\">Ph.D.</SelectItem>\n </SelectContent>\n </Select>\n </div>\n </div>\n </div>\n\n {/* Contact Information */}\n <div>\n <h3 className=\"mb-4 text-sm font-medium\">Contact Information</h3>\n <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"email\" className=\"flex items-center gap-2\">\n <Mail className=\"text-muted-foreground h-4 w-4\" />\n Email Address\n </Label>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"emma@mail.com\"\n defaultValue=\"emma@mail.com\"\n />\n </div>\n <div className=\"space-y-2\">\n <Label\n htmlFor=\"confirmEmail\"\n className=\"flex items-center gap-2\"\n >\n <Mail className=\"text-muted-foreground h-4 w-4\" />\n Confirm Email\n </Label>\n <Input\n id=\"confirmEmail\"\n type=\"email\"\n placeholder=\"emma@mail.com\"\n defaultValue=\"emma@mail.com\"\n />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"phone\" className=\"flex items-center gap-2\">\n <Phone className=\"text-muted-foreground h-4 w-4\" />\n Phone Number\n </Label>\n <Input\n id=\"phone\"\n placeholder=\"+1 (555) 123-4567\"\n defaultValue=\"+1 (555) 123-4567\"\n />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"location\" className=\"flex items-center gap-2\">\n <MapPin className=\"text-muted-foreground h-4 w-4\" />\n Location\n </Label>\n <Input\n id=\"location\"\n placeholder=\"City, Country\"\n defaultValue=\"Florida, USA\"\n />\n </div>\n </div>\n </div>\n\n {/* Additional Information */}\n <div>\n <h3 className=\"mb-4 text-sm font-medium\">\n Additional Information\n </h3>\n <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"language\" className=\"flex items-center gap-2\">\n <Globe className=\"text-muted-foreground h-4 w-4\" />\n Preferred Language\n </Label>\n <Select defaultValue=\"english\">\n <SelectTrigger id=\"language\">\n <SelectValue placeholder=\"Select Language\" />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"english\">English</SelectItem>\n <SelectItem value=\"spanish\">Spanish</SelectItem>\n <SelectItem value=\"french\">French</SelectItem>\n <SelectItem value=\"german\">German</SelectItem>\n <SelectItem value=\"chinese\">Chinese</SelectItem>\n </SelectContent>\n </Select>\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"timezone\" className=\"flex items-center gap-2\">\n <Globe className=\"text-muted-foreground h-4 w-4\" />\n Timezone\n </Label>\n <Select defaultValue=\"est\">\n <SelectTrigger id=\"timezone\">\n <SelectValue placeholder=\"Select Timezone\" />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"est\">Eastern Time (ET)</SelectItem>\n <SelectItem value=\"cst\">Central Time (CT)</SelectItem>\n <SelectItem value=\"mst\">Mountain Time (MT)</SelectItem>\n <SelectItem value=\"pst\">Pacific Time (PT)</SelectItem>\n <SelectItem value=\"utc\">UTC</SelectItem>\n </SelectContent>\n </Select>\n </div>\n </div>\n </div>\n </div>\n\n <div className=\"flex justify-end gap-3 border-t pt-6\">\n <Button type=\"button\" variant=\"outline\">\n Cancel\n </Button>\n <Button type=\"submit\">Save Changes</Button>\n </div>\n </form>\n </Card>\n </div>\n )\n}\n",
|
|
"type": "registry:page",
|
|
"target": "app/account-basic-info/page.tsx"
|
|
}
|
|
],
|
|
"meta": {
|
|
"iframeHeight": "1000px",
|
|
"container": "w-full bg-surface min-h-svh flex px-4 py-12 items-center md:py-20 justify-center min-w-0",
|
|
"mobile": "component"
|
|
},
|
|
"categories": [
|
|
"account"
|
|
],
|
|
"type": "registry:block"
|
|
} |