27 lines
1.5 KiB
TypeScript
27 lines
1.5 KiB
TypeScript
import { Building2Icon } from 'lucide-react'
|
|
|
|
/**
|
|
* نشان «پروژه فعال» هیرو — آیکون و متن کنار هم، با فاصلهٔ یکنواخت و
|
|
* چیدمان وسطچین. فلکسباکس ستون را از بین میبرد تا فاصلهٔ آیکون و متن
|
|
* یکدست بماند و آیکون درست با متن همتراز شود.
|
|
*/
|
|
export function HeroProjectBadge({ value, label }: { value: string; label: string }) {
|
|
return (
|
|
<div className="flex items-center gap-3.5 text-center">
|
|
{/* آیکون در کادر مربعی با نشان زندهٔ مسی */}
|
|
<span className="relative flex h-14 w-14 shrink-0 items-center justify-center rounded-xl border border-copper/40 bg-copper/10">
|
|
<Building2Icon className="h-6 w-6 text-copper" aria-hidden="true" />
|
|
<span className="absolute -end-1 -top-1 flex h-3 w-3" aria-hidden="true">
|
|
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-copper opacity-60" />
|
|
<span className="relative inline-flex h-3 w-3 rounded-full border border-ink bg-copper" />
|
|
</span>
|
|
</span>
|
|
|
|
<div className="flex flex-col items-center">
|
|
{value && <p className="font-mono text-[2.5rem] font-bold leading-none tracking-tight text-copper">{value}</p>}
|
|
<p className={`text-center text-[15px] font-light leading-7 text-ivory/85 ${value ? 'mt-2' : ''}`}>{label}</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|