53 lines
1.9 KiB
TypeScript
53 lines
1.9 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { Pencil } from "lucide-react";
|
|
import type { ReactNode } from "react";
|
|
import { Card } from "@/components/ui/card";
|
|
|
|
export interface ProfileCardProps {
|
|
name: string;
|
|
meta?: ReactNode;
|
|
avatarUrl?: string;
|
|
onEdit?: () => void;
|
|
/** Renders the edit-pencil as a `<Link>` instead of a button — lets a Server Component page use the edit affordance without becoming a Client Component. Ignored if `onEdit` is also passed. */
|
|
editHref?: string;
|
|
}
|
|
|
|
/** Avatar + name + meta + edit-pencil pattern reused across nearly every settings/profile screen. */
|
|
export function ProfileCard({ name, meta, avatarUrl, onEdit, editHref }: ProfileCardProps) {
|
|
const editButtonClassName = "flex h-10 w-10 items-center justify-center rounded-full bg-stone text-ink";
|
|
|
|
return (
|
|
<Card className="flex items-center gap-4 p-5">
|
|
{avatarUrl ? (
|
|
<Image
|
|
src={avatarUrl}
|
|
alt=""
|
|
width={64}
|
|
height={64}
|
|
className="h-16 w-16 rounded-full border border-line object-cover"
|
|
/>
|
|
) : (
|
|
<div className="flex h-16 w-16 items-center justify-center rounded-full border border-line bg-stone text-xl font-bold text-muted">
|
|
{name.charAt(0)}
|
|
</div>
|
|
)}
|
|
<div className="flex-1">
|
|
<h2 className="text-lg font-bold">{name}</h2>
|
|
{meta && <div className="mt-0.5 text-xs text-muted">{meta}</div>}
|
|
</div>
|
|
{onEdit ? (
|
|
<button type="button" onClick={onEdit} aria-label={`Edit ${name}`} className={editButtonClassName}>
|
|
<Pencil className="h-3.5 w-3.5" aria-hidden="true" />
|
|
</button>
|
|
) : (
|
|
editHref && (
|
|
<Link href={editHref} aria-label={`Edit ${name}`} className={editButtonClassName}>
|
|
<Pencil className="h-3.5 w-3.5" aria-hidden="true" />
|
|
</Link>
|
|
)
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|