reui-blocks/blocks/settings-profile2.tsx

"use client";

import { Camera, Github, Globe, Linkedin, Twitter } from "lucide-react";
import { useState } from "react";

import { FileUpload, FileUploadTrigger } from "@/components/diceui/file-upload";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";

interface ProfileFormData {
  name: string;
  email: string;
  username: string;
  avatar?: string;
  bio?: string;
  jobTitle?: string;
  company?: string;
  location?: string;
  website?: string;
  socialLinks?: {
    twitter?: string;
    linkedin?: string;
    github?: string;
  };
}

interface SettingsProfile2Props {
  defaultValues?: Partial<ProfileFormData>;
  onSave?: (data: ProfileFormData) => void;
  className?: string;
}

const SettingsProfile2 = ({
  defaultValues = {
    name: "ژوبین چناری",
    email: "jordan.chen@email.com",
    username: "jordanchen",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar3.jpg",
    bio: "مهندس ارشد پلتفرم فروش؛ روی یکپارچه‌سازی سامانه مدیریت ارتباط با مشتری، اتوماسیون پایپ‌لاین و ابزارهای داخلی تیم تمرکز دارم.",
    jobTitle: "مهندس ارشد پلتفرم",
    company: "نوآوران داده",
    location: "تهران، ایران",
    website: "https://jordanchen.dev",
    socialLinks: {
      twitter: "jordanchen",
      linkedin: "jordanchen",
      github: "jordanchen",
    },
  },
  className,
}: SettingsProfile2Props) => {
  const [avatarFiles, setAvatarFiles] = useState<File[]>([]);

  const initials = defaultValues.name
    ?.split(" ")
    .map((n) => n[0])
    .join("")
    .toUpperCase();

  const avatarPreview =
    avatarFiles.length > 0
      ? URL.createObjectURL(avatarFiles[0])
      : defaultValues.avatar;

  return (
    <section dir="rtl" lang="fa" className="w-full py-32">
      <div className="w-full px-4 sm:px-6 lg:px-8">
        <Card className={cn("w-full", className)}>
      <CardHeader>
        <CardTitle>ویرایش پروفایل</CardTitle>
        <CardDescription>
          اطلاعاتی که همکاران در فضای کاری می‌بینند را مدیریت کنید.
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-8">
        {/* Avatar Section */}
        <FileUpload
          value={avatarFiles}
          onValueChange={setAvatarFiles}
          accept="image/*"
          maxFiles={1}
          maxSize={2 * 1024 * 1024}
        >
          <div className="flex flex-col items-center gap-4 sm:flex-row sm:items-start">
            <div className="relative">
              <Avatar className="size-24">
                <AvatarImage
                  src={avatarPreview}
                  alt={`آواتار ${defaultValues.name}`}
                  className="object-cover"
                />
                <AvatarFallback className="text-xl font-semibold">
                  {initials}
                </AvatarFallback>
              </Avatar>
              <FileUploadTrigger asChild>
                <Button
                  size="icon"
                  variant="secondary"
                  className="absolute -end-1 -bottom-1 size-8 rounded-full shadow-md"
                >
                  <Camera className="size-4" />
                </Button>
              </FileUploadTrigger>
            </div>
            <div className="space-y-1 text-center sm:text-start">
              <p className="text-sm font-medium">عکس پروفایل</p>
              <p className="text-xs text-muted-foreground">
                روی آیکون دوربین کلیک کنید تا عکس جدید بارگذاری شود.
                <br />
                توصیه: آواتار مربعی، حداقل ۴۰۰×۴۰۰ پیکسل.
              </p>
            </div>
          </div>
        </FileUpload>

        <Separator />

        {/* Personal Information */}
        <div className="space-y-4">
          <h3 className="text-sm font-medium">اطلاعات پایه</h3>
          <div className="grid gap-4 sm:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="name">نام و نام خانوادگی</Label>
              <Input id="name" defaultValue={defaultValues.name} />
            </div>
            <div className="space-y-2">
              <Label htmlFor="username">نام کاربری</Label>
              <div className="flex">
                <span className="inline-flex items-center rounded-s-md border border-e-0 bg-muted px-3 text-sm text-muted-foreground">
                  @
                </span>
                <Input
                  id="username"
                  className="rounded-s-none"
                  defaultValue={defaultValues.username}
                />
              </div>
            </div>
          </div>
          <div className="space-y-2">
            <Label htmlFor="bio">معرفی کوتاه</Label>
            <Textarea
              id="bio"
              rows={3}
              defaultValue={defaultValues.bio}
              placeholder="نقش، تیم و حوزه‌های تمرکز خود را بنویسید"
            />
          </div>
        </div>

        <Separator />

        {/* Work Information */}
        <div className="space-y-4">
          <h3 className="text-sm font-medium">موقعیت مکانی شغلی</h3>
          <div className="grid gap-4 sm:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="jobTitle">سمت</Label>
              <Input id="jobTitle" defaultValue={defaultValues.jobTitle} />
            </div>
            <div className="space-y-2">
              <Label htmlFor="company">سازمان</Label>
              <Input id="company" defaultValue={defaultValues.company} />
            </div>
          </div>
          <div className="space-y-2">
            <Label htmlFor="location">موقعیت مکانی</Label>
            <Input
              id="location"
              defaultValue={defaultValues.location}
              placeholder="شهر، کشور"
            />
          </div>
        </div>

        <Separator />

        {/* Social Links */}
        <div className="space-y-4">
          <h3 className="text-sm font-medium">لینک‌های حرفه‌ای</h3>
          <div className="space-y-3">
            <div className="flex items-center gap-3">
              <Globe className="size-5 shrink-0 text-muted-foreground" />
              <Input
                placeholder="https://yourwebsite.com"
                defaultValue={defaultValues.website}
              />
            </div>
            <div className="flex items-center gap-3">
              <Twitter className="size-5 shrink-0 text-muted-foreground" />
              <div className="flex flex-1">
                <span className="inline-flex items-center rounded-s-md border border-e-0 bg-muted px-3 text-sm text-muted-foreground">
                  x.com/
                </span>
                <Input
                  className="rounded-s-none"
                  placeholder="نام کاربری"
                  defaultValue={defaultValues.socialLinks?.twitter}
                />
              </div>
            </div>
            <div className="flex items-center gap-3">
              <Linkedin className="size-5 shrink-0 text-muted-foreground" />
              <div className="flex flex-1">
                <span className="inline-flex items-center rounded-s-md border border-e-0 bg-muted px-3 text-sm text-muted-foreground">
                  linkedin.com/in/
                </span>
                <Input
                  className="rounded-s-none"
                  placeholder="نام کاربری"
                  defaultValue={defaultValues.socialLinks?.linkedin}
                />
              </div>
            </div>
            <div className="flex items-center gap-3">
              <Github className="size-5 shrink-0 text-muted-foreground" />
              <div className="flex flex-1">
                <span className="inline-flex items-center rounded-s-md border border-e-0 bg-muted px-3 text-sm text-muted-foreground">
                  github.com/
                </span>
                <Input
                  className="rounded-s-none"
                  placeholder="نام کاربری"
                  defaultValue={defaultValues.socialLinks?.github}
                />
              </div>
            </div>
          </div>
        </div>

        <div className="flex justify-end gap-2 pt-4">
          <Button variant="outline">انصراف</Button>
          <Button>ذخیره تغییرات</Button>
        </div>
      </CardContent>
    </Card>
      </div>
    </section>
  );
};

export { SettingsProfile2 };