36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { RECENT_JOINERS } from "@/config/home.config";
|
|
|
|
export default function AvatarStack() {
|
|
return (
|
|
<div className="flex flex-wrap items-center gap-3 sm:gap-4">
|
|
<div className="flex -space-x-2.5 shrink-0">
|
|
{RECENT_JOINERS.slice(0, 6).map((u, i) => (
|
|
<div
|
|
key={i}
|
|
className="relative w-10 h-10 rounded-full overflow-hidden border-2 border-[#faf8f5] dark:border-stone-950 shadow-sm ring-1 ring-stone-200/50 dark:ring-stone-700/50"
|
|
title={u.name}
|
|
>
|
|
<Image
|
|
src={u.avatar}
|
|
alt={u.name}
|
|
fill
|
|
sizes="40px"
|
|
className="object-cover"
|
|
unoptimized
|
|
/>
|
|
</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>
|
|
);
|
|
}
|