mirror of
https://gitbruv.vercel.app/api/git/bruv/gitbruv.git
synced 2025-12-20 23:24:09 +01:00
wip
This commit is contained in:
Ahmet Kilinc
parent
a63628e659
commit
dffc97239e
17 changed files with 1220 additions and 24 deletions
81
components/settings/avatar-upload.tsx
Normal file
81
components/settings/avatar-upload.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
112
components/settings/delete-account.tsx
Normal file
112
components/settings/delete-account.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
80
components/settings/email-form.tsx
Normal file
80
components/settings/email-form.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
106
components/settings/password-form.tsx
Normal file
106
components/settings/password-form.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
150
components/settings/profile-form.tsx
Normal file
150
components/settings/profile-form.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
42
components/settings/settings-nav.tsx
Normal file
42
components/settings/settings-nav.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
107
components/settings/social-links-form.tsx
Normal file
107
components/settings/social-links-form.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue