feat: add user centric features
This commit is contained in:
gosangam
@@ -0,0 +1,225 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* ProfileEditForm — the editor block used in /u/me's edit mode.
|
||||
*
|
||||
* Three editable fields:
|
||||
* • Display name (PATCH /users/me { name })
|
||||
* • Handle (PATCH /users/me { handle }) — 409 if taken
|
||||
* • Avatar (R2 presign + PATCH /users/me { avatar_url })
|
||||
*
|
||||
* `onDone` is invoked after a successful save OR when the user clicks
|
||||
* "Cancel" — the parent flips back to view mode.
|
||||
*
|
||||
* No log-out button here — that's handled by the sidebar footer so it lives
|
||||
* outside the edit context.
|
||||
*/
|
||||
|
||||
import { useRef, useState } from "react";
|
||||
import Image from "next/image";
|
||||
import { ImagePlus, Save, X } from "lucide-react";
|
||||
import { useAuth } from "@/components/auth/auth-provider";
|
||||
import { auth, AuthError, type User } from "@/lib/auth";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
export function ProfileEditForm({
|
||||
user,
|
||||
onDone,
|
||||
}: {
|
||||
user: User;
|
||||
onDone: () => void;
|
||||
}) {
|
||||
const { setUser } = useAuth();
|
||||
const fileInput = useRef<HTMLInputElement>(null);
|
||||
|
||||
const [name, setName] = useState(user.name);
|
||||
const [handle, setHandle] = useState(user.handle);
|
||||
const [avatarUrl, setAvatarUrl] = useState<string | null>(user.avatar_url);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const dirty =
|
||||
name.trim() !== user.name ||
|
||||
handle.trim() !== user.handle ||
|
||||
avatarUrl !== user.avatar_url;
|
||||
|
||||
async function onSubmit(e: React.SyntheticEvent) {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setSaving(true);
|
||||
try {
|
||||
// Patch only what's changed — keeps the audit log tidy and avoids
|
||||
// bumping updated_at when the user just clicked "Save" without edits.
|
||||
const updated = await auth.updateProfile(
|
||||
name.trim() !== user.name ? name.trim() : undefined,
|
||||
avatarUrl === user.avatar_url ? undefined : (avatarUrl ?? ""),
|
||||
handle.trim() !== user.handle ? handle.trim() : undefined,
|
||||
);
|
||||
setUser(updated);
|
||||
onDone();
|
||||
} catch (err) {
|
||||
setError(err instanceof AuthError ? err.message : "Could not save.");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function onAvatarChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const file = e.target.files?.[0];
|
||||
if (fileInput.current) fileInput.current.value = "";
|
||||
if (!file) return;
|
||||
setError(null);
|
||||
setUploading(true);
|
||||
try {
|
||||
const publicURL = await auth.uploadAvatar(file);
|
||||
setAvatarUrl(publicURL);
|
||||
} catch (err) {
|
||||
setError(err instanceof AuthError ? err.message : "Upload failed.");
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={onSubmit} className="space-y-6 rounded-2xl bg-card ring-1 ring-foreground/10 p-5 sm:p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="font-[family-name:var(--font-title)] text-xl sm:text-2xl font-semibold text-foreground">
|
||||
Edit profile
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onDone}
|
||||
aria-label="Cancel"
|
||||
className="size-9 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted inline-flex items-center justify-center"
|
||||
>
|
||||
<X className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Avatar — same widget pattern as the old /profile form */}
|
||||
<section className="flex items-center gap-4">
|
||||
<AvatarPreview src={avatarUrl} name={user.name} />
|
||||
<div className="flex flex-col gap-2">
|
||||
<input
|
||||
ref={fileInput}
|
||||
type="file"
|
||||
accept="image/png,image/jpeg,image/webp,image/gif"
|
||||
hidden
|
||||
onChange={onAvatarChange}
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
type="button"
|
||||
onClick={() => fileInput.current?.click()}
|
||||
disabled={uploading || saving}
|
||||
className="h-10 px-4 text-sm gap-1.5"
|
||||
>
|
||||
<ImagePlus className="size-4" />
|
||||
{uploading ? "Uploading…" : avatarUrl ? "Change" : "Upload"}
|
||||
</Button>
|
||||
{avatarUrl ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
type="button"
|
||||
onClick={() => setAvatarUrl(null)}
|
||||
disabled={uploading || saving}
|
||||
className="h-10 px-4 text-sm"
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="profile-name">Display name</Label>
|
||||
<Input
|
||||
id="profile-name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
maxLength={120}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="profile-handle">Handle</Label>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-muted-foreground">@</span>
|
||||
<Input
|
||||
id="profile-handle"
|
||||
value={handle}
|
||||
onChange={(e) => setHandle(e.target.value)}
|
||||
maxLength={32}
|
||||
pattern="[a-zA-Z0-9._-]+"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Letters, digits, dashes. Your public profile lives at /u/{handle || user.handle}.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="profile-email">Email</Label>
|
||||
<Input id="profile-email" value={user.email} disabled />
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Email changes aren't supported yet.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error ? <p className="text-sm text-destructive">{error}</p> : null}
|
||||
|
||||
<div className="flex items-center justify-end gap-2 pt-2 border-t border-border">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={onDone}
|
||||
className="h-10 px-4 text-sm"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={saving || uploading || !dirty}
|
||||
className="h-10 px-4 text-sm gap-1.5"
|
||||
>
|
||||
<Save className="size-4" />
|
||||
{saving ? "Saving…" : "Save changes"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
function AvatarPreview({ src, name }: { src: string | null; name: string }) {
|
||||
if (src) {
|
||||
return (
|
||||
<Image
|
||||
src={src}
|
||||
alt={name}
|
||||
width={80}
|
||||
height={80}
|
||||
className="size-20 rounded-full object-cover ring-1 ring-foreground/10"
|
||||
unoptimized
|
||||
/>
|
||||
);
|
||||
}
|
||||
const initials =
|
||||
name
|
||||
.split(/\s+/)
|
||||
.map((p) => p[0])
|
||||
.slice(0, 2)
|
||||
.join("")
|
||||
.toUpperCase() || "?";
|
||||
return (
|
||||
<div className="size-20 rounded-full bg-muted flex items-center justify-center text-2xl font-medium text-muted-foreground ring-1 ring-foreground/10">
|
||||
{initials}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* ProfileHeader — Instagram-style centered header used at the top of
|
||||
* /u/me and /u/[handle]. Avatar, display name, @handle, a single stat
|
||||
* line, and an optional action slot (Edit profile button on owner view).
|
||||
*
|
||||
* Replaces the older ProfileViewHeader (left-aligned avatar + sidebar).
|
||||
*/
|
||||
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
export function ProfileHeader({
|
||||
avatarURL,
|
||||
name,
|
||||
handle,
|
||||
postCount,
|
||||
joinedAt,
|
||||
editHref,
|
||||
}: {
|
||||
avatarURL: string | null;
|
||||
name: string;
|
||||
handle: string;
|
||||
postCount?: number;
|
||||
joinedAt?: string;
|
||||
/** When provided, shows an "Edit profile" CTA below the handle. */
|
||||
editHref?: string;
|
||||
}) {
|
||||
return (
|
||||
<header className="flex flex-col items-center text-center gap-4 pt-4 pb-6 sm:pt-6 sm:pb-8">
|
||||
<Avatar src={avatarURL} name={name} />
|
||||
<div className="space-y-1">
|
||||
<h1 className="font-[family-name:var(--font-title)] font-semibold text-xl sm:text-2xl text-foreground leading-tight">
|
||||
{name}
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground">@{handle}</p>
|
||||
{typeof postCount === "number" || joinedAt ? (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{typeof postCount === "number" ? (
|
||||
<>
|
||||
<span className="tabular-nums">{postCount}</span> post
|
||||
{postCount === 1 ? "" : "s"}
|
||||
</>
|
||||
) : null}
|
||||
{typeof postCount === "number" && joinedAt ? " · " : null}
|
||||
{joinedAt ? <>Joined {new Date(joinedAt).toLocaleDateString()}</> : null}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
{editHref ? (
|
||||
<Link
|
||||
href={editHref}
|
||||
className="inline-flex items-center justify-center h-9 px-5 rounded-lg border border-border text-sm font-medium text-foreground hover:bg-muted transition-colors"
|
||||
>
|
||||
Edit profile
|
||||
</Link>
|
||||
) : null}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
function Avatar({ src, name }: { src: string | null; name: string }) {
|
||||
if (src) {
|
||||
return (
|
||||
<Image
|
||||
src={src}
|
||||
alt={name}
|
||||
width={112}
|
||||
height={112}
|
||||
className="size-24 sm:size-28 rounded-full object-cover ring-1 ring-foreground/10"
|
||||
unoptimized
|
||||
/>
|
||||
);
|
||||
}
|
||||
const initials =
|
||||
name
|
||||
.split(/\s+/)
|
||||
.map((p) => p[0])
|
||||
.slice(0, 2)
|
||||
.join("")
|
||||
.toUpperCase() || "?";
|
||||
return (
|
||||
<div className="size-24 sm:size-28 rounded-full bg-primary/15 text-primary flex items-center justify-center text-3xl font-semibold ring-1 ring-foreground/10">
|
||||
{initials}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* ProfileSidebar — the navigation rail for /u/me.
|
||||
*
|
||||
* • Desktop (md+): permanent left column, ~240px wide, sticky below the
|
||||
* SiteHeader so it stays in view while content scrolls.
|
||||
* • Mobile: a hamburger button reveals the same nav as a left drawer.
|
||||
*
|
||||
* Items are intentionally just three (Profile / Collections / Bookmarks) to
|
||||
* keep the surface focused; "Log out" sits as a footer action separated by
|
||||
* a divider.
|
||||
*/
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { User as UserIcon, FolderOpen, Bookmark, LogOut, Menu } from "lucide-react";
|
||||
import {
|
||||
Drawer,
|
||||
DrawerContent,
|
||||
DrawerDescription,
|
||||
DrawerHeader,
|
||||
DrawerTitle,
|
||||
DrawerTrigger,
|
||||
} from "@/components/ui/drawer";
|
||||
import { useAuth } from "@/components/auth/auth-provider";
|
||||
import type { User } from "@/lib/auth";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type NavItem = {
|
||||
href: string;
|
||||
label: string;
|
||||
icon: typeof UserIcon;
|
||||
/** Match only when pathname === href; otherwise startsWith is used. */
|
||||
exact?: boolean;
|
||||
};
|
||||
|
||||
const ITEMS: NavItem[] = [
|
||||
{ href: "/u/me", label: "Profile", icon: UserIcon, exact: true },
|
||||
{ href: "/u/me/collections", label: "Collections", icon: FolderOpen },
|
||||
{ href: "/u/me/bookmarks", label: "Bookmarks", icon: Bookmark },
|
||||
];
|
||||
|
||||
export function ProfileSidebar({ user }: { user: User }) {
|
||||
return (
|
||||
<>
|
||||
{/* Desktop rail — always visible on md+ */}
|
||||
<aside className="hidden md:block w-60 shrink-0">
|
||||
<div className="sticky top-20 space-y-4">
|
||||
<SidebarHeader user={user} />
|
||||
<SidebarNav onItemClick={() => {}} />
|
||||
<SidebarFooter />
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Mobile trigger + drawer */}
|
||||
<MobileSidebar user={user} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function MobileSidebar({ user }: { user: User }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
return (
|
||||
<div className="md:hidden mb-4">
|
||||
<Drawer open={open} onOpenChange={setOpen} direction="left">
|
||||
<DrawerTrigger
|
||||
className={cn(
|
||||
"inline-flex items-center gap-2 rounded-lg border border-border bg-card",
|
||||
"px-3 h-10 text-sm font-medium text-foreground hover:bg-muted transition-colors",
|
||||
)}
|
||||
>
|
||||
<Menu className="size-4" />
|
||||
Library menu
|
||||
</DrawerTrigger>
|
||||
<DrawerContent direction="left" className="h-full w-72 max-w-[80%]">
|
||||
<DrawerHeader className="text-left border-b border-border pb-4">
|
||||
<DrawerTitle className="font-[family-name:var(--font-title)] font-semibold uppercase tracking-[0.14em] text-sm">
|
||||
Your library
|
||||
</DrawerTitle>
|
||||
<DrawerDescription className="sr-only">
|
||||
Switch between profile, collections, and bookmarks.
|
||||
</DrawerDescription>
|
||||
</DrawerHeader>
|
||||
<div className="overflow-y-auto flex-1 p-4 space-y-4">
|
||||
<SidebarHeader user={user} />
|
||||
<SidebarNav onItemClick={() => setOpen(false)} />
|
||||
<SidebarFooter />
|
||||
</div>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarHeader({ user }: { user: User }) {
|
||||
return (
|
||||
<div className="flex items-center gap-3 px-3 py-3 rounded-lg bg-card ring-1 ring-foreground/10">
|
||||
<Avatar src={user.avatar_url} name={user.name} />
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-semibold text-foreground truncate">
|
||||
{user.name}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground truncate">@{user.handle}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarNav({ onItemClick }: { onItemClick: () => void }) {
|
||||
const pathname = usePathname();
|
||||
return (
|
||||
<nav className="space-y-0.5" aria-label="Library sections">
|
||||
{ITEMS.map((item) => {
|
||||
const active = item.exact
|
||||
? pathname === item.href
|
||||
: pathname.startsWith(item.href);
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
onClick={onItemClick}
|
||||
className={cn(
|
||||
"flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors",
|
||||
active
|
||||
? "bg-primary/10 text-primary"
|
||||
: "text-muted-foreground hover:bg-muted hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
<Icon className="size-4" />
|
||||
{item.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarFooter() {
|
||||
const { logOut } = useAuth();
|
||||
const router = useRouter();
|
||||
async function onLogOut() {
|
||||
await logOut();
|
||||
router.push("/");
|
||||
router.refresh();
|
||||
}
|
||||
return (
|
||||
<div className="pt-3 border-t border-border">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onLogOut}
|
||||
className="flex items-center gap-3 w-full px-3 py-2.5 rounded-lg text-sm text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
|
||||
>
|
||||
<LogOut className="size-4" />
|
||||
Log out
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Avatar({ src, name }: { src: string | null; name: string }) {
|
||||
if (src) {
|
||||
return (
|
||||
<Image
|
||||
src={src}
|
||||
alt={name}
|
||||
width={40}
|
||||
height={40}
|
||||
className="size-10 rounded-full object-cover ring-1 ring-foreground/10 shrink-0"
|
||||
unoptimized
|
||||
/>
|
||||
);
|
||||
}
|
||||
const initials =
|
||||
name
|
||||
.split(/\s+/)
|
||||
.map((p) => p[0])
|
||||
.slice(0, 2)
|
||||
.join("")
|
||||
.toUpperCase() || "?";
|
||||
return (
|
||||
<div className="size-10 rounded-full bg-primary/15 text-primary flex items-center justify-center text-sm font-semibold ring-1 ring-foreground/10 shrink-0">
|
||||
{initials}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* ProfileTabs — Instagram-style icon tab strip used under ProfileHeader.
|
||||
*
|
||||
* Renders a horizontal row of equal-width icon tabs. The active tab gets
|
||||
* a top-border indicator and stronger color. Labels are screen-reader
|
||||
* only by default (Instagram pattern), but a `showLabels` prop opts them
|
||||
* back in for surfaces with more real estate.
|
||||
*/
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export type ProfileTab = {
|
||||
href: string;
|
||||
label: string;
|
||||
icon: React.ReactNode;
|
||||
/** Additional pathnames that should mark this tab active. Used to keep
|
||||
* the Posts tab lit while the user is on the scroll feed at
|
||||
* /u/<handle>/posts (a sibling route to /u/<handle>). */
|
||||
activeFor?: string[];
|
||||
};
|
||||
|
||||
export function ProfileTabs({
|
||||
tabs,
|
||||
showLabels = false,
|
||||
}: {
|
||||
tabs: ProfileTab[];
|
||||
showLabels?: boolean;
|
||||
}) {
|
||||
const pathname = usePathname();
|
||||
return (
|
||||
<nav aria-label="Profile sections" className="border-b border-border">
|
||||
<ul className="flex items-stretch max-w-md mx-auto">
|
||||
{tabs.map((tab) => {
|
||||
const active =
|
||||
pathname === tab.href ||
|
||||
(tab.activeFor?.includes(pathname) ?? false);
|
||||
return (
|
||||
<li key={tab.href} className="flex-1">
|
||||
<Link
|
||||
href={tab.href}
|
||||
aria-current={active ? "page" : undefined}
|
||||
title={tab.label}
|
||||
className={cn(
|
||||
"h-12 -mb-px flex items-center justify-center gap-2 border-b-2",
|
||||
active
|
||||
? "border-foreground text-foreground"
|
||||
: "border-transparent text-muted-foreground hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
<span>{tab.icon}</span>
|
||||
<span
|
||||
className={cn(
|
||||
"text-[0.65rem] uppercase tracking-[0.2em] font-semibold",
|
||||
showLabels ? "" : "sr-only",
|
||||
)}
|
||||
>
|
||||
{tab.label}
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* ProfileViewHeader — the read-only header used in view mode on /u/me.
|
||||
* Mirrors the shape of /u/[handle]'s top block so the owner sees the same
|
||||
* thing visitors do, plus an action slot for an "Edit profile" button.
|
||||
*/
|
||||
|
||||
import Image from "next/image";
|
||||
import type { User } from "@/lib/auth";
|
||||
|
||||
export function ProfileViewHeader({
|
||||
user,
|
||||
postCount,
|
||||
actionSlot,
|
||||
}: {
|
||||
user: User;
|
||||
postCount: number;
|
||||
actionSlot?: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<header className="flex flex-col sm:flex-row sm:items-center gap-5 sm:gap-6">
|
||||
<Avatar src={user.avatar_url} name={user.name} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<h1 className="font-[family-name:var(--font-title)] font-semibold text-2xl sm:text-3xl text-foreground leading-tight truncate">
|
||||
{user.name}
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground mt-0.5">
|
||||
@{user.handle} ·{" "}
|
||||
<span className="tabular-nums">{postCount}</span> post
|
||||
{postCount === 1 ? "" : "s"}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Joined {new Date(user.created_at).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
{actionSlot ? <div className="shrink-0">{actionSlot}</div> : null}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
function Avatar({ src, name }: { src: string | null; name: string }) {
|
||||
if (src) {
|
||||
return (
|
||||
<Image
|
||||
src={src}
|
||||
alt={name}
|
||||
width={88}
|
||||
height={88}
|
||||
className="size-20 sm:size-22 rounded-full object-cover ring-1 ring-foreground/10"
|
||||
unoptimized
|
||||
/>
|
||||
);
|
||||
}
|
||||
const initials =
|
||||
name
|
||||
.split(/\s+/)
|
||||
.map((p) => p[0])
|
||||
.slice(0, 2)
|
||||
.join("")
|
||||
.toUpperCase() || "?";
|
||||
return (
|
||||
<div className="size-20 sm:size-22 rounded-full bg-primary/15 text-primary flex items-center justify-center text-2xl font-semibold ring-1 ring-foreground/10">
|
||||
{initials}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user