Customer Profile

Customer profile update with image upload.

src/components/ui/profile-card.tsx

@@ -1,4 +1,5 @@
 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";
@@ -8,10 +9,14 @@ export interface ProfileCardProps {
   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 }: ProfileCardProps) {
+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 ? (
@@ -31,15 +36,16 @@ export function ProfileCard({ name, meta, avatarUrl, onEdit }: ProfileCardProps)
         <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="flex h-10 w-10 items-center justify-center rounded-full bg-stone text-ink"
-        >
+      {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>
   );