yatra / resources / js / components / ui / table-skeleton.tsx

table-skeleton.tsx in Yatra – Travel Booking & Tour Operator Software 3.0.3, at resources/js/components/ui/table-skeleton.tsx

178 lines 5.9 KB

Raw Download Zip

1	import React from "react";
2
3	interface TableSkeletonProps {
4	rows?: number;
5	columns?: number;
6	}
7
8	export const TableSkeleton: React.FC<TableSkeletonProps> = ({
9	rows = 5,
10	columns = 8,
11	}) => {
12	return (
13	<div className="animate-pulse">
14	{/* Table Header Skeleton */}
15	<div className="border-b border-gray-200 dark:border-gray-700 pb-3 mb-3">
16	<div
17	className="grid gap-4"
18	style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}
19	>
20	{Array.from({ length: columns }).map((_, index) => (
21	<div
22	key={index}
23	className="h-4 bg-gray-200 dark:bg-gray-700 rounded"
24	></div>
25	))}
26	</div>
27	</div>
28
29	{/* Table Rows Skeleton */}
30	<div className="space-y-3">
31	{Array.from({ length: rows }).map((_, rowIndex) => (
32	<div
33	key={rowIndex}
34	className="grid gap-4"
35	style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}
36	>
37	{Array.from({ length: columns }).map((_, colIndex) => (
38	<div
39	key={colIndex}
40	className={`h-4 bg-gray-200 dark:bg-gray-700 rounded ${
41	colIndex === 0
42	? "w-3/4"
43	: colIndex === columns - 1
44	? "w-1/2"
45	: "w-full"
46	}`}
47	></div>
48	))}
49	</div>
50	))}
51	</div>
52	</div>
53	);
54	};
55
56	interface DeparturesTableSkeletonProps {
57	visibleColumns: {
58	trip: boolean;
59	date: boolean;
60	time: boolean;
61	capacity: boolean;
62	booked: boolean;
63	available: boolean;
64	revenue: boolean;
65	travelers: boolean;
66	bookings: boolean;
67	status: boolean;
68	source: boolean;
69	};
70	}
71
72	export const DeparturesTableSkeleton: React.FC<
73	DeparturesTableSkeletonProps
74	> = ({ visibleColumns }) => {
75	const visibleColumnCount =
76	Object.values(visibleColumns).filter(Boolean).length + 1; // +1 for actions column
77
78	return (
79	<div className="animate-pulse">
80	{/* Table Header */}
81	<div
82	className="grid gap-4 pb-3 mb-3 border-b border-gray-200 dark:border-gray-700"
83	style={{ gridTemplateColumns: `repeat(${visibleColumnCount}, 1fr)` }}
84	>
85	{visibleColumns.trip && (
86	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-16"></div>
87	)}
88	{visibleColumns.date && (
89	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-12"></div>
90	)}
91	{visibleColumns.time && (
92	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-12"></div>
93	)}
94	{visibleColumns.capacity && (
95	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-16"></div>
96	)}
97	{visibleColumns.booked && (
98	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-14"></div>
99	)}
100	{visibleColumns.available && (
101	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-16"></div>
102	)}
103	{visibleColumns.revenue && (
104	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-16"></div>
105	)}
106	{visibleColumns.travelers && (
107	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-18"></div>
108	)}
109	{visibleColumns.bookings && (
110	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-16"></div>
111	)}
112	{visibleColumns.status && (
113	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-14"></div>
114	)}
115	{visibleColumns.source && (
116	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-14"></div>
117	)}
118	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-16"></div>{" "}
119	{/* Actions */}
120	</div>
121
122	{/* Table Rows */}
123	<div className="space-y-4">
124	{Array.from({ length: 5 }).map((_, rowIndex) => (
125	<div
126	key={rowIndex}
127	className="grid gap-4"
128	style={{
129	gridTemplateColumns: `repeat(${visibleColumnCount}, 1fr)`,
130	}}
131	>
132	{visibleColumns.trip && (
133	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-32"></div>
134	)}
135	{visibleColumns.date && (
136	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-24"></div>
137	)}
138	{visibleColumns.time && (
139	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-16"></div>
140	)}
141	{visibleColumns.capacity && (
142	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-8"></div>
143	)}
144	{visibleColumns.booked && (
145	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-8"></div>
146	)}
147	{visibleColumns.available && (
148	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-8"></div>
149	)}
150	{visibleColumns.revenue && (
151	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-20"></div>
152	)}
153	{visibleColumns.travelers && (
154	<div className="h-6 bg-gray-200 dark:bg-gray-700 rounded w-24"></div>
155	)}
156	{visibleColumns.bookings && (
157	<div className="flex gap-1">
158	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-8"></div>
159	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-8"></div>
160	</div>
161	)}
162	{visibleColumns.status && (
163	<div className="h-6 bg-gray-200 dark:bg-gray-700 rounded w-16"></div>
164	)}
165	{visibleColumns.source && (
166	<div className="h-6 bg-gray-200 dark:bg-gray-700 rounded w-20"></div>
167	)}
168	<div className="flex gap-2">
169	<div className="h-8 w-8 bg-gray-200 dark:bg-gray-700 rounded"></div>
170	<div className="h-8 w-8 bg-gray-200 dark:bg-gray-700 rounded"></div>
171	</div>
172	</div>
173	))}
174	</div>
175	</div>
176	);
177	};
178