classify web
This commit is contained in:
50
components/Skeletons/AdListingPublicPlanCardSkeleton.jsx
Normal file
50
components/Skeletons/AdListingPublicPlanCardSkeleton.jsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
const AdListingPublicPlanCardSkeleton = () => {
|
||||
return (
|
||||
<>
|
||||
<Skeleton className="w-1/5 h-4 mt-8 mb-4" />
|
||||
<div className="flex gap-4 overflow-x-auto scrollbar-none">
|
||||
{Array.from({ length: 4 }).map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="rounded-lg p-8 shadow-sm border bg-white basis-[90%] sm:basis-[75%] md:basis-[55%] lg:basis-[45%] xl:basis-[35%] 2xl:basis-[30%] flex-shrink-0 first:pl-4"
|
||||
>
|
||||
{/* Card Header */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-1 md:p-4 rounded-lg">
|
||||
<Skeleton className="w-20 h-20 md:w-24 md:h-24 rounded-full" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2 overflow-hidden flex-1">
|
||||
<Skeleton className="h-6 w-3/4 mb-1 rounded" /> {/* Title */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Skeleton className="h-6 w-16 rounded" /> {/* Price */}
|
||||
<Skeleton className="h-6 w-10 rounded" />{" "}
|
||||
{/* Strikethrough price */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Divider */}
|
||||
<div className="my-6">
|
||||
<Skeleton className="h-[2px] w-full" />
|
||||
</div>
|
||||
{/* Feature List Skeleton */}
|
||||
<div className="space-y-2 mb-2 h-[250px] max-h-[250px] overflow-y-auto p-4 md:p-0 flex flex-col">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-3">
|
||||
<Skeleton className="h-5 w-5 rounded-full" />
|
||||
<Skeleton className="h-4 w-3/4 rounded" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* Button Skeleton */}
|
||||
<div className="flex items-center justify-center h-12 max-h-12 p-4 md:p-0">
|
||||
<Skeleton className="h-10 w-full rounded-lg" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default AdListingPublicPlanCardSkeleton;
|
||||
50
components/Skeletons/AddListingPlanCardSkeleton.jsx
Normal file
50
components/Skeletons/AddListingPlanCardSkeleton.jsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
const AddListingPlanCardSkeleton = () => {
|
||||
return (
|
||||
<>
|
||||
<Skeleton className="w-1/5 h-4 mt-8 mb-4" />
|
||||
<div className="flex gap-4 overflow-x-auto scrollbar-none">
|
||||
{Array.from({ length: 4 }).map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="rounded-lg p-8 shadow-sm border bg-white basis-[100%] sm:basis-3/4 md:basis-1/2 lg:basis-[66.66%] xl:basis-[45%] flex-shrink-0 first:pl-4"
|
||||
>
|
||||
{/* Card Header */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-1 md:p-4 rounded-lg">
|
||||
<Skeleton className="w-20 h-20 md:w-24 md:h-24 rounded-full" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2 overflow-hidden flex-1">
|
||||
<Skeleton className="h-6 w-3/4 mb-1 rounded" /> {/* Title */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Skeleton className="h-6 w-16 rounded" /> {/* Price */}
|
||||
<Skeleton className="h-6 w-10 rounded" />{" "}
|
||||
{/* Strikethrough price */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Divider */}
|
||||
<div className="my-6">
|
||||
<Skeleton className="h-[2px] w-full" />
|
||||
</div>
|
||||
{/* Feature List Skeleton */}
|
||||
<div className="space-y-2 mb-2 h-[250px] max-h-[250px] overflow-y-auto p-4 md:p-0 flex flex-col">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-3">
|
||||
<Skeleton className="h-5 w-5 rounded-full" />
|
||||
<Skeleton className="h-4 w-3/4 rounded" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* Button Skeleton */}
|
||||
<div className="flex items-center justify-center h-12 max-h-12 p-4 md:p-0">
|
||||
<Skeleton className="h-10 w-full rounded-lg" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default AddListingPlanCardSkeleton;
|
||||
15
components/Skeletons/BlogCardSkeleton.jsx
Normal file
15
components/Skeletons/BlogCardSkeleton.jsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import { Skeleton } from "../ui/skeleton";
|
||||
|
||||
const BlogCardSkeleton = () => {
|
||||
return (
|
||||
<div className="p-4 rounded-3xl flex flex-col gap-4 border h-100 bg-white h-full">
|
||||
<Skeleton className="w-full aspect-[388/200]" />
|
||||
<Skeleton className="w-2/3 h-4" />
|
||||
<Skeleton className="w-full h-4" />
|
||||
<Skeleton className="w-full h-4" />
|
||||
<Skeleton className="w-1/3 h-4" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlogCardSkeleton;
|
||||
63
components/Skeletons/JobApplicationSkeleton.jsx
Normal file
63
components/Skeletons/JobApplicationSkeleton.jsx
Normal file
@@ -0,0 +1,63 @@
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
|
||||
const JobApplicationSkeleton = ({ count = 5 }) => {
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
<div className="min-w-full overflow-hidden border rounded-md">
|
||||
<Table>
|
||||
<TableHeader className="bg-muted">
|
||||
<TableRow className="text-xs sm:text-sm">
|
||||
<TableHead>
|
||||
<div className="h-5 w-[60%] bg-gray-200 rounded animate-pulse"></div>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<div className="h-5 w-[70%] bg-gray-200 rounded animate-pulse"></div>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<div className="h-5 w-[50%] bg-gray-200 rounded animate-pulse"></div>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<div className="h-5 w-[70%] bg-gray-200 rounded animate-pulse"></div>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<div className="h-5 w-[60%] bg-gray-200 rounded animate-pulse"></div>
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody className="text-xs sm:text-sm">
|
||||
{Array(count)
|
||||
.fill(0)
|
||||
.map((_, index) => (
|
||||
<TableRow key={index} className="hover:bg-muted">
|
||||
<TableCell>
|
||||
<div className="h-4 w-[85%] bg-gray-200 rounded animate-pulse"></div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="h-4 w-[80%] bg-gray-200 rounded animate-pulse"></div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="h-6 w-[75%] bg-gray-200 rounded animate-pulse"></div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="h-4 w-[90%] bg-gray-200 rounded animate-pulse"></div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="h-4 w-[70%] bg-gray-200 rounded animate-pulse"></div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default JobApplicationSkeleton;
|
||||
67
components/Skeletons/TransactionSkeleton.jsx
Normal file
67
components/Skeletons/TransactionSkeleton.jsx
Normal file
@@ -0,0 +1,67 @@
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
|
||||
const TransactionSkeleton = ({ count = 5 }) => {
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
<div className="min-w-full overflow-hidden border rounded-md">
|
||||
<Table>
|
||||
<TableHeader className='bg-muted'>
|
||||
<TableRow className='text-xs sm:text-sm'>
|
||||
<TableHead>
|
||||
<div className="h-5 w-[50%] bg-gray-200 rounded animate-pulse"></div>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<div className="h-5 w-[70%] bg-gray-200 rounded animate-pulse"></div>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<div className="h-5 w-[60%] bg-gray-200 rounded animate-pulse"></div>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<div className="h-5 w-[70%] bg-gray-200 rounded animate-pulse"></div>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<div className="h-5 w-[60%] bg-gray-200 rounded animate-pulse"></div>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<div className="h-5 w-[70%] bg-gray-200 rounded animate-pulse"></div>
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody className='text-xs sm:text-sm'>
|
||||
{Array(count).fill(0).map((_, index) => (
|
||||
<TableRow key={index} className="hover:bg-muted">
|
||||
<TableCell>
|
||||
<div className="h-4 w-[80%] bg-gray-200 rounded animate-pulse"></div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="h-4 w-[85%] bg-gray-200 rounded animate-pulse"></div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="h-4 w-[90%] bg-gray-200 rounded animate-pulse"></div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="h-4 w-[80%] bg-gray-200 rounded animate-pulse"></div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="h-4 w-[70%] bg-gray-200 rounded animate-pulse"></div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="h-6 w-[75%] bg-gray-200 rounded animate-pulse"></div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TransactionSkeleton;
|
||||
Reference in New Issue
Block a user