Stefan Lazic
090646fdfd
Base app architecture:
Route groups for customer, staff and owner.
* Reusable design system with around 20 UI components.
* Complete Prisma schema.
* Authentication with email/password and Google.
* Role and permission model.
* Protected routes.
* Clean separation between features, services, components and shared utilities.
47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import Image from "next/image";
|
|
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;
|
|
}
|
|
|
|
/** Avatar + name + meta + edit-pencil pattern reused across nearly every settings/profile screen. */
|
|
export function ProfileCard({ name, meta, avatarUrl, onEdit }: ProfileCardProps) {
|
|
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="flex h-10 w-10 items-center justify-center rounded-full bg-stone text-ink"
|
|
>
|
|
<Pencil className="h-3.5 w-3.5" aria-hidden="true" />
|
|
</button>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|