yatra / resources / js / components / itinerary / ItineraryFormSkeleton.tsx

ItineraryFormSkeleton.tsx in Yatra – Travel Booking & Tour Operator Software 3.0.13, at resources/js/components/itinerary/ItineraryFormSkeleton.tsx

109 lines 4.6 KB

Raw Download Zip

1	/**
2	* Skeleton Loader for ItineraryForm
3	* Shows a skeleton UI while the form data is loading
4	*/
5
6	import React from "react";
7	import { Card, CardContent, CardHeader } from "../ui/card";
8
9	export const ItineraryFormSkeleton: React.FC = () => {
10	return (
11	<div className="space-y-3">
12	{/* Header Skeleton */}
13	<div className="animate-pulse">
14	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded w-1/3 mb-2"></div>
15	<div className="h-6 bg-gray-200 dark:bg-gray-700 rounded w-1/2 mb-6"></div>
16	</div>
17
18	{/* Form Skeleton */}
19	<div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
20	<div className="lg:col-span-2 space-y-3">
21	{/* Day Information Card Skeleton */}
22	<Card>
23	<CardHeader className="pb-2">
24	<div className="h-6 bg-gray-200 dark:bg-gray-700 rounded w-1/4"></div>
25	</CardHeader>
26	<CardContent className="space-y-3">
27	<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
28	<div className="space-y-2">
29	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/4"></div>
30	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
31	</div>
32	<div className="space-y-2">
33	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/4"></div>
34	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
35	</div>
36	</div>
37	<div className="space-y-2">
38	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/3"></div>
39	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
40	</div>
41	</CardContent>
42	</Card>
43
44	{/* Activity Form Card Skeleton */}
45	<Card>
46	<CardHeader className="pb-2">
47	<div className="h-6 bg-gray-200 dark:bg-gray-700 rounded w-1/4"></div>
48	</CardHeader>
49	<CardContent className="space-y-4">
50	<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
51	<div className="space-y-2">
52	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/3"></div>
53	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
54	</div>
55	<div className="space-y-2">
56	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/3"></div>
57	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
58	</div>
59	</div>
60	<div className="space-y-2">
61	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/4"></div>
62	<div className="h-24 bg-gray-200 dark:bg-gray-700 rounded"></div>
63	</div>
64	<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
65	<div className="space-y-2">
66	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2"></div>
67	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
68	</div>
69	<div className="space-y-2">
70	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2"></div>
71	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
72	</div>
73	<div className="space-y-2">
74	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2"></div>
75	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
76	</div>
77	</div>
78	</CardContent>
79	</Card>
80	</div>
81
82	{/* Sidebar Skeleton */}
83	<div className="space-y-3">
84	<Card>
85	<CardHeader className="pb-2">
86	<div className="h-6 bg-gray-200 dark:bg-gray-700 rounded w-1/3"></div>
87	</CardHeader>
88	<CardContent className="space-y-3">
89	<div className="space-y-2">
90	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2"></div>
91	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
92	</div>
93	</CardContent>
94	</Card>
95
96	<Card>
97	<CardContent className="p-3">
98	<div className="space-y-2">
99	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
100	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded w-1/2"></div>
101	</div>
102	</CardContent>
103	</Card>
104	</div>
105	</div>
106	</div>
107	);
108	};
109