39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { PanelCard } from "@calcom/ui/components/card";
|
|
import { SkeletonText } from "@calcom/ui/components/skeleton";
|
|
|
|
export function InvoicesTableSkeleton() {
|
|
const { t } = useLocale();
|
|
|
|
return (
|
|
<PanelCard title={t("invoices")} className="mt-5">
|
|
<div className="p-4">
|
|
{/* Header row */}
|
|
<div className="mb-3 flex gap-4 border-b pb-3">
|
|
<SkeletonText className="h-4 w-20" />
|
|
<SkeletonText className="h-4 w-24" />
|
|
<SkeletonText className="h-4 w-16" />
|
|
<SkeletonText className="h-4 w-16" />
|
|
<SkeletonText className="h-4 flex-1" />
|
|
<SkeletonText className="h-4 w-24" />
|
|
<SkeletonText className="h-4 w-16" />
|
|
</div>
|
|
{/* Data rows */}
|
|
{Array.from({ length: 5 }).map((_, i) => (
|
|
<div key={i} className="flex gap-4 py-3">
|
|
<SkeletonText className="h-4 w-20" />
|
|
<SkeletonText className="h-4 w-24" />
|
|
<SkeletonText className="h-4 w-16" />
|
|
<SkeletonText className="h-4 w-16" />
|
|
<SkeletonText className="h-4 flex-1" />
|
|
<SkeletonText className="h-4 w-24" />
|
|
<SkeletonText className="h-4 w-8" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</PanelCard>
|
|
);
|
|
}
|