server-dash/app/components/ServicesCard.tsx
2026-03-25 23:33:09 -07:00

28 lines
856 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-white border border-gray-200 rounded-2xl p-6 shadow-sm animate-fade-up"
style={{ animationDelay: `${delay}ms` }}
>
<p className="text-[0.68rem] font-medium tracking-widest uppercase text-gray-400 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>
);
}