"use client";

import { Button } from "@/components/vritti/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/vritti/card";
import { Input } from "@/components/vritti/input";
import { Label } from "@/components/vritti/label";
import { Textarea } from "@/components/vritti/textarea";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/vritti/avatar";
import { Camera } from "lucide-react";

export function AccountBasicInfo() {
  return (
    <section className="py-10">
      <div className="container mx-auto max-w-3xl px-4">
        <Card>
          <CardHeader>
            <CardTitle>Personal Information</CardTitle>
            <CardDescription>Update your personal details and profile settings.</CardDescription>
          </CardHeader>
          <CardContent>
            <form className="space-y-8" onSubmit={(e) => e.preventDefault()}>
              <div className="flex items-center gap-6">
                <div className="relative">
                  <Avatar className="h-20 w-20">
                    <AvatarImage src="/basic-img.png" />
                    <AvatarFallback>JD</AvatarFallback>
                  </Avatar>
                  <button className="bg-primary text-primary-foreground absolute -bottom-1 -right-1 flex h-7 w-7 items-center justify-center rounded-full">
                    <Camera className="h-3.5 w-3.5" />
                  </button>
                </div>
                <div>
                  <p className="font-semibold">Profile Photo</p>
                  <p className="text-muted-foreground text-sm">JPG, PNG or GIF. Max 5MB.</p>
                </div>
              </div>
              <div className="grid gap-6 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="firstName">First Name</Label>
                  <Input id="firstName" defaultValue="John" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="lastName">Last Name</Label>
                  <Input id="lastName" defaultValue="Doe" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="email">Email</Label>
                  <Input id="email" type="email" defaultValue="john@example.com" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="phone">Phone</Label>
                  <Input id="phone" defaultValue="+1 (424) 535-3523" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="title">Job Title</Label>
                  <Input id="title" defaultValue="Product Designer" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="company">Company</Label>
                  <Input id="company" defaultValue="Acme Inc." />
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="bio">Bio</Label>
                <Textarea id="bio" rows={4} placeholder="Write a short bio about yourself..." />
              </div>
              <div className="flex justify-end gap-3">
                <Button variant="outline">Cancel</Button>
                <Button>Save Changes</Button>
              </div>
            </form>
          </CardContent>
        </Card>
      </div>
    </section>
  );
}
Account Basic Info

Installation

Dependencies
