47 lines
2.0 KiB
JavaScript
47 lines
2.0 KiB
JavaScript
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
|
|
const NotificationSkeleton = () => {
|
|
return (
|
|
<div className="overflow-hidden border rounded-md">
|
|
<Table>
|
|
<TableHeader className='bg-muted'>
|
|
<TableRow className='text-xs sm:text-sm'>
|
|
<TableHead>
|
|
<div className="h-5 w-2/4 bg-gray-200 rounded animate-pulse"></div>
|
|
</TableHead>
|
|
<TableHead className="text-center">
|
|
<div className="h-5 w-2/4 bg-gray-200 rounded animate-pulse mx-auto"></div>
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody className='text-xs sm:text-sm'>
|
|
{Array.from({ length: 15 }).map((_, index) => (
|
|
<TableRow key={index} className="hover:bg-muted">
|
|
<TableCell>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-[48px] h-[48px] rounded bg-gray-200 animate-pulse"></div>
|
|
<div className="flex flex-col gap-2 flex-1">
|
|
<div className="h-4 bg-gray-200 rounded animate-pulse w-2/4"></div>
|
|
<div className="h-3 bg-gray-200 rounded animate-pulse w-3/4"></div>
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-center">
|
|
<div className="h-4 bg-gray-200 rounded animate-pulse w-full mx-auto"></div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NotificationSkeleton;
|