server-dash/app/components/ServicesCard.tsx
2026-05-21 21:13:06 -07:00

28 lines
855 B
TypeScript

import ServicePill from "./ServicePill";
interface ServicesCardProps {
services: Record<string, string> | null;
delay?: number;
}
export default function ServicesCard({ services, delay = 0 }: ServicesCardProps) {
return (
<div
className="bg-primary border border-secondary rounded-2xl p-6 animate-fade-up"
style={{ animationDelay: `${delay}ms` }}
>
<p className="text-[0.68rem] font-medium tracking-widest uppercase text-foreground-sec mb-4">
Services
</p>
<div className="flex flex-col gap-2">
{services
? Object.entries(services).map(([name, status]) => (
<ServicePill key={name} name={name} status={status} />
))
: [1, 2, 3, 4].map((i) => (
<div key={i} className="skeleton h-10" />
))}
</div>
</div>
);
}