33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { RECENT_JOINERS } from "@/config/home.config";
|
|
|
|
function getInitial(name: string): string {
|
|
if (!name || name.length === 0) return "?";
|
|
return name.slice(0, 1);
|
|
}
|
|
|
|
export default function AvatarStack() {
|
|
return (
|
|
<div className="flex flex-wrap items-center gap-3 sm:gap-4">
|
|
<div className="flex -space-x-2 shrink-0">
|
|
{RECENT_JOINERS.slice(0, 6).map((u, i) => (
|
|
<div
|
|
key={i}
|
|
className="relative w-9 h-9 rounded-full overflow-hidden border-2 border-[#faf8f5] dark:border-stone-950 bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 flex items-center justify-center text-xs font-medium ring-1 ring-stone-200/50 dark:ring-stone-700/50"
|
|
title={u.name}
|
|
>
|
|
{getInitial(u.name)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="text-sm text-stone-600 dark:text-stone-400 min-w-0">
|
|
<span className="font-medium text-stone-800 dark:text-stone-200">
|
|
{RECENT_JOINERS.slice(0, 3).map((u) => u.name).join("、")}
|
|
</span>
|
|
<span className="ml-1">等有报名意向</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|