yatra / resources / js / components / availability / AvailabilityFormSkeleton.tsx

AvailabilityFormSkeleton.tsx in Yatra – Travel Booking & Tour Operator Software 3.0.16, at resources/js/components/availability/AvailabilityFormSkeleton.tsx

142 lines 6.4 KB

Raw Download Zip

1	/**
2	* Skeleton Loader for AvailabilityForm
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 AvailabilityFormSkeleton: React.FC = () => {
10	return (
11	<div className="space-y-6">
12	{/* Header Skeleton */}
13	<div className="animate-pulse">
14	<div className="flex items-center justify-between mb-4">
15	<div>
16	<div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-56 mb-2"></div>
17	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-80"></div>
18	</div>
19	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded w-24"></div>
20	</div>
21	</div>
22
23	{/* Form Skeleton */}
24	<div className="space-y-6 animate-pulse">
25	{/* Date Information Card */}
26	<Card>
27	<CardHeader>
28	<div className="h-6 bg-gray-200 dark:bg-gray-700 rounded w-36 mb-2"></div>
29	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-72"></div>
30	</CardHeader>
31	<CardContent className="space-y-4">
32	{/* Date Pickers */}
33	<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
34	<div className="space-y-2">
35	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-32"></div>
36	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
37	</div>
38	<div className="space-y-2">
39	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-28"></div>
40	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
41	</div>
42	</div>
43
44	{/* Location Fields */}
45	<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
46	<div className="space-y-2">
47	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-28"></div>
48	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
49	<div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-52"></div>
50	</div>
51	<div className="space-y-2">
52	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-24"></div>
53	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
54	<div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-52"></div>
55	</div>
56	</div>
57	</CardContent>
58	</Card>
59
60	{/* Pricing & Availability Card */}
61	<Card>
62	<CardHeader>
63	<div className="h-6 bg-gray-200 dark:bg-gray-700 rounded w-44 mb-2"></div>
64	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-96"></div>
65	</CardHeader>
66	<CardContent className="space-y-4">
67	{/* Pricing Type Info Box */}
68	<div className="p-4 bg-gray-100 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 rounded-lg">
69	<div className="flex items-center gap-3">
70	<div className="h-9 w-9 bg-gray-200 dark:bg-gray-700 rounded-full"></div>
71	<div className="flex-1">
72	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-36 mb-2"></div>
73	<div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-80"></div>
74	</div>
75	</div>
76	</div>
77
78	{/* Price Fields */}
79	<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
80	<div className="space-y-2">
81	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-28"></div>
82	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
83	</div>
84	<div className="space-y-2">
85	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-40"></div>
86	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
87	</div>
88	</div>
89
90	{/* Inventory Management Section */}
91	<div className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
92	<div className="h-5 bg-gray-200 dark:bg-gray-700 rounded w-44 mb-4"></div>
93	<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
94	<div className="space-y-2">
95	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-28"></div>
96	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
97	<div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-56"></div>
98	</div>
99	<div className="space-y-2">
100	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-28"></div>
101	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
102	<div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-44"></div>
103	</div>
104	<div className="space-y-2">
105	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-32"></div>
106	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
107	<div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-64"></div>
108	</div>
109	</div>
110	</div>
111
112	{/* Block Date Section */}
113	<div className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
114	<div className="flex items-center justify-between mb-4">
115	<div className="h-5 bg-gray-200 dark:bg-gray-700 rounded w-24"></div>
116	<div className="flex items-center gap-2">
117	<div className="h-4 w-4 bg-gray-200 dark:bg-gray-700 rounded"></div>
118	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-44"></div>
119	</div>
120	</div>
121	</div>
122
123	{/* Status Field */}
124	<div className="mt-4">
125	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-14 mb-2"></div>
126	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
127	</div>
128	</CardContent>
129	</Card>
130
131	{/* Action Buttons */}
132	<div className="flex items-center justify-end gap-4">
133	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded w-24"></div>
134	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded w-36"></div>
135	</div>
136	</div>
137	</div>
138	);
139	};
140
141	export default AvailabilityFormSkeleton;
142