wip

components/header.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { GitBranch, Plus, LogOut, User, ChevronDown } from "lucide-react";
+import { GitBranch, Plus, LogOut, User, ChevronDown, Settings } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
@@ -70,6 +70,12 @@ export function Header() {
                       Your profile
                     </Link>
                   </DropdownMenuItem>
+                  <DropdownMenuItem asChild>
+                    <Link href="/settings" className="cursor-pointer gap-2">
+                      <Settings className="h-4 w-4" />
+                      Settings
+                    </Link>
+                  </DropdownMenuItem>
                   <DropdownMenuSeparator />
                   <DropdownMenuItem onClick={handleSignOut} className="cursor-pointer gap-2 text-destructive focus:text-destructive focus:bg-destructive/10">
                     <LogOut className="h-4 w-4" />

components/icons.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+export function XIcon({ className }: { className?: string }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" className={className}>
+      <path
+        className="fill-current"
+        d="M357.2 48L427.8 48 273.6 224.2 455 464 313 464 201.7 318.6 74.5 464 3.8 464 168.7 275.5-5.2 48 140.4 48 240.9 180.9 357.2 48zM332.4 421.8l39.1 0-252.4-333.8-42 0 255.3 333.8z"
+      />
+    </svg>
+  );
+}
+
+export function GithubIcon({ className }: { className?: string }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" className={className}>
+      <path
+        className="fill-current"
+        d="M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM252.8 8c-138.7 0-244.8 105.3-244.8 244 0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1 100-33.2 167.8-128.1 167.8-239 0-138.7-112.5-244-251.2-244zM105.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+      />
+    </svg>
+  );
+}
+
+export function LinkedInIcon({ className }: { className?: string }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" className={className}>
+      <path
+        className="fill-current"
+        d="M416 32L31.9 32C14.3 32 0 46.5 0 64.3L0 447.7C0 465.5 14.3 480 31.9 480L416 480c17.6 0 32-14.5 32-32.3l0-383.4C448 46.5 433.6 32 416 32zM135.4 416l-66.4 0 0-213.8 66.5 0 0 213.8-.1 0zM102.2 96a38.5 38.5 0 1 1 0 77 38.5 38.5 0 1 1 0-77zM384.3 416l-66.4 0 0-104c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9l0 105.8-66.4 0 0-213.8 63.7 0 0 29.2 .9 0c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9l0 117.2z"
+      />
+    </svg>
+  );
+}

components/settings/avatar-upload.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { useState, useRef } from "react";
+import { Button } from "@/components/ui/button";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { updateAvatar } from "@/actions/settings";
+import { Camera, Loader2 } from "lucide-react";
+
+interface AvatarUploadProps {
+  currentAvatar?: string | null;
+  name: string;
+}
+
+export function AvatarUpload({ currentAvatar, name }: AvatarUploadProps) {
+  const [loading, setLoading] = useState(false);
+  const [preview, setPreview] = useState<string | null>(currentAvatar || null);
+  const [error, setError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  async function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (!file.type.startsWith("image/")) {
+      setError("Please select an image file");
+      return;
+    }
+
+    if (file.size > 5 * 1024 * 1024) {
+      setError("Image must be less than 5MB");
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      setPreview(e.target?.result as string);
+    };
+    reader.readAsDataURL(file);
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const formData = new FormData();
+      formData.append("avatar", file);
+      const result = await updateAvatar(formData);
+      setPreview(result.avatarUrl);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to upload avatar");
+      setPreview(currentAvatar || null);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="flex items-start gap-6">
+      <div className="relative">
+        <Avatar className="w-24 h-24">
+          <AvatarImage src={preview || undefined} alt={name} />
+          <AvatarFallback className="text-2xl bg-accent">{name.charAt(0).toUpperCase()}</AvatarFallback>
+        </Avatar>
+        {loading && (
+          <div className="absolute inset-0 bg-background/80 rounded-full flex items-center justify-center">
+            <Loader2 className="w-6 h-6 animate-spin" />
+          </div>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <input ref={fileInputRef} type="file" accept="image/*" onChange={handleFileChange} className="hidden" />
+        <Button type="button" variant="outline" size="sm" onClick={() => fileInputRef.current?.click()} disabled={loading}>
+          <Camera className="w-4 h-4 mr-2" />
+          Change Avatar
+        </Button>
+        <p className="text-xs text-muted-foreground">JPG, PNG or GIF. Max 5MB.</p>
+        {error && <p className="text-xs text-red-500">{error}</p>}
+      </div>
+    </div>
+  );
+}

components/settings/delete-account.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { deleteAccount } from "@/actions/settings";
+import { Loader2, AlertTriangle } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+interface DeleteAccountProps {
+  username: string;
+}
+
+export function DeleteAccount({ username }: DeleteAccountProps) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [confirmation, setConfirmation] = useState("");
+  const [showConfirm, setShowConfirm] = useState(false);
+  const router = useRouter();
+
+  async function handleDelete() {
+    if (confirmation !== username) {
+      setError("Please type your username to confirm");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      await deleteAccount();
+      router.push("/");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to delete account");
+      setLoading(false);
+    }
+  }
+
+  if (!showConfirm) {
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-muted-foreground">
+          Once you delete your account, there is no going back. All your repositories and data will be permanently deleted.
+        </p>
+        <Button
+          variant="destructive"
+          onClick={() => setShowConfirm(true)}
+        >
+          Delete Account
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-start gap-3 p-4 bg-red-500/10 border border-red-500/20 rounded-md">
+        <AlertTriangle className="w-5 h-5 text-red-500 shrink-0 mt-0.5" />
+        <div className="space-y-2">
+          <p className="text-sm font-medium text-red-500">
+            This action cannot be undone
+          </p>
+          <p className="text-sm text-muted-foreground">
+            This will permanently delete your account, all repositories, and remove all your data from our servers.
+          </p>
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="confirm">
+          Type <span className="font-mono font-semibold">{username}</span> to confirm
+        </Label>
+        <Input
+          id="confirm"
+          value={confirmation}
+          onChange={(e) => setConfirmation(e.target.value)}
+          placeholder="Enter your username"
+        />
+      </div>
+
+      {error && (
+        <div className="text-sm text-red-500 bg-red-500/10 border border-red-500/20 rounded-md px-3 py-2">
+          {error}
+        </div>
+      )}
+
+      <div className="flex gap-2">
+        <Button
+          variant="outline"
+          onClick={() => {
+            setShowConfirm(false);
+            setConfirmation("");
+            setError(null);
+          }}
+          disabled={loading}
+        >
+          Cancel
+        </Button>
+        <Button
+          variant="destructive"
+          onClick={handleDelete}
+          disabled={loading || confirmation !== username}
+        >
+          {loading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+          Delete My Account
+        </Button>
+      </div>
+    </div>
+  );
+}
+

components/settings/email-form.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { updateEmail } from "@/actions/settings";
+import { Loader2 } from "lucide-react";
+
+interface EmailFormProps {
+  currentEmail: string;
+}
+
+export function EmailForm({ currentEmail }: EmailFormProps) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    setSuccess(false);
+
+    const formData = new FormData(e.currentTarget);
+    const email = formData.get("email") as string;
+
+    if (email === currentEmail) {
+      setError("New email is the same as current email");
+      setLoading(false);
+      return;
+    }
+
+    try {
+      await updateEmail({ email });
+      setSuccess(true);
+      setTimeout(() => setSuccess(false), 3000);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to update email");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="email">Email Address</Label>
+        <Input
+          id="email"
+          name="email"
+          type="email"
+          defaultValue={currentEmail}
+          required
+        />
+        <p className="text-xs text-muted-foreground">
+          Your email is used for account notifications and git authentication
+        </p>
+      </div>
+
+      {error && (
+        <div className="text-sm text-red-500 bg-red-500/10 border border-red-500/20 rounded-md px-3 py-2">
+          {error}
+        </div>
+      )}
+
+      {success && (
+        <div className="text-sm text-green-500 bg-green-500/10 border border-green-500/20 rounded-md px-3 py-2">
+          Email updated successfully!
+        </div>
+      )}
+
+      <Button type="submit" disabled={loading}>
+        {loading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+        Update Email
+      </Button>
+    </form>
+  );
+}
+

components/settings/password-form.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { updatePassword } from "@/actions/settings";
+import { Loader2 } from "lucide-react";
+
+export function PasswordForm() {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    setSuccess(false);
+
+    const formData = new FormData(e.currentTarget);
+    const currentPassword = formData.get("currentPassword") as string;
+    const newPassword = formData.get("newPassword") as string;
+    const confirmPassword = formData.get("confirmPassword") as string;
+
+    if (newPassword !== confirmPassword) {
+      setError("New passwords do not match");
+      setLoading(false);
+      return;
+    }
+
+    if (newPassword.length < 8) {
+      setError("Password must be at least 8 characters");
+      setLoading(false);
+      return;
+    }
+
+    try {
+      await updatePassword({ currentPassword, newPassword });
+      setSuccess(true);
+      (e.target as HTMLFormElement).reset();
+      setTimeout(() => setSuccess(false), 3000);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to update password");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="currentPassword">Current Password</Label>
+        <Input
+          id="currentPassword"
+          name="currentPassword"
+          type="password"
+          required
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="newPassword">New Password</Label>
+        <Input
+          id="newPassword"
+          name="newPassword"
+          type="password"
+          required
+          minLength={8}
+        />
+        <p className="text-xs text-muted-foreground">
+          Must be at least 8 characters
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="confirmPassword">Confirm New Password</Label>
+        <Input
+          id="confirmPassword"
+          name="confirmPassword"
+          type="password"
+          required
+          minLength={8}
+        />
+      </div>
+
+      {error && (
+        <div className="text-sm text-red-500 bg-red-500/10 border border-red-500/20 rounded-md px-3 py-2">
+          {error}
+        </div>
+      )}
+
+      {success && (
+        <div className="text-sm text-green-500 bg-green-500/10 border border-green-500/20 rounded-md px-3 py-2">
+          Password updated successfully!
+        </div>
+      )}
+
+      <Button type="submit" disabled={loading}>
+        {loading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+        Update Password
+      </Button>
+    </form>
+  );
+}
+

components/settings/profile-form.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { updateProfile } from "@/actions/settings";
+import { Loader2 } from "lucide-react";
+
+interface ProfileFormProps {
+  user: {
+    name: string;
+    username: string;
+    bio?: string | null;
+    location?: string | null;
+    website?: string | null;
+    pronouns?: string | null;
+  };
+}
+
+export function ProfileForm({ user }: ProfileFormProps) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    setSuccess(false);
+
+    const formData = new FormData(e.currentTarget);
+
+    try {
+      await updateProfile({
+        name: formData.get("name") as string,
+        username: formData.get("username") as string,
+        bio: formData.get("bio") as string,
+        location: formData.get("location") as string,
+        website: formData.get("website") as string,
+        pronouns: formData.get("pronouns") as string,
+      });
+      setSuccess(true);
+      setTimeout(() => setSuccess(false), 3000);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to update profile");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <div className="space-y-2">
+        <Label htmlFor="name">Display Name</Label>
+        <Input
+          id="name"
+          name="name"
+          defaultValue={user.name}
+          placeholder="Your display name"
+          required
+        />
+        <p className="text-xs text-muted-foreground">
+          Your name as it appears on your profile
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="username">Username</Label>
+        <Input
+          id="username"
+          name="username"
+          defaultValue={user.username}
+          placeholder="username"
+          required
+          pattern="[a-zA-Z0-9_-]+"
+          minLength={3}
+        />
+        <p className="text-xs text-muted-foreground">
+          Your unique handle. Letters, numbers, underscores, and hyphens only.
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="bio">Bio</Label>
+        <Textarea
+          id="bio"
+          name="bio"
+          defaultValue={user.bio || ""}
+          placeholder="Tell us about yourself"
+          maxLength={160}
+          rows={3}
+        />
+        <p className="text-xs text-muted-foreground">
+          Brief description for your profile. Max 160 characters.
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="pronouns">Pronouns</Label>
+        <Input
+          id="pronouns"
+          name="pronouns"
+          defaultValue={user.pronouns || ""}
+          placeholder="e.g., they/them, she/her, he/him"
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="location">Location</Label>
+        <Input
+          id="location"
+          name="location"
+          defaultValue={user.location || ""}
+          placeholder="City, Country"
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="website">Website</Label>
+        <Input
+          id="website"
+          name="website"
+          type="url"
+          defaultValue={user.website || ""}
+          placeholder="https://yourwebsite.com"
+        />
+      </div>
+
+      {error && (
+        <div className="text-sm text-red-500 bg-red-500/10 border border-red-500/20 rounded-md px-3 py-2">
+          {error}
+        </div>
+      )}
+
+      {success && (
+        <div className="text-sm text-green-500 bg-green-500/10 border border-green-500/20 rounded-md px-3 py-2">
+          Profile updated successfully!
+        </div>
+      )}
+
+      <Button type="submit" disabled={loading}>
+        {loading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+        Save Changes
+      </Button>
+    </form>
+  );
+}
+

components/settings/settings-nav.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { User, Shield } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const navItems = [
+  { href: "/settings", label: "Profile", icon: User },
+  { href: "/settings/account", label: "Account", icon: Shield },
+];
+
+export function SettingsNav() {
+  const pathname = usePathname();
+
+  return (
+    <nav className="flex flex-col gap-1">
+      {navItems.map((item) => {
+        const isActive = item.href === "/settings" 
+          ? pathname === "/settings"
+          : pathname.startsWith(item.href);
+        
+        return (
+          <Link
+            key={item.href}
+            href={item.href}
+            className={cn(
+              "flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors",
+              isActive 
+                ? "bg-accent text-foreground font-medium" 
+                : "text-muted-foreground hover:text-foreground hover:bg-accent/50"
+            )}
+          >
+            <item.icon className="w-4 h-4" />
+            {item.label}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}
+

components/settings/social-links-form.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { updateSocialLinks } from "@/actions/settings";
+import { Loader2, Link } from "lucide-react";
+import { GithubIcon, LinkedInIcon, XIcon } from "../icons";
+
+interface SocialLinksFormProps {
+  socialLinks?: {
+    github?: string;
+    twitter?: string;
+    linkedin?: string;
+    custom?: string[];
+  } | null;
+}
+
+export function SocialLinksForm({ socialLinks }: SocialLinksFormProps) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+  const [customLinks, setCustomLinks] = useState<string[]>([socialLinks?.custom?.[0] || "", socialLinks?.custom?.[1] || "", socialLinks?.custom?.[2] || ""]);
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    setSuccess(false);
+
+    const formData = new FormData(e.currentTarget);
+
+    try {
+      await updateSocialLinks({
+        github: formData.get("github") as string,
+        twitter: formData.get("twitter") as string,
+        linkedin: formData.get("linkedin") as string,
+        custom: customLinks.filter(Boolean),
+      });
+      setSuccess(true);
+      setTimeout(() => setSuccess(false), 3000);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to update social links");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <div className="space-y-2">
+        <Label htmlFor="github" className="flex items-center gap-2">
+          <GithubIcon className="w-4 h-4" />
+          GitHub
+        </Label>
+        <Input id="github" name="github" defaultValue={socialLinks?.github || ""} placeholder="https://github.com/username" type="url" />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="twitter" className="flex items-center gap-2">
+          <XIcon className="w-4 h-4" />
+          Twitter / X
+        </Label>
+        <Input id="twitter" name="twitter" defaultValue={socialLinks?.twitter || ""} placeholder="https://twitter.com/username" type="url" />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="linkedin" className="flex items-center gap-2">
+          <LinkedInIcon className="w-4 h-4" />
+          LinkedIn
+        </Label>
+        <Input id="linkedin" name="linkedin" defaultValue={socialLinks?.linkedin || ""} placeholder="https://linkedin.com/in/username" type="url" />
+      </div>
+
+      <div className="space-y-3">
+        <Label className="flex items-center gap-2">
+          <Link className="w-4 h-4" />
+          Custom Links
+        </Label>
+        {[0, 1, 2].map((i) => (
+          <Input
+            key={i}
+            value={customLinks[i]}
+            onChange={(e) => {
+              const newLinks = [...customLinks];
+              newLinks[i] = e.target.value;
+              setCustomLinks(newLinks);
+            }}
+            placeholder={`Custom link ${i + 1}`}
+            type="url"
+          />
+        ))}
+        <p className="text-xs text-muted-foreground">Add up to 3 custom links to your profile</p>
+      </div>
+
+      {error && <div className="text-sm text-red-500 bg-red-500/10 border border-red-500/20 rounded-md px-3 py-2">{error}</div>}
+
+      {success && <div className="text-sm text-green-500 bg-green-500/10 border border-green-500/20 rounded-md px-3 py-2">Social links updated!</div>}
+
+      <Button type="submit" disabled={loading}>
+        {loading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+        Save Social Links
+      </Button>
+    </form>
+  );
+}