@abcagency/hc-ui-components 1.7.1 → 1.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2,8 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import Grid from '../grid.js';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
6
|
-
*
|
|
5
|
+
* Simple skeleton component that renders the basic structure
|
|
6
|
+
* Shows placeholder boxes for filters, list, and map
|
|
7
7
|
*/
|
|
8
8
|
var MapSkeleton = function MapSkeleton(_ref) {
|
|
9
9
|
var _ref$hideFilters = _ref.hideFilters,
|
|
@@ -26,171 +26,24 @@ var MapSkeleton = function MapSkeleton(_ref) {
|
|
|
26
26
|
columns: hideFilters ? 'hc-grid-cols-1' : 'md:hc-grid-cols-[1fr_2.5fr] lg:hc-grid-cols-[1fr_3.5fr]',
|
|
27
27
|
gap: "hc-gap-0",
|
|
28
28
|
autoRows: false,
|
|
29
|
-
className: 'hc-items-stretch hc-divide-x hc-divide-
|
|
29
|
+
className: 'hc-items-stretch hc-divide-x hc-divide-uiAccent/20'
|
|
30
30
|
}, !hideFilters && /*#__PURE__*/React.createElement(Grid.Item, {
|
|
31
|
-
className: "hc-bg-gray-
|
|
32
|
-
}, /*#__PURE__*/React.createElement(
|
|
33
|
-
className: "hc-bg-white"
|
|
34
|
-
}, /*#__PURE__*/React.createElement(MapListSkeleton, {
|
|
35
|
-
showMap: showMap,
|
|
36
|
-
isMapOnTop: isMapOnTop
|
|
37
|
-
}))));
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
/**
|
|
41
|
-
* Skeleton for the filter section
|
|
42
|
-
*/
|
|
43
|
-
var FilterSkeleton = function FilterSkeleton() {
|
|
44
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
45
|
-
className: "hc-p-4 hc-space-y-4 hc-h-full hc-hidden md:hc-block hc-overflow-auto"
|
|
46
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
47
|
-
className: "hc-h-10 hc-bg-gray-200 hc-rounded-md hc-animate-pulse"
|
|
48
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
49
|
-
className: "hc-h-10 hc-bg-gray-200 hc-rounded-md hc-animate-pulse hc-mb-4"
|
|
50
|
-
}), [1, 2, 3, 4, 5].map(function (i) {
|
|
51
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
52
|
-
key: i,
|
|
53
|
-
className: "hc-space-y-2 hc-pb-3 hc-border-b hc-border-gray-200 last:hc-border-0"
|
|
54
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
55
|
-
className: "hc-h-8 hc-bg-gray-300 hc-rounded hc-animate-pulse",
|
|
56
|
-
style: {
|
|
57
|
-
width: '60%'
|
|
58
|
-
}
|
|
59
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
60
|
-
className: "hc-space-y-1.5 hc-pl-2 hc-pt-1"
|
|
61
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
62
|
-
className: "hc-h-5 hc-bg-gray-200 hc-rounded hc-animate-pulse",
|
|
63
|
-
style: {
|
|
64
|
-
width: '90%'
|
|
65
|
-
}
|
|
66
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
67
|
-
className: "hc-h-5 hc-bg-gray-200 hc-rounded hc-animate-pulse",
|
|
68
|
-
style: {
|
|
69
|
-
width: '85%'
|
|
70
|
-
}
|
|
71
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
72
|
-
className: "hc-h-5 hc-bg-gray-200 hc-rounded hc-animate-pulse",
|
|
73
|
-
style: {
|
|
74
|
-
width: '75%'
|
|
75
|
-
}
|
|
76
|
-
}), i <= 2 && /*#__PURE__*/React.createElement("div", {
|
|
77
|
-
className: "hc-h-5 hc-bg-gray-200 hc-rounded hc-animate-pulse",
|
|
78
|
-
style: {
|
|
79
|
-
width: '80%'
|
|
80
|
-
}
|
|
81
|
-
})));
|
|
82
|
-
}));
|
|
83
|
-
};
|
|
84
|
-
|
|
85
|
-
/**
|
|
86
|
-
* Skeleton for the map and list section
|
|
87
|
-
*/
|
|
88
|
-
var MapListSkeleton = function MapListSkeleton(_ref2) {
|
|
89
|
-
var showMap = _ref2.showMap,
|
|
90
|
-
isMapOnTop = _ref2.isMapOnTop;
|
|
91
|
-
if (!showMap) {
|
|
92
|
-
// List only view
|
|
93
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
94
|
-
className: "hc-h-full hc-flex hc-flex-col"
|
|
95
|
-
}, /*#__PURE__*/React.createElement(ListSkeleton, null));
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
// Map + List view
|
|
99
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
31
|
+
className: "hc-bg-gray-50 hc-animate-pulse hc-hidden md:hc-block"
|
|
32
|
+
}), /*#__PURE__*/React.createElement(Grid.Item, null, showMap ? /*#__PURE__*/React.createElement("div", {
|
|
100
33
|
className: "hc-h-full hc-flex ".concat(isMapOnTop ? 'hc-flex-col' : 'hc-flex-col md:hc-flex-row')
|
|
101
|
-
}, isMapOnTop ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
102
|
-
className: "hc-flex-1 hc-bg-gray-100 hc-animate-pulse",
|
|
103
|
-
style: {
|
|
104
|
-
minHeight: '300px'
|
|
105
|
-
}
|
|
106
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
107
|
-
className: "hc-h-full hc-flex hc-items-center hc-justify-center"
|
|
108
34
|
}, /*#__PURE__*/React.createElement("div", {
|
|
109
|
-
className: "hc-
|
|
110
|
-
}, /*#__PURE__*/React.createElement("
|
|
111
|
-
className: "hc-
|
|
112
|
-
fill: "none",
|
|
113
|
-
stroke: "currentColor",
|
|
114
|
-
viewBox: "0 0 24 24"
|
|
115
|
-
}, /*#__PURE__*/React.createElement("path", {
|
|
116
|
-
strokeLinecap: "round",
|
|
117
|
-
strokeLinejoin: "round",
|
|
118
|
-
strokeWidth: 2,
|
|
119
|
-
d: "M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"
|
|
120
|
-
}))))), /*#__PURE__*/React.createElement("div", {
|
|
121
|
-
className: "hc-flex-1"
|
|
122
|
-
}, /*#__PURE__*/React.createElement(ListSkeleton, null))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
123
|
-
className: "hc-flex-1 hc-order-2 md:hc-order-1"
|
|
124
|
-
}, /*#__PURE__*/React.createElement(ListSkeleton, null)), /*#__PURE__*/React.createElement("div", {
|
|
125
|
-
className: "hc-flex-1 hc-bg-gray-100 hc-animate-pulse hc-order-1 md:hc-order-2",
|
|
35
|
+
className: "hc-flex-1 hc-bg-white hc-animate-pulse ".concat(isMapOnTop ? 'hc-order-2' : 'hc-order-2 md:hc-order-1')
|
|
36
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
37
|
+
className: "hc-flex-1 hc-bg-gray-100 hc-animate-pulse ".concat(isMapOnTop ? 'hc-order-1' : 'hc-order-1 md:hc-order-2'),
|
|
126
38
|
style: {
|
|
127
39
|
minHeight: '300px'
|
|
128
40
|
}
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
fill: "none",
|
|
136
|
-
stroke: "currentColor",
|
|
137
|
-
viewBox: "0 0 24 24"
|
|
138
|
-
}, /*#__PURE__*/React.createElement("path", {
|
|
139
|
-
strokeLinecap: "round",
|
|
140
|
-
strokeLinejoin: "round",
|
|
141
|
-
strokeWidth: 2,
|
|
142
|
-
d: "M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"
|
|
143
|
-
})))))));
|
|
144
|
-
};
|
|
145
|
-
|
|
146
|
-
/**
|
|
147
|
-
* Skeleton for the list section
|
|
148
|
-
*/
|
|
149
|
-
var ListSkeleton = function ListSkeleton() {
|
|
150
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
151
|
-
className: "hc-h-full hc-flex hc-flex-col hc-bg-white"
|
|
152
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
153
|
-
className: "hc-p-4 hc-border-b hc-border-gray-200 hc-bg-gray-50/50"
|
|
154
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
155
|
-
className: "hc-flex hc-items-center hc-justify-between hc-gap-4"
|
|
156
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
157
|
-
className: "hc-h-5 hc-w-32 hc-bg-gray-200 hc-rounded hc-animate-pulse"
|
|
158
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
159
|
-
className: "hc-h-9 hc-w-48 hc-bg-gray-200 hc-rounded hc-animate-pulse"
|
|
160
|
-
}))), /*#__PURE__*/React.createElement("div", {
|
|
161
|
-
className: "hc-flex-1 hc-overflow-auto hc-p-3 md:hc-p-4 hc-space-y-2"
|
|
162
|
-
}, [1, 2, 3, 4, 5, 6, 7, 8].map(function (i) {
|
|
163
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
164
|
-
key: i,
|
|
165
|
-
className: "hc-border hc-border-gray-200 hc-rounded-lg hc-p-4 hc-space-y-3 hc-bg-white"
|
|
166
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
167
|
-
className: "hc-space-y-2"
|
|
168
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
169
|
-
className: "hc-h-6 hc-bg-gray-300 hc-rounded hc-animate-pulse",
|
|
170
|
-
style: {
|
|
171
|
-
width: "".concat(70 + i % 3 * 10, "%")
|
|
172
|
-
}
|
|
173
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
174
|
-
className: "hc-h-4 hc-bg-gray-200 hc-rounded hc-animate-pulse",
|
|
175
|
-
style: {
|
|
176
|
-
width: "".concat(45 + i % 4 * 8, "%")
|
|
177
|
-
}
|
|
178
|
-
})), /*#__PURE__*/React.createElement("div", {
|
|
179
|
-
className: "hc-flex hc-gap-2 hc-flex-wrap"
|
|
180
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
181
|
-
className: "hc-h-6 hc-w-20 hc-bg-gray-200 hc-rounded-full hc-animate-pulse"
|
|
182
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
183
|
-
className: "hc-h-6 hc-w-24 hc-bg-gray-200 hc-rounded-full hc-animate-pulse"
|
|
184
|
-
}), i % 2 === 0 && /*#__PURE__*/React.createElement("div", {
|
|
185
|
-
className: "hc-h-6 hc-w-16 hc-bg-gray-200 hc-rounded-full hc-animate-pulse"
|
|
186
|
-
})), /*#__PURE__*/React.createElement("div", {
|
|
187
|
-
className: "hc-flex hc-gap-3 hc-items-center"
|
|
188
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
189
|
-
className: "hc-h-4 hc-w-24 hc-bg-gray-200 hc-rounded hc-animate-pulse"
|
|
190
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
191
|
-
className: "hc-h-4 hc-w-28 hc-bg-gray-200 hc-rounded hc-animate-pulse"
|
|
192
|
-
})));
|
|
193
|
-
})));
|
|
41
|
+
})) :
|
|
42
|
+
/*#__PURE__*/
|
|
43
|
+
/* Just List Box */
|
|
44
|
+
React.createElement("div", {
|
|
45
|
+
className: "hc-h-full hc-bg-white hc-animate-pulse"
|
|
46
|
+
}))));
|
|
194
47
|
};
|
|
195
48
|
|
|
196
49
|
export { MapSkeleton as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"map-skeleton.js","sources":["../../../../src/components/modules/skeleton/map-skeleton.js"],"sourcesContent":["import React from 'react';\nimport Grid from '~/components/modules/grid';\n\n/**\n * Skeleton component that renders the map interface structure immediately\n * This provides the layout and size before data/maps are loaded\n */\nconst MapSkeleton = ({ \n\thideFilters = false, \n\tshowMap = true, \n\tcontainerStyle = { height: '100vh' },\n\tmapPosition = 'right'\n}) => {\n\tconst isMapOnTop = mapPosition === 'top';\n\t\n\treturn (\n\t\t<div className=\"hc-bundle\" style={containerStyle}>\n\t\t\t<Grid\n\t\t\t\tas='section'\n\t\t\t\tid='job-search-interface'\n\t\t\t\tcolumns={hideFilters ? 'hc-grid-cols-1' : 'md:hc-grid-cols-[1fr_2.5fr] lg:hc-grid-cols-[1fr_3.5fr]'}\n\t\t\t\tgap='hc-gap-0'\n\t\t\t\tautoRows={false}\n\t\t\t\tclassName={'hc-items-stretch hc-divide-x hc-divide-gray-200'}\n\t\t\t>\n\t\t\t\t{!hideFilters && (\n\t\t\t\t\t<Grid.Item className='hc-bg-gray-100'>\n\t\t\t\t\t\t<FilterSkeleton />\n\t\t\t\t\t</Grid.Item>\n\t\t\t\t)}\n\t\t\t\t<Grid.Item className='hc-bg-white'>\n\t\t\t\t\t<MapListSkeleton showMap={showMap} isMapOnTop={isMapOnTop} />\n\t\t\t\t</Grid.Item>\n\t\t\t</Grid>\n\t\t</div>\n\t);\n};\n\n/**\n * Skeleton for the filter section\n */\nconst FilterSkeleton = () => {\n\treturn (\n\t\t<div className=\"hc-p-4 hc-space-y-4 hc-h-full hc-hidden md:hc-block hc-overflow-auto\">\n\t\t\t{/* Search input skeleton */}\n\t\t\t<div className=\"hc-h-10 hc-bg-gray-200 hc-rounded-md hc-animate-pulse\" />\n\t\t\t\n\t\t\t{/* Commute filter skeleton */}\n\t\t\t<div className=\"hc-h-10 hc-bg-gray-200 hc-rounded-md hc-animate-pulse hc-mb-4\" />\n\t\t\t\n\t\t\t{/* Filter sections skeleton */}\n\t\t\t{[1, 2, 3, 4, 5].map((i) => (\n\t\t\t\t<div key={i} className=\"hc-space-y-2 hc-pb-3 hc-border-b hc-border-gray-200 last:hc-border-0\">\n\t\t\t\t\t<div className=\"hc-h-8 hc-bg-gray-300 hc-rounded hc-animate-pulse\" style={{ width: '60%' }} />\n\t\t\t\t\t<div className=\"hc-space-y-1.5 hc-pl-2 hc-pt-1\">\n\t\t\t\t\t\t<div className=\"hc-h-5 hc-bg-gray-200 hc-rounded hc-animate-pulse\" style={{ width: '90%' }} />\n\t\t\t\t\t\t<div className=\"hc-h-5 hc-bg-gray-200 hc-rounded hc-animate-pulse\" style={{ width: '85%' }} />\n\t\t\t\t\t\t<div className=\"hc-h-5 hc-bg-gray-200 hc-rounded hc-animate-pulse\" style={{ width: '75%' }} />\n\t\t\t\t\t\t{i <= 2 && <div className=\"hc-h-5 hc-bg-gray-200 hc-rounded hc-animate-pulse\" style={{ width: '80%' }} />}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n};\n\n/**\n * Skeleton for the map and list section\n */\nconst MapListSkeleton = ({ showMap, isMapOnTop }) => {\n\tif (!showMap) {\n\t\t// List only view\n\t\treturn (\n\t\t\t<div className=\"hc-h-full hc-flex hc-flex-col\">\n\t\t\t\t<ListSkeleton />\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Map + List view\n\treturn (\n\t\t<div className={`hc-h-full hc-flex ${isMapOnTop ? 'hc-flex-col' : 'hc-flex-col md:hc-flex-row'}`}>\n\t\t\t{isMapOnTop ? (\n\t\t\t\t<>\n\t\t\t\t\t<div className=\"hc-flex-1 hc-bg-gray-100 hc-animate-pulse\" style={{ minHeight: '300px' }}>\n\t\t\t\t\t\t<div className=\"hc-h-full hc-flex hc-items-center hc-justify-center\">\n\t\t\t\t\t\t\t<div className=\"hc-text-gray-400\">\n\t\t\t\t\t\t\t\t<svg className=\"hc-w-12 hc-h-12\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n\t\t\t\t\t\t\t\t\t<path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7\" />\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"hc-flex-1\">\n\t\t\t\t\t\t<ListSkeleton />\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<div className=\"hc-flex-1 hc-order-2 md:hc-order-1\">\n\t\t\t\t\t\t<ListSkeleton />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"hc-flex-1 hc-bg-gray-100 hc-animate-pulse hc-order-1 md:hc-order-2\" style={{ minHeight: '300px' }}>\n\t\t\t\t\t\t<div className=\"hc-h-full hc-flex hc-items-center hc-justify-center\">\n\t\t\t\t\t\t\t<div className=\"hc-text-gray-400\">\n\t\t\t\t\t\t\t\t<svg className=\"hc-w-12 hc-h-12\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n\t\t\t\t\t\t\t\t\t<path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7\" />\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\n/**\n * Skeleton for the list section\n */\nconst ListSkeleton = () => {\n\treturn (\n\t\t<div className=\"hc-h-full hc-flex hc-flex-col hc-bg-white\">\n\t\t\t{/* Header with sort */}\n\t\t\t<div className=\"hc-p-4 hc-border-b hc-border-gray-200 hc-bg-gray-50/50\">\n\t\t\t\t<div className=\"hc-flex hc-items-center hc-justify-between hc-gap-4\">\n\t\t\t\t\t<div className=\"hc-h-5 hc-w-32 hc-bg-gray-200 hc-rounded hc-animate-pulse\" />\n\t\t\t\t\t<div className=\"hc-h-9 hc-w-48 hc-bg-gray-200 hc-rounded hc-animate-pulse\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t\n\t\t\t{/* List items */}\n\t\t\t<div className=\"hc-flex-1 hc-overflow-auto hc-p-3 md:hc-p-4 hc-space-y-2\">\n\t\t\t\t{[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (\n\t\t\t\t\t<div key={i} className=\"hc-border hc-border-gray-200 hc-rounded-lg hc-p-4 hc-space-y-3 hc-bg-white\">\n\t\t\t\t\t\t{/* Title and company */}\n\t\t\t\t\t\t<div className=\"hc-space-y-2\">\n\t\t\t\t\t\t\t<div className=\"hc-h-6 hc-bg-gray-300 hc-rounded hc-animate-pulse\" style={{ width: `${70 + (i % 3) * 10}%` }} />\n\t\t\t\t\t\t\t<div className=\"hc-h-4 hc-bg-gray-200 hc-rounded hc-animate-pulse\" style={{ width: `${45 + (i % 4) * 8}%` }} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\n\t\t\t\t\t\t{/* Tags/badges */}\n\t\t\t\t\t\t<div className=\"hc-flex hc-gap-2 hc-flex-wrap\">\n\t\t\t\t\t\t\t<div className=\"hc-h-6 hc-w-20 hc-bg-gray-200 hc-rounded-full hc-animate-pulse\" />\n\t\t\t\t\t\t\t<div className=\"hc-h-6 hc-w-24 hc-bg-gray-200 hc-rounded-full hc-animate-pulse\" />\n\t\t\t\t\t\t\t{i % 2 === 0 && <div className=\"hc-h-6 hc-w-16 hc-bg-gray-200 hc-rounded-full hc-animate-pulse\" />}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\n\t\t\t\t\t\t{/* Additional info */}\n\t\t\t\t\t\t<div className=\"hc-flex hc-gap-3 hc-items-center\">\n\t\t\t\t\t\t\t<div className=\"hc-h-4 hc-w-24 hc-bg-gray-200 hc-rounded hc-animate-pulse\" />\n\t\t\t\t\t\t\t<div className=\"hc-h-4 hc-w-28 hc-bg-gray-200 hc-rounded hc-animate-pulse\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default MapSkeleton;\n"],"names":["MapSkeleton","_ref","_ref$hideFilters","hideFilters","_ref$showMap","showMap","_ref$containerStyle","containerStyle","height","_ref$mapPosition","mapPosition","isMapOnTop","React","createElement","className","style","Grid","as","id","columns","gap","autoRows","Item","FilterSkeleton","MapListSkeleton","map","i","key","width","_ref2","ListSkeleton","concat","Fragment","minHeight","fill","stroke","viewBox","strokeLinecap","strokeLinejoin","strokeWidth","d"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"map-skeleton.js","sources":["../../../../src/components/modules/skeleton/map-skeleton.js"],"sourcesContent":["import React from 'react';\nimport Grid from '~/components/modules/grid';\n\n/**\n * Simple skeleton component that renders the basic structure\n * Shows placeholder boxes for filters, list, and map\n */\nconst MapSkeleton = ({ \n\thideFilters = false, \n\tshowMap = true, \n\tcontainerStyle = { height: '100vh' },\n\tmapPosition = 'right'\n}) => {\n\tconst isMapOnTop = mapPosition === 'top';\n\t\n\treturn (\n\t\t<div className=\"hc-bundle\" style={containerStyle}>\n\t\t\t<Grid\n\t\t\t\tas='section'\n\t\t\t\tid='job-search-interface'\n\t\t\t\tcolumns={hideFilters ? 'hc-grid-cols-1' : 'md:hc-grid-cols-[1fr_2.5fr] lg:hc-grid-cols-[1fr_3.5fr]'}\n\t\t\t\tgap='hc-gap-0'\n\t\t\t\tautoRows={false}\n\t\t\t\tclassName={'hc-items-stretch hc-divide-x hc-divide-uiAccent/20'}\n\t\t\t>\n\t\t\t\t{/* Filter Column */}\n\t\t\t\t{!hideFilters && (\n\t\t\t\t\t<Grid.Item className='hc-bg-gray-50 hc-animate-pulse hc-hidden md:hc-block' />\n\t\t\t\t)}\n\t\t\t\t\n\t\t\t\t{/* Main Content Area */}\n\t\t\t\t<Grid.Item>\n\t\t\t\t\t{showMap ? (\n\t\t\t\t\t\t<div className={`hc-h-full hc-flex ${isMapOnTop ? 'hc-flex-col' : 'hc-flex-col md:hc-flex-row'}`}>\n\t\t\t\t\t\t\t{/* List Box */}\n\t\t\t\t\t\t\t<div className={`hc-flex-1 hc-bg-white hc-animate-pulse ${isMapOnTop ? 'hc-order-2' : 'hc-order-2 md:hc-order-1'}`} />\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t{/* Map Box */}\n\t\t\t\t\t\t\t<div className={`hc-flex-1 hc-bg-gray-100 hc-animate-pulse ${isMapOnTop ? 'hc-order-1' : 'hc-order-1 md:hc-order-2'}`} style={{ minHeight: '300px' }} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t/* Just List Box */\n\t\t\t\t\t\t<div className=\"hc-h-full hc-bg-white hc-animate-pulse\" />\n\t\t\t\t\t)}\n\t\t\t\t</Grid.Item>\n\t\t\t</Grid>\n\t\t</div>\n\t);\n};\n\nexport default MapSkeleton;\n"],"names":["MapSkeleton","_ref","_ref$hideFilters","hideFilters","_ref$showMap","showMap","_ref$containerStyle","containerStyle","height","_ref$mapPosition","mapPosition","isMapOnTop","React","createElement","className","style","Grid","as","id","columns","gap","autoRows","Item","concat","minHeight"],"mappings":";;;AAGA;AACA;AACA;AACA;AACA,IAAMA,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAKX;AAAA,EAAA,IAAAC,gBAAA,GAAAD,IAAA,CAJLE,WAAW;AAAXA,IAAAA,WAAW,GAAAD,gBAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,gBAAA;IAAAE,YAAA,GAAAH,IAAA,CACnBI,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAA,MAAA,GAAG,IAAI,GAAAA,YAAA;IAAAE,mBAAA,GAAAL,IAAA,CACdM,cAAc;IAAdA,cAAc,GAAAD,mBAAA,KAAA,MAAA,GAAG;AAAEE,MAAAA,MAAM,EAAE;AAAQ,KAAC,GAAAF,mBAAA;IAAAG,gBAAA,GAAAR,IAAA,CACpCS,WAAW;AAAXA,IAAAA,WAAW,GAAAD,gBAAA,KAAA,MAAA,GAAG,OAAO,GAAAA,gBAAA;AAErB,EAAA,IAAME,UAAU,GAAGD,WAAW,KAAK,KAAK;EAExC,oBACCE,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,WAAW;AAACC,IAAAA,KAAK,EAAER;AAAe,GAAA,eAChDK,KAAA,CAAAC,aAAA,CAACG,IAAI,EAAA;AACJC,IAAAA,EAAE,EAAC,SAAS;AACZC,IAAAA,EAAE,EAAC,sBAAsB;AACzBC,IAAAA,OAAO,EAAEhB,WAAW,GAAG,gBAAgB,GAAG,yDAA0D;AACpGiB,IAAAA,GAAG,EAAC,UAAU;AACdC,IAAAA,QAAQ,EAAE,KAAM;AAChBP,IAAAA,SAAS,EAAE;GAAqD,EAG/D,CAACX,WAAW,iBACZS,KAAA,CAAAC,aAAA,CAACG,IAAI,CAACM,IAAI,EAAA;AAACR,IAAAA,SAAS,EAAC;AAAsD,GAAE,CAC7E,eAGDF,KAAA,CAAAC,aAAA,CAACG,IAAI,CAACM,IAAI,EAAA,IAAA,EACRjB,OAAO,gBACPO,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,uBAAAS,MAAA,CAAuBZ,UAAU,GAAG,aAAa,GAAG,4BAA4B;GAAG,eAEhGC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,4CAAAS,MAAA,CAA4CZ,UAAU,GAAG,YAAY,GAAG,0BAA0B;AAAG,GAAE,CAAC,eAGtHC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKC,SAAS,EAAA,4CAAA,CAAAS,MAAA,CAA+CZ,UAAU,GAAG,YAAY,GAAG,0BAA0B,CAAG;AAACI,IAAAA,KAAK,EAAE;AAAES,MAAAA,SAAS,EAAE;AAAQ;AAAE,GAAE,CACnJ,CAAC;AAAA;AAEN;AACAZ,EAAAA,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC;GAA0C,CAEhD,CACN,CACF,CAAC;AAER;;;;"}
|
package/dist/styles/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.hc-sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.hc-pointer-events-none{pointer-events:none}.hc-invisible{visibility:hidden}.hc-fixed{position:fixed}.hc-absolute{position:absolute}.hc-relative{position:relative}.hc-sticky{position:sticky}.hc-inset-0{bottom:0;left:0;right:0;top:0}.hc-bottom-0{bottom:0}.hc-bottom-10{bottom:2.5rem}.hc-left-0{left:0}.hc-left-2\.5{left:.625rem}.hc-right-0{right:0}.hc-right-\[10px\]{right:10px}.hc-top-0{top:0}.hc-top-1\.5{top:.375rem}.hc-top-\[10px\]{top:10px}.hc-z-10{z-index:10}.hc-z-20{z-index:20}.hc-z-50{z-index:50}.hc-z-\[200\]{z-index:200}.hc-z-\[2\]{z-index:2}.hc-order-1{order:1}.hc-order-2{order:2}.hc-order-first{order:-9999}.hc-order-last{order:9999}.hc-col-span-1{grid-column:span 1/span 1}.hc-col-span-2{grid-column:span 2/span 2}.hc-col-span-4{grid-column:span 4/span 4}.hc-float-right{float:right}.hc-m-auto{margin:auto}.hc-my-1{margin-bottom:.25rem;margin-top:.25rem}.hc-mb-2{margin-bottom:.5rem}.hc-mb-3{margin-bottom:.75rem}.hc-mb-4{margin-bottom:1rem}.hc-mb-5{margin-bottom:1.25rem}.hc-ml-auto{margin-left:auto}.hc-mr-1\.5{margin-right:.375rem}.hc-mr-2{margin-right:.5rem}.hc-mt-1{margin-top:.25rem}.hc-mt-2{margin-top:.5rem}.hc-mt-4{margin-top:1rem}.hc-mt-6{margin-top:1.5rem}.hc-mt-px{margin-top:1px}.hc-block{display:block}.hc-inline-block{display:inline-block}.hc-inline{display:inline}.hc-flex{display:flex}.hc-inline-flex{display:inline-flex}.hc-grid{display:grid}.hc-hidden{display:none}.hc-size-2\.5{height:.625rem;width:.625rem}.hc-size-3\.5{height:.875rem;width:.875rem}.hc-size-4{height:1rem;width:1rem}.hc-size-5{height:1.25rem;width:1.25rem}.hc-size-8{height:2rem;width:2rem}.hc-h-10{height:2.5rem}.hc-h-12{height:3rem}.hc-h-4{height:1rem}.hc-h-5{height:1.25rem}.hc-h-6{height:1.5rem}.hc-h-8{height:2rem}.hc-h-9{height:2.25rem}.hc-h-\[100vh\]{height:100vh}.hc-h-\[25px\]{height:25px}.hc-h-\[calc\(100vh-180px\)\]{height:calc(100vh - 180px)}.hc-h-auto{height:auto}.hc-h-fit{height:-moz-fit-content;height:fit-content}.hc-h-full{height:100%}.hc-max-h-60{max-height:15rem}.hc-max-h-\[20vh\]{max-height:20vh}.hc-max-h-\[85vh\]{max-height:85vh}.hc-max-h-\[calc\(100vh-158px\)\]{max-height:calc(100vh - 158px)}.hc-max-h-full{max-height:100%}.hc-w-12{width:3rem}.hc-w-16{width:4rem}.hc-w-2\/5{width:40%}.hc-w-20{width:5rem}.hc-w-24{width:6rem}.hc-w-28{width:7rem}.hc-w-32{width:8rem}.hc-w-48{width:12rem}.hc-w-8{width:2rem}.hc-w-\[25px\]{width:25px}.hc-w-\[90vw\]{width:90vw}.hc-w-full{width:100%}.hc-min-w-\[100\%\]{min-width:100%}.hc-max-w-\[450px\]{max-width:450px}.hc-flex-1{flex:1 1 0%}.hc-flex-auto{flex:1 1 auto}.hc-shrink-0{flex-shrink:0}.hc-flex-grow,.hc-grow{flex-grow:1}.hc-rotate-45{--tw-rotate:45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(45deg) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes hc-contentShow{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.hc-animate-contentShow{animation:hc-contentShow .15s cubic-bezier(.16,1,.3,1)}@keyframes hc-overlayShow{0%{opacity:0}to{opacity:1}}.hc-animate-overlayShow{animation:hc-overlayShow .15s cubic-bezier(.16,1,.3,1)}@keyframes hc-pulse{50%{opacity:.5}}.hc-animate-pulse{animation:hc-pulse 2s cubic-bezier(.4,0,.6,1) infinite}.hc-cursor-default{cursor:default}.hc-cursor-not-allowed{cursor:not-allowed}.hc-cursor-pointer{cursor:pointer}.hc-select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.hc-auto-cols-fr{grid-auto-columns:minmax(0,1fr)}.hc-grid-flow-col{grid-auto-flow:column}.hc-auto-rows-min{grid-auto-rows:min-content}.hc-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.hc-flex-row{flex-direction:row}.hc-flex-col{flex-direction:column}.hc-flex-wrap{flex-wrap:wrap}.hc-items-start{align-items:flex-start}.hc-items-center{align-items:center}.hc-items-stretch{align-items:stretch}.hc-justify-end{justify-content:flex-end}.hc-justify-center{justify-content:center}.hc-justify-between{justify-content:space-between}.hc-gap-0{gap:0}.hc-gap-1\.5{gap:.375rem}.hc-gap-12{gap:3rem}.hc-gap-2{gap:.5rem}.hc-gap-3{gap:.75rem}.hc-gap-4{gap:1rem}.hc-gap-px{gap:1px}.hc-gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.hc-space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:1rem;margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)));margin-right:0;margin-right:calc(1rem*var(--tw-space-x-reverse))}.hc-space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:0;margin-bottom:calc(.375rem*var(--tw-space-y-reverse));margin-top:.375rem;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)))}.hc-space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:0;margin-bottom:calc(.5rem*var(--tw-space-y-reverse));margin-top:.5rem;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))}.hc-space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:0;margin-bottom:calc(.75rem*var(--tw-space-y-reverse));margin-top:.75rem;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)))}.hc-space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:1rem;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.hc-divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-left-width:1px;border-left-width:calc(1px*(1 - var(--tw-divide-x-reverse)));border-right-width:0;border-right-width:calc(1px*var(--tw-divide-x-reverse))}.hc-divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:1px;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.hc-divide-gray-200>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:#e5e7eb;border-color:rgba(229,231,235,var(--tw-divide-opacity,1))}.hc-divide-primary>:not([hidden])~:not([hidden]){border-color:#959595;border-color:var(--primary)}.hc-overflow-auto{overflow:auto}.hc-overflow-hidden{overflow:hidden}.hc-overflow-y-auto{overflow-y:auto}.hc-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hc-text-balance{text-wrap:balance}.hc-break-words{word-wrap:break-word}.hc-rounded{border-radius:.25rem}.hc-rounded-\[6px\]{border-radius:6px}.hc-rounded-full{border-radius:9999px}.hc-rounded-lg{border-radius:.5rem}.hc-rounded-md{border-radius:.375rem}.hc-rounded-none{border-radius:0}.hc-rounded-sm{border-radius:.125rem}.hc-rounded-b{border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.hc-border{border-width:1px}.hc-border-0{border-width:0}.hc-border-x-0{border-left-width:0;border-right-width:0}.hc-border-b{border-bottom-width:1px}.hc-border-b-0{border-bottom-width:0}.hc-border-t{border-top-width:1px}.hc-border-t-0{border-top-width:0}.hc-border-none{border-style:none}.\!hc-border-secondary{border-color:#959595!important;border-color:var(--secondary)!important}.hc-border-gray-100{--tw-border-opacity:1;border-color:#f3f4f6;border-color:rgba(243,244,246,var(--tw-border-opacity,1))}.hc-border-gray-200{--tw-border-opacity:1;border-color:#e5e7eb;border-color:rgba(229,231,235,var(--tw-border-opacity,1))}.hc-border-primary{border-color:#959595;border-color:var(--primary)}.hc-border-secondary{border-color:#959595;border-color:var(--secondary)}.hc-border-transparent{border-color:transparent}.hc-bg-black\/50{background-color:rgba(0,0,0,.5)}.hc-bg-gray-100{--tw-bg-opacity:1;background-color:#f3f4f6;background-color:rgba(243,244,246,var(--tw-bg-opacity,1))}.hc-bg-gray-200{--tw-bg-opacity:1;background-color:#e5e7eb;background-color:rgba(229,231,235,var(--tw-bg-opacity,1))}.hc-bg-gray-300{--tw-bg-opacity:1;background-color:#d1d5db;background-color:rgba(209,213,219,var(--tw-bg-opacity,1))}.hc-bg-gray-50\/50{background-color:rgba(249,250,251,.5)}.hc-bg-primary{background-color:#959595;background-color:var(--primary)}.hc-bg-secondary{background-color:#959595;background-color:var(--secondary)}.hc-bg-transparent{background-color:transparent}.hc-bg-white{--tw-bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--tw-bg-opacity,1))}.hc-bg-clip-border{background-clip:border-box}.hc-object-cover{-o-object-fit:cover;object-fit:cover}.\!hc-p-0{padding:0!important}.\!hc-p-3{padding:.75rem!important}.hc-p-1{padding:.25rem}.hc-p-1\.5{padding:.375rem}.hc-p-2{padding:.5rem}.hc-p-2\.5{padding:.625rem}.hc-p-3{padding:.75rem}.hc-p-4{padding:1rem}.hc-p-\[25px\]{padding:25px}.hc-px-0{padding-left:0;padding-right:0}.hc-px-10{padding-left:2.5rem;padding-right:2.5rem}.hc-px-2{padding-left:.5rem;padding-right:.5rem}.hc-px-3{padding-left:.75rem;padding-right:.75rem}.hc-px-4{padding-left:1rem;padding-right:1rem}.hc-px-6{padding-left:1.5rem;padding-right:1.5rem}.hc-py-0\.5{padding-bottom:.125rem;padding-top:.125rem}.hc-py-1{padding-bottom:.25rem;padding-top:.25rem}.hc-py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.hc-py-2{padding-bottom:.5rem;padding-top:.5rem}.hc-py-4{padding-bottom:1rem;padding-top:1rem}.hc-pb-1{padding-bottom:.25rem}.hc-pb-16{padding-bottom:4rem}.hc-pb-2{padding-bottom:.5rem}.hc-pb-3{padding-bottom:.75rem}.hc-pb-4{padding-bottom:1rem}.hc-pl-1\.5{padding-left:.375rem}.hc-pl-2{padding-left:.5rem}.hc-pl-4{padding-left:1rem}.hc-pl-7{padding-left:1.75rem}.hc-pr-1{padding-right:.25rem}.hc-pr-2{padding-right:.5rem}.hc-pr-3{padding-right:.75rem}.hc-pr-4{padding-right:1rem}.hc-pt-0{padding-top:0}.hc-pt-0\.5{padding-top:.125rem}.hc-pt-1{padding-top:.25rem}.hc-pt-1\.5{padding-top:.375rem}.hc-pt-2{padding-top:.5rem}.hc-pt-20{padding-top:5rem}.hc-text-left{text-align:left}.hc-text-center{text-align:center}.hc-align-middle{vertical-align:middle}.\!hc-font-\[inherit\]{font-family:inherit!important}.hc-text-2xl{font-size:1.5rem;line-height:2rem}.hc-text-\[15px\]{font-size:15px}.hc-text-\[17px\]{font-size:17px}.hc-text-base{font-size:1rem;line-height:1.5rem}.hc-text-lg{font-size:1.125rem;line-height:1.75rem}.hc-text-sm{font-size:.875rem;line-height:1.25rem}.hc-text-xs{font-size:.75rem;line-height:1rem}.hc-font-bold{font-weight:700}.hc-font-medium{font-weight:500}.hc-font-semibold{font-weight:600}.hc-uppercase{text-transform:uppercase}.hc-capitalize{text-transform:capitalize}.hc-normal-case{text-transform:none}.hc-leading-5{line-height:1.25rem}.hc-leading-none{line-height:1}.hc-leading-normal{line-height:1.5}.hc-leading-tight{line-height:1.25}.hc-text-black{--tw-text-opacity:1;color:#000;color:rgba(0,0,0,var(--tw-text-opacity,1))}.hc-text-blue-500{--tw-text-opacity:1;color:#3b82f6;color:rgba(59,130,246,var(--tw-text-opacity,1))}.hc-text-current{color:currentColor}.hc-text-gray-400{--tw-text-opacity:1;color:#9ca3af;color:rgba(156,163,175,var(--tw-text-opacity,1))}.hc-text-gray-500{--tw-text-opacity:1;color:#6b7280;color:rgba(107,114,128,var(--tw-text-opacity,1))}.hc-text-gray-900{--tw-text-opacity:1;color:#111827;color:rgba(17,24,39,var(--tw-text-opacity,1))}.hc-text-inherit{color:inherit}.hc-text-primary{color:#959595;color:var(--primary)}.hc-text-uiAccent{color:#959595;color:var(--ui-accent)}.hc-text-uiText{color:#000;color:var(--ui-text)}.hc-text-white{--tw-text-opacity:1;color:#fff;color:rgba(255,255,255,var(--tw-text-opacity,1))}.hc-opacity-0{opacity:0}.hc-opacity-100{opacity:1}.hc-opacity-30{opacity:.3}.hc-opacity-85{opacity:.85}.hc-shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:0 0 transparent,0 0 transparent,0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.hc-shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:0 0 transparent,0 0 transparent,0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.hc-outline-none{outline:2px solid transparent;outline-offset:2px}.hc-ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 transparent;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent)}.hc-ring-inset{--tw-ring-inset:inset}.hc-transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hc-transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hc-transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hc-transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hc-duration-100{transition-duration:.1s}.hc-duration-200{transition-duration:.2s}.hc-duration-300{transition-duration:.3s}.hc-ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}@keyframes enter{0%{opacity:1;opacity:var(--tw-enter-opacity,1);transform:translateZ(0) scaleX(1) rotate(0);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:1;opacity:var(--tw-exit-opacity,1);transform:translateZ(0) scaleX(1) rotate(0);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.hc-animate-in{--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial;animation-duration:.15s;animation-name:enter}.hc-fade-in{--tw-enter-opacity:0}.hc-slide-in-from-bottom-2{--tw-enter-translate-y:0.5rem}.hc-duration-100{animation-duration:.1s}.hc-duration-200{animation-duration:.2s}.hc-duration-300{animation-duration:.3s}.hc-ease-in{animation-timing-function:cubic-bezier(.4,0,1,1)}.fit-content{height:-moz-fit-content;height:fit-content}:root{--ui-text:#000;--ui-accent:#959595;--primary:#959595;--primary-dark:#959595;--secondary:#959595;--secondary-dark:#959595}.placeholder\:hc-text-gray-400::-moz-placeholder{--tw-text-opacity:1;color:#9ca3af;color:rgba(156,163,175,var(--tw-text-opacity,1))}.placeholder\:hc-text-gray-400::placeholder{--tw-text-opacity:1;color:#9ca3af;color:rgba(156,163,175,var(--tw-text-opacity,1))}.last\:hc-border-0:last-child{border-width:0}.focus-within\:hc-ring-1:focus-within{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 transparent;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent)}.focus-within\:hc-ring-uiAccent:focus-within{--tw-ring-color:var(--ui-accent)}.hover\:hc-border-indigo-300:hover{--tw-border-opacity:1;border-color:#a5b4fc;border-color:rgba(165,180,252,var(--tw-border-opacity,1))}.hover\:hc-border-primaryDark:hover{border-color:#959595;border-color:var(--primary-dark)}.hover\:hc-bg-primaryDark:hover{background-color:#959595;background-color:var(--primary-dark)}.hover\:hc-bg-opacity-70:hover{--tw-bg-opacity:0.7}.hover\:hc-text-gray-500:hover{--tw-text-opacity:1;color:#6b7280;color:rgba(107,114,128,var(--tw-text-opacity,1))}.hover\:hc-text-primary:hover{color:#959595;color:var(--primary)}.hover\:hc-text-uiText:hover{color:#000;color:var(--ui-text)}.hover\:hc-text-white:hover{--tw-text-opacity:1;color:#fff;color:rgba(255,255,255,var(--tw-text-opacity,1))}.hover\:hc-opacity-70:hover{opacity:.7}.hover\:hc-opacity-75:hover{opacity:.75}.hover\:hc-shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:0 0 transparent,0 0 transparent,0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.focus\:hc-border-indigo-300:focus{--tw-border-opacity:1;border-color:#a5b4fc;border-color:rgba(165,180,252,var(--tw-border-opacity,1))}.focus\:hc-border-primaryDark:focus{border-color:#959595;border-color:var(--primary-dark)}.focus\:hc-bg-primaryDark:focus{background-color:#959595;background-color:var(--primary-dark)}.focus\:hc-bg-opacity-70:focus{--tw-bg-opacity:0.7}.focus\:hc-text-primary:focus{color:#959595;color:var(--primary)}.focus\:hc-text-uiText:focus{color:#000;color:var(--ui-text)}.focus\:hc-text-white:focus{--tw-text-opacity:1;color:#fff;color:rgba(255,255,255,var(--tw-text-opacity,1))}.focus\:hc-opacity-70:focus{opacity:.7}.focus\:hc-shadow-xl:focus{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:0 0 transparent,0 0 transparent,0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.focus\:hc-outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:hc-ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 transparent;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent)}.focus-visible\:hc-ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 transparent;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent)}.focus-visible\:hc-ring-uiAccent:focus-visible{--tw-ring-color:var(--ui-accent)}.focus-visible\:hc-ring-opacity-75:focus-visible{--tw-ring-opacity:0.75}.hc-group:active .group-active\:hc-opacity-100,.hc-group:hover .group-hover\:hc-opacity-100{opacity:1}.data-\[disabled\]\:hc-pointer-events-none[data-disabled]{pointer-events:none}@keyframes hc-slideUp{0%{height:var(--radix-accordion-content-height)}to{height:0}}.data-\[state\=closed\]\:hc-animate-slideUp[data-state=closed]{animation:hc-slideUp .3s cubic-bezier(.87,0,.13,1)}@keyframes hc-slideDown{0%{height:0}to{height:var(--radix-accordion-content-height)}}.data-\[state\=open\]\:hc-animate-slideDown[data-state=open]{animation:hc-slideDown .3s cubic-bezier(.87,0,.13,1)}.data-\[state\=open\]\:hc-rounded-b-none[data-state=open]{border-bottom-left-radius:0;border-bottom-right-radius:0}.data-\[state\=open\]\:hc-border-b-transparent[data-state=open]{border-bottom-color:transparent}.data-\[highlighted\]\:hc-bg-primary[data-highlighted],.data-\[state\=active\]\:hc-bg-primary[data-state=active]{background-color:#959595;background-color:var(--primary)}.data-\[disabled\]\:hc-text-gray-500[data-disabled]{--tw-text-opacity:1;color:#6b7280;color:rgba(107,114,128,var(--tw-text-opacity,1))}.data-\[highlighted\]\:hc-text-white[data-highlighted],.data-\[state\=active\]\:hc-text-white[data-state=active]{--tw-text-opacity:1;color:#fff;color:rgba(255,255,255,var(--tw-text-opacity,1))}.data-\[state\=open\]\:hc-text-primary[data-state=open]{color:#959595;color:var(--primary)}.data-\[highlighted\]\:hc-outline-none[data-highlighted]{outline:2px solid transparent;outline-offset:2px}.hc-group[data-state=open] .group-data-\[state\=open\]\:\!hc-rotate-180{--tw-rotate:180deg!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(180deg) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}@media (min-width:640px){.sm\:hc-w-1\/3{width:33.333333%}.sm\:hc-text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:768px){.md\:hc-absolute{position:absolute}.md\:hc-relative{position:relative}.md\:hc-left-1\.5{left:.375rem}.md\:hc-order-1{order:1}.md\:hc-order-2{order:2}.md\:hc-mb-2{margin-bottom:.5rem}.md\:hc-block{display:block}.md\:hc-flex{display:flex}.md\:hc-grid{display:grid}.md\:hc-hidden{display:none}.md\:hc-h-\[calc\(100\%-48px\)\]{height:calc(100% - 48px)}.md\:hc-max-h-\[100\%\]{max-height:100%}.md\:hc-max-h-\[25vh\]{max-height:25vh}.md\:hc-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:hc-grid-cols-\[1fr_2\.5fr\]{grid-template-columns:1fr 2.5fr}.md\:hc-grid-rows-\[100\%\]{grid-template-rows:100%}.md\:hc-grid-rows-\[50\%_50\%\]{grid-template-rows:50% 50%}.md\:hc-flex-row{flex-direction:row}.md\:hc-flex-col{flex-direction:column}.md\:hc-justify-start{justify-content:flex-start}.md\:hc-self-center{align-self:center}.md\:hc-overflow-y-auto{overflow-y:auto}.md\:hc-border-none{border-style:none}.md\:hc-bg-transparent{background-color:transparent}.md\:hc-p-0{padding:0}.md\:hc-p-4{padding:1rem}.md\:hc-px-4{padding-left:1rem;padding-right:1rem}.md\:hc-px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:hc-pb-0{padding-bottom:0}.md\:hc-pb-16{padding-bottom:4rem}.md\:hc-pt-4{padding-top:1rem}.md\:hc-text-sm{font-size:.875rem;line-height:1.25rem}.md\:hc-text-xs{font-size:.75rem;line-height:1rem}}@media (min-width:1024px){.lg\:hc-order-last{order:9999}.lg\:hc-mb-0{margin-bottom:0}.lg\:hc-inline{display:inline}.lg\:hc-w-auto{width:auto}.lg\:hc-grid-cols-\[1fr_3\.5fr\]{grid-template-columns:1fr 3.5fr}.lg\:hc-flex-row{flex-direction:row}.lg\:hc-gap-16{gap:4rem}.lg\:hc-border-none{border-style:none}.lg\:hc-p-0{padding:0}.lg\:hc-px-8{padding-left:2rem;padding-right:2rem}.lg\:hc-pt-2{padding-top:.5rem}.lg\:hc-text-sm{font-size:.875rem;line-height:1.25rem}}
|
|
1
|
+
.hc-sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.hc-pointer-events-none{pointer-events:none}.hc-invisible{visibility:hidden}.hc-fixed{position:fixed}.hc-absolute{position:absolute}.hc-relative{position:relative}.hc-sticky{position:sticky}.hc-inset-0{bottom:0;left:0;right:0;top:0}.hc-bottom-0{bottom:0}.hc-bottom-10{bottom:2.5rem}.hc-left-0{left:0}.hc-left-2\.5{left:.625rem}.hc-right-0{right:0}.hc-right-\[10px\]{right:10px}.hc-top-0{top:0}.hc-top-1\.5{top:.375rem}.hc-top-\[10px\]{top:10px}.hc-z-10{z-index:10}.hc-z-20{z-index:20}.hc-z-50{z-index:50}.hc-z-\[200\]{z-index:200}.hc-z-\[2\]{z-index:2}.hc-order-1{order:1}.hc-order-2{order:2}.hc-order-first{order:-9999}.hc-order-last{order:9999}.hc-col-span-1{grid-column:span 1/span 1}.hc-col-span-2{grid-column:span 2/span 2}.hc-col-span-4{grid-column:span 4/span 4}.hc-float-right{float:right}.hc-m-auto{margin:auto}.hc-my-1{margin-bottom:.25rem;margin-top:.25rem}.hc-mb-2{margin-bottom:.5rem}.hc-mb-3{margin-bottom:.75rem}.hc-mb-5{margin-bottom:1.25rem}.hc-ml-auto{margin-left:auto}.hc-mr-1\.5{margin-right:.375rem}.hc-mr-2{margin-right:.5rem}.hc-mt-1{margin-top:.25rem}.hc-mt-2{margin-top:.5rem}.hc-mt-4{margin-top:1rem}.hc-mt-6{margin-top:1.5rem}.hc-mt-px{margin-top:1px}.hc-block{display:block}.hc-inline-block{display:inline-block}.hc-inline{display:inline}.hc-flex{display:flex}.hc-inline-flex{display:inline-flex}.hc-grid{display:grid}.hc-hidden{display:none}.hc-size-2\.5{height:.625rem;width:.625rem}.hc-size-3\.5{height:.875rem;width:.875rem}.hc-size-4{height:1rem;width:1rem}.hc-size-5{height:1.25rem;width:1.25rem}.hc-size-8{height:2rem;width:2rem}.hc-h-5{height:1.25rem}.hc-h-\[100vh\]{height:100vh}.hc-h-\[25px\]{height:25px}.hc-h-\[calc\(100vh-180px\)\]{height:calc(100vh - 180px)}.hc-h-auto{height:auto}.hc-h-fit{height:-moz-fit-content;height:fit-content}.hc-h-full{height:100%}.hc-max-h-60{max-height:15rem}.hc-max-h-\[20vh\]{max-height:20vh}.hc-max-h-\[85vh\]{max-height:85vh}.hc-max-h-\[calc\(100vh-158px\)\]{max-height:calc(100vh - 158px)}.hc-max-h-full{max-height:100%}.hc-w-2\/5{width:40%}.hc-w-8{width:2rem}.hc-w-\[25px\]{width:25px}.hc-w-\[90vw\]{width:90vw}.hc-w-full{width:100%}.hc-min-w-\[100\%\]{min-width:100%}.hc-max-w-\[450px\]{max-width:450px}.hc-flex-1{flex:1 1 0%}.hc-flex-auto{flex:1 1 auto}.hc-shrink-0{flex-shrink:0}.hc-flex-grow,.hc-grow{flex-grow:1}.hc-rotate-45{--tw-rotate:45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(45deg) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes hc-contentShow{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.hc-animate-contentShow{animation:hc-contentShow .15s cubic-bezier(.16,1,.3,1)}@keyframes hc-overlayShow{0%{opacity:0}to{opacity:1}}.hc-animate-overlayShow{animation:hc-overlayShow .15s cubic-bezier(.16,1,.3,1)}@keyframes hc-pulse{50%{opacity:.5}}.hc-animate-pulse{animation:hc-pulse 2s cubic-bezier(.4,0,.6,1) infinite}.hc-cursor-default{cursor:default}.hc-cursor-not-allowed{cursor:not-allowed}.hc-cursor-pointer{cursor:pointer}.hc-select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.hc-auto-cols-fr{grid-auto-columns:minmax(0,1fr)}.hc-grid-flow-col{grid-auto-flow:column}.hc-auto-rows-min{grid-auto-rows:min-content}.hc-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.hc-flex-row{flex-direction:row}.hc-flex-col{flex-direction:column}.hc-flex-wrap{flex-wrap:wrap}.hc-items-start{align-items:flex-start}.hc-items-center{align-items:center}.hc-items-stretch{align-items:stretch}.hc-justify-end{justify-content:flex-end}.hc-justify-center{justify-content:center}.hc-justify-between{justify-content:space-between}.hc-gap-0{gap:0}.hc-gap-1\.5{gap:.375rem}.hc-gap-12{gap:3rem}.hc-gap-2{gap:.5rem}.hc-gap-4{gap:1rem}.hc-gap-px{gap:1px}.hc-gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.hc-space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:1rem;margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)));margin-right:0;margin-right:calc(1rem*var(--tw-space-x-reverse))}.hc-space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:0;margin-bottom:calc(.5rem*var(--tw-space-y-reverse));margin-top:.5rem;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))}.hc-space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:1rem;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.hc-divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-left-width:1px;border-left-width:calc(1px*(1 - var(--tw-divide-x-reverse)));border-right-width:0;border-right-width:calc(1px*var(--tw-divide-x-reverse))}.hc-divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:1px;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.hc-divide-primary>:not([hidden])~:not([hidden]){border-color:#959595;border-color:var(--primary)}.hc-overflow-auto{overflow:auto}.hc-overflow-hidden{overflow:hidden}.hc-overflow-y-auto{overflow-y:auto}.hc-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hc-text-balance{text-wrap:balance}.hc-break-words{word-wrap:break-word}.hc-rounded{border-radius:.25rem}.hc-rounded-\[6px\]{border-radius:6px}.hc-rounded-full{border-radius:9999px}.hc-rounded-md{border-radius:.375rem}.hc-rounded-none{border-radius:0}.hc-rounded-sm{border-radius:.125rem}.hc-rounded-b{border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.hc-border{border-width:1px}.hc-border-0{border-width:0}.hc-border-x-0{border-left-width:0;border-right-width:0}.hc-border-b{border-bottom-width:1px}.hc-border-b-0{border-bottom-width:0}.hc-border-t{border-top-width:1px}.hc-border-t-0{border-top-width:0}.hc-border-none{border-style:none}.\!hc-border-secondary{border-color:#959595!important;border-color:var(--secondary)!important}.hc-border-gray-100{--tw-border-opacity:1;border-color:#f3f4f6;border-color:rgba(243,244,246,var(--tw-border-opacity,1))}.hc-border-gray-200{--tw-border-opacity:1;border-color:#e5e7eb;border-color:rgba(229,231,235,var(--tw-border-opacity,1))}.hc-border-primary{border-color:#959595;border-color:var(--primary)}.hc-border-secondary{border-color:#959595;border-color:var(--secondary)}.hc-border-transparent{border-color:transparent}.hc-bg-black\/50{background-color:rgba(0,0,0,.5)}.hc-bg-gray-100{--tw-bg-opacity:1;background-color:#f3f4f6;background-color:rgba(243,244,246,var(--tw-bg-opacity,1))}.hc-bg-gray-50{--tw-bg-opacity:1;background-color:#f9fafb;background-color:rgba(249,250,251,var(--tw-bg-opacity,1))}.hc-bg-primary{background-color:#959595;background-color:var(--primary)}.hc-bg-secondary{background-color:#959595;background-color:var(--secondary)}.hc-bg-transparent{background-color:transparent}.hc-bg-white{--tw-bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--tw-bg-opacity,1))}.hc-bg-clip-border{background-clip:border-box}.hc-object-cover{-o-object-fit:cover;object-fit:cover}.\!hc-p-0{padding:0!important}.\!hc-p-3{padding:.75rem!important}.hc-p-1{padding:.25rem}.hc-p-1\.5{padding:.375rem}.hc-p-2{padding:.5rem}.hc-p-2\.5{padding:.625rem}.hc-p-3{padding:.75rem}.hc-p-4{padding:1rem}.hc-p-\[25px\]{padding:25px}.hc-px-0{padding-left:0;padding-right:0}.hc-px-10{padding-left:2.5rem;padding-right:2.5rem}.hc-px-2{padding-left:.5rem;padding-right:.5rem}.hc-px-3{padding-left:.75rem;padding-right:.75rem}.hc-px-4{padding-left:1rem;padding-right:1rem}.hc-px-6{padding-left:1.5rem;padding-right:1.5rem}.hc-py-0\.5{padding-bottom:.125rem;padding-top:.125rem}.hc-py-1{padding-bottom:.25rem;padding-top:.25rem}.hc-py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.hc-py-2{padding-bottom:.5rem;padding-top:.5rem}.hc-py-4{padding-bottom:1rem;padding-top:1rem}.hc-pb-1{padding-bottom:.25rem}.hc-pb-16{padding-bottom:4rem}.hc-pb-2{padding-bottom:.5rem}.hc-pb-4{padding-bottom:1rem}.hc-pl-1\.5{padding-left:.375rem}.hc-pl-2{padding-left:.5rem}.hc-pl-4{padding-left:1rem}.hc-pl-7{padding-left:1.75rem}.hc-pr-1{padding-right:.25rem}.hc-pr-2{padding-right:.5rem}.hc-pr-3{padding-right:.75rem}.hc-pr-4{padding-right:1rem}.hc-pt-0{padding-top:0}.hc-pt-0\.5{padding-top:.125rem}.hc-pt-1\.5{padding-top:.375rem}.hc-pt-2{padding-top:.5rem}.hc-pt-20{padding-top:5rem}.hc-text-left{text-align:left}.hc-text-center{text-align:center}.hc-align-middle{vertical-align:middle}.\!hc-font-\[inherit\]{font-family:inherit!important}.hc-text-2xl{font-size:1.5rem;line-height:2rem}.hc-text-\[15px\]{font-size:15px}.hc-text-\[17px\]{font-size:17px}.hc-text-base{font-size:1rem;line-height:1.5rem}.hc-text-lg{font-size:1.125rem;line-height:1.75rem}.hc-text-sm{font-size:.875rem;line-height:1.25rem}.hc-text-xs{font-size:.75rem;line-height:1rem}.hc-font-bold{font-weight:700}.hc-font-medium{font-weight:500}.hc-font-semibold{font-weight:600}.hc-uppercase{text-transform:uppercase}.hc-capitalize{text-transform:capitalize}.hc-normal-case{text-transform:none}.hc-leading-5{line-height:1.25rem}.hc-leading-none{line-height:1}.hc-leading-normal{line-height:1.5}.hc-leading-tight{line-height:1.25}.hc-text-black{--tw-text-opacity:1;color:#000;color:rgba(0,0,0,var(--tw-text-opacity,1))}.hc-text-blue-500{--tw-text-opacity:1;color:#3b82f6;color:rgba(59,130,246,var(--tw-text-opacity,1))}.hc-text-current{color:currentColor}.hc-text-gray-500{--tw-text-opacity:1;color:#6b7280;color:rgba(107,114,128,var(--tw-text-opacity,1))}.hc-text-gray-900{--tw-text-opacity:1;color:#111827;color:rgba(17,24,39,var(--tw-text-opacity,1))}.hc-text-inherit{color:inherit}.hc-text-primary{color:#959595;color:var(--primary)}.hc-text-uiAccent{color:#959595;color:var(--ui-accent)}.hc-text-uiText{color:#000;color:var(--ui-text)}.hc-text-white{--tw-text-opacity:1;color:#fff;color:rgba(255,255,255,var(--tw-text-opacity,1))}.hc-opacity-0{opacity:0}.hc-opacity-100{opacity:1}.hc-opacity-30{opacity:.3}.hc-opacity-85{opacity:.85}.hc-shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:0 0 transparent,0 0 transparent,0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.hc-shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:0 0 transparent,0 0 transparent,0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.hc-outline-none{outline:2px solid transparent;outline-offset:2px}.hc-ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 transparent;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent)}.hc-ring-inset{--tw-ring-inset:inset}.hc-transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hc-transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hc-transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hc-transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hc-duration-100{transition-duration:.1s}.hc-duration-200{transition-duration:.2s}.hc-duration-300{transition-duration:.3s}.hc-ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}@keyframes enter{0%{opacity:1;opacity:var(--tw-enter-opacity,1);transform:translateZ(0) scaleX(1) rotate(0);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:1;opacity:var(--tw-exit-opacity,1);transform:translateZ(0) scaleX(1) rotate(0);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.hc-animate-in{--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial;animation-duration:.15s;animation-name:enter}.hc-fade-in{--tw-enter-opacity:0}.hc-slide-in-from-bottom-2{--tw-enter-translate-y:0.5rem}.hc-duration-100{animation-duration:.1s}.hc-duration-200{animation-duration:.2s}.hc-duration-300{animation-duration:.3s}.hc-ease-in{animation-timing-function:cubic-bezier(.4,0,1,1)}.fit-content{height:-moz-fit-content;height:fit-content}:root{--ui-text:#000;--ui-accent:#959595;--primary:#959595;--primary-dark:#959595;--secondary:#959595;--secondary-dark:#959595}.placeholder\:hc-text-gray-400::-moz-placeholder{--tw-text-opacity:1;color:#9ca3af;color:rgba(156,163,175,var(--tw-text-opacity,1))}.placeholder\:hc-text-gray-400::placeholder{--tw-text-opacity:1;color:#9ca3af;color:rgba(156,163,175,var(--tw-text-opacity,1))}.focus-within\:hc-ring-1:focus-within{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 transparent;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent)}.focus-within\:hc-ring-uiAccent:focus-within{--tw-ring-color:var(--ui-accent)}.hover\:hc-border-indigo-300:hover{--tw-border-opacity:1;border-color:#a5b4fc;border-color:rgba(165,180,252,var(--tw-border-opacity,1))}.hover\:hc-border-primaryDark:hover{border-color:#959595;border-color:var(--primary-dark)}.hover\:hc-bg-primaryDark:hover{background-color:#959595;background-color:var(--primary-dark)}.hover\:hc-bg-opacity-70:hover{--tw-bg-opacity:0.7}.hover\:hc-text-gray-500:hover{--tw-text-opacity:1;color:#6b7280;color:rgba(107,114,128,var(--tw-text-opacity,1))}.hover\:hc-text-primary:hover{color:#959595;color:var(--primary)}.hover\:hc-text-uiText:hover{color:#000;color:var(--ui-text)}.hover\:hc-text-white:hover{--tw-text-opacity:1;color:#fff;color:rgba(255,255,255,var(--tw-text-opacity,1))}.hover\:hc-opacity-70:hover{opacity:.7}.hover\:hc-opacity-75:hover{opacity:.75}.hover\:hc-shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:0 0 transparent,0 0 transparent,0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.focus\:hc-border-indigo-300:focus{--tw-border-opacity:1;border-color:#a5b4fc;border-color:rgba(165,180,252,var(--tw-border-opacity,1))}.focus\:hc-border-primaryDark:focus{border-color:#959595;border-color:var(--primary-dark)}.focus\:hc-bg-primaryDark:focus{background-color:#959595;background-color:var(--primary-dark)}.focus\:hc-bg-opacity-70:focus{--tw-bg-opacity:0.7}.focus\:hc-text-primary:focus{color:#959595;color:var(--primary)}.focus\:hc-text-uiText:focus{color:#000;color:var(--ui-text)}.focus\:hc-text-white:focus{--tw-text-opacity:1;color:#fff;color:rgba(255,255,255,var(--tw-text-opacity,1))}.focus\:hc-opacity-70:focus{opacity:.7}.focus\:hc-shadow-xl:focus{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:0 0 transparent,0 0 transparent,0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.focus\:hc-outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:hc-ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 transparent;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent)}.focus-visible\:hc-ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 transparent;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent)}.focus-visible\:hc-ring-uiAccent:focus-visible{--tw-ring-color:var(--ui-accent)}.focus-visible\:hc-ring-opacity-75:focus-visible{--tw-ring-opacity:0.75}.hc-group:active .group-active\:hc-opacity-100,.hc-group:hover .group-hover\:hc-opacity-100{opacity:1}.data-\[disabled\]\:hc-pointer-events-none[data-disabled]{pointer-events:none}@keyframes hc-slideUp{0%{height:var(--radix-accordion-content-height)}to{height:0}}.data-\[state\=closed\]\:hc-animate-slideUp[data-state=closed]{animation:hc-slideUp .3s cubic-bezier(.87,0,.13,1)}@keyframes hc-slideDown{0%{height:0}to{height:var(--radix-accordion-content-height)}}.data-\[state\=open\]\:hc-animate-slideDown[data-state=open]{animation:hc-slideDown .3s cubic-bezier(.87,0,.13,1)}.data-\[state\=open\]\:hc-rounded-b-none[data-state=open]{border-bottom-left-radius:0;border-bottom-right-radius:0}.data-\[state\=open\]\:hc-border-b-transparent[data-state=open]{border-bottom-color:transparent}.data-\[highlighted\]\:hc-bg-primary[data-highlighted],.data-\[state\=active\]\:hc-bg-primary[data-state=active]{background-color:#959595;background-color:var(--primary)}.data-\[disabled\]\:hc-text-gray-500[data-disabled]{--tw-text-opacity:1;color:#6b7280;color:rgba(107,114,128,var(--tw-text-opacity,1))}.data-\[highlighted\]\:hc-text-white[data-highlighted],.data-\[state\=active\]\:hc-text-white[data-state=active]{--tw-text-opacity:1;color:#fff;color:rgba(255,255,255,var(--tw-text-opacity,1))}.data-\[state\=open\]\:hc-text-primary[data-state=open]{color:#959595;color:var(--primary)}.data-\[highlighted\]\:hc-outline-none[data-highlighted]{outline:2px solid transparent;outline-offset:2px}.hc-group[data-state=open] .group-data-\[state\=open\]\:\!hc-rotate-180{--tw-rotate:180deg!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(180deg) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}@media (min-width:640px){.sm\:hc-w-1\/3{width:33.333333%}.sm\:hc-text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:768px){.md\:hc-absolute{position:absolute}.md\:hc-relative{position:relative}.md\:hc-left-1\.5{left:.375rem}.md\:hc-order-1{order:1}.md\:hc-order-2{order:2}.md\:hc-mb-2{margin-bottom:.5rem}.md\:hc-block{display:block}.md\:hc-flex{display:flex}.md\:hc-grid{display:grid}.md\:hc-hidden{display:none}.md\:hc-h-\[calc\(100\%-48px\)\]{height:calc(100% - 48px)}.md\:hc-max-h-\[100\%\]{max-height:100%}.md\:hc-max-h-\[25vh\]{max-height:25vh}.md\:hc-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:hc-grid-cols-\[1fr_2\.5fr\]{grid-template-columns:1fr 2.5fr}.md\:hc-grid-rows-\[100\%\]{grid-template-rows:100%}.md\:hc-grid-rows-\[50\%_50\%\]{grid-template-rows:50% 50%}.md\:hc-flex-row{flex-direction:row}.md\:hc-flex-col{flex-direction:column}.md\:hc-justify-start{justify-content:flex-start}.md\:hc-self-center{align-self:center}.md\:hc-overflow-y-auto{overflow-y:auto}.md\:hc-border-none{border-style:none}.md\:hc-bg-transparent{background-color:transparent}.md\:hc-p-0{padding:0}.md\:hc-px-4{padding-left:1rem;padding-right:1rem}.md\:hc-px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:hc-pb-0{padding-bottom:0}.md\:hc-pb-16{padding-bottom:4rem}.md\:hc-pt-4{padding-top:1rem}.md\:hc-text-sm{font-size:.875rem;line-height:1.25rem}.md\:hc-text-xs{font-size:.75rem;line-height:1rem}}@media (min-width:1024px){.lg\:hc-order-last{order:9999}.lg\:hc-mb-0{margin-bottom:0}.lg\:hc-inline{display:inline}.lg\:hc-w-auto{width:auto}.lg\:hc-grid-cols-\[1fr_3\.5fr\]{grid-template-columns:1fr 3.5fr}.lg\:hc-flex-row{flex-direction:row}.lg\:hc-gap-16{gap:4rem}.lg\:hc-border-none{border-style:none}.lg\:hc-p-0{padding:0}.lg\:hc-px-8{padding-left:2rem;padding-right:2rem}.lg\:hc-pt-2{padding-top:.5rem}.lg\:hc-text-sm{font-size:.875rem;line-height:1.25rem}}
|
package/package.json
CHANGED
|
@@ -2,8 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import Grid from '~/components/modules/grid';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
6
|
-
*
|
|
5
|
+
* Simple skeleton component that renders the basic structure
|
|
6
|
+
* Shows placeholder boxes for filters, list, and map
|
|
7
7
|
*/
|
|
8
8
|
const MapSkeleton = ({
|
|
9
9
|
hideFilters = false,
|
|
@@ -21,141 +21,31 @@ const MapSkeleton = ({
|
|
|
21
21
|
columns={hideFilters ? 'hc-grid-cols-1' : 'md:hc-grid-cols-[1fr_2.5fr] lg:hc-grid-cols-[1fr_3.5fr]'}
|
|
22
22
|
gap='hc-gap-0'
|
|
23
23
|
autoRows={false}
|
|
24
|
-
className={'hc-items-stretch hc-divide-x hc-divide-
|
|
24
|
+
className={'hc-items-stretch hc-divide-x hc-divide-uiAccent/20'}
|
|
25
25
|
>
|
|
26
|
+
{/* Filter Column */}
|
|
26
27
|
{!hideFilters && (
|
|
27
|
-
<Grid.Item className='hc-bg-gray-
|
|
28
|
-
<FilterSkeleton />
|
|
29
|
-
</Grid.Item>
|
|
28
|
+
<Grid.Item className='hc-bg-gray-50 hc-animate-pulse hc-hidden md:hc-block' />
|
|
30
29
|
)}
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
|
|
31
|
+
{/* Main Content Area */}
|
|
32
|
+
<Grid.Item>
|
|
33
|
+
{showMap ? (
|
|
34
|
+
<div className={`hc-h-full hc-flex ${isMapOnTop ? 'hc-flex-col' : 'hc-flex-col md:hc-flex-row'}`}>
|
|
35
|
+
{/* List Box */}
|
|
36
|
+
<div className={`hc-flex-1 hc-bg-white hc-animate-pulse ${isMapOnTop ? 'hc-order-2' : 'hc-order-2 md:hc-order-1'}`} />
|
|
37
|
+
|
|
38
|
+
{/* Map Box */}
|
|
39
|
+
<div className={`hc-flex-1 hc-bg-gray-100 hc-animate-pulse ${isMapOnTop ? 'hc-order-1' : 'hc-order-1 md:hc-order-2'}`} style={{ minHeight: '300px' }} />
|
|
40
|
+
</div>
|
|
41
|
+
) : (
|
|
42
|
+
/* Just List Box */
|
|
43
|
+
<div className="hc-h-full hc-bg-white hc-animate-pulse" />
|
|
44
|
+
)}
|
|
33
45
|
</Grid.Item>
|
|
34
46
|
</Grid>
|
|
35
47
|
</div>
|
|
36
48
|
);
|
|
37
49
|
};
|
|
38
50
|
|
|
39
|
-
/**
|
|
40
|
-
* Skeleton for the filter section
|
|
41
|
-
*/
|
|
42
|
-
const FilterSkeleton = () => {
|
|
43
|
-
return (
|
|
44
|
-
<div className="hc-p-4 hc-space-y-4 hc-h-full hc-hidden md:hc-block hc-overflow-auto">
|
|
45
|
-
{/* Search input skeleton */}
|
|
46
|
-
<div className="hc-h-10 hc-bg-gray-200 hc-rounded-md hc-animate-pulse" />
|
|
47
|
-
|
|
48
|
-
{/* Commute filter skeleton */}
|
|
49
|
-
<div className="hc-h-10 hc-bg-gray-200 hc-rounded-md hc-animate-pulse hc-mb-4" />
|
|
50
|
-
|
|
51
|
-
{/* Filter sections skeleton */}
|
|
52
|
-
{[1, 2, 3, 4, 5].map((i) => (
|
|
53
|
-
<div key={i} className="hc-space-y-2 hc-pb-3 hc-border-b hc-border-gray-200 last:hc-border-0">
|
|
54
|
-
<div className="hc-h-8 hc-bg-gray-300 hc-rounded hc-animate-pulse" style={{ width: '60%' }} />
|
|
55
|
-
<div className="hc-space-y-1.5 hc-pl-2 hc-pt-1">
|
|
56
|
-
<div className="hc-h-5 hc-bg-gray-200 hc-rounded hc-animate-pulse" style={{ width: '90%' }} />
|
|
57
|
-
<div className="hc-h-5 hc-bg-gray-200 hc-rounded hc-animate-pulse" style={{ width: '85%' }} />
|
|
58
|
-
<div className="hc-h-5 hc-bg-gray-200 hc-rounded hc-animate-pulse" style={{ width: '75%' }} />
|
|
59
|
-
{i <= 2 && <div className="hc-h-5 hc-bg-gray-200 hc-rounded hc-animate-pulse" style={{ width: '80%' }} />}
|
|
60
|
-
</div>
|
|
61
|
-
</div>
|
|
62
|
-
))}
|
|
63
|
-
</div>
|
|
64
|
-
);
|
|
65
|
-
};
|
|
66
|
-
|
|
67
|
-
/**
|
|
68
|
-
* Skeleton for the map and list section
|
|
69
|
-
*/
|
|
70
|
-
const MapListSkeleton = ({ showMap, isMapOnTop }) => {
|
|
71
|
-
if (!showMap) {
|
|
72
|
-
// List only view
|
|
73
|
-
return (
|
|
74
|
-
<div className="hc-h-full hc-flex hc-flex-col">
|
|
75
|
-
<ListSkeleton />
|
|
76
|
-
</div>
|
|
77
|
-
);
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
// Map + List view
|
|
81
|
-
return (
|
|
82
|
-
<div className={`hc-h-full hc-flex ${isMapOnTop ? 'hc-flex-col' : 'hc-flex-col md:hc-flex-row'}`}>
|
|
83
|
-
{isMapOnTop ? (
|
|
84
|
-
<>
|
|
85
|
-
<div className="hc-flex-1 hc-bg-gray-100 hc-animate-pulse" style={{ minHeight: '300px' }}>
|
|
86
|
-
<div className="hc-h-full hc-flex hc-items-center hc-justify-center">
|
|
87
|
-
<div className="hc-text-gray-400">
|
|
88
|
-
<svg className="hc-w-12 hc-h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
89
|
-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
|
|
90
|
-
</svg>
|
|
91
|
-
</div>
|
|
92
|
-
</div>
|
|
93
|
-
</div>
|
|
94
|
-
<div className="hc-flex-1">
|
|
95
|
-
<ListSkeleton />
|
|
96
|
-
</div>
|
|
97
|
-
</>
|
|
98
|
-
) : (
|
|
99
|
-
<>
|
|
100
|
-
<div className="hc-flex-1 hc-order-2 md:hc-order-1">
|
|
101
|
-
<ListSkeleton />
|
|
102
|
-
</div>
|
|
103
|
-
<div className="hc-flex-1 hc-bg-gray-100 hc-animate-pulse hc-order-1 md:hc-order-2" style={{ minHeight: '300px' }}>
|
|
104
|
-
<div className="hc-h-full hc-flex hc-items-center hc-justify-center">
|
|
105
|
-
<div className="hc-text-gray-400">
|
|
106
|
-
<svg className="hc-w-12 hc-h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
107
|
-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
|
|
108
|
-
</svg>
|
|
109
|
-
</div>
|
|
110
|
-
</div>
|
|
111
|
-
</div>
|
|
112
|
-
</>
|
|
113
|
-
)}
|
|
114
|
-
</div>
|
|
115
|
-
);
|
|
116
|
-
};
|
|
117
|
-
|
|
118
|
-
/**
|
|
119
|
-
* Skeleton for the list section
|
|
120
|
-
*/
|
|
121
|
-
const ListSkeleton = () => {
|
|
122
|
-
return (
|
|
123
|
-
<div className="hc-h-full hc-flex hc-flex-col hc-bg-white">
|
|
124
|
-
{/* Header with sort */}
|
|
125
|
-
<div className="hc-p-4 hc-border-b hc-border-gray-200 hc-bg-gray-50/50">
|
|
126
|
-
<div className="hc-flex hc-items-center hc-justify-between hc-gap-4">
|
|
127
|
-
<div className="hc-h-5 hc-w-32 hc-bg-gray-200 hc-rounded hc-animate-pulse" />
|
|
128
|
-
<div className="hc-h-9 hc-w-48 hc-bg-gray-200 hc-rounded hc-animate-pulse" />
|
|
129
|
-
</div>
|
|
130
|
-
</div>
|
|
131
|
-
|
|
132
|
-
{/* List items */}
|
|
133
|
-
<div className="hc-flex-1 hc-overflow-auto hc-p-3 md:hc-p-4 hc-space-y-2">
|
|
134
|
-
{[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
|
|
135
|
-
<div key={i} className="hc-border hc-border-gray-200 hc-rounded-lg hc-p-4 hc-space-y-3 hc-bg-white">
|
|
136
|
-
{/* Title and company */}
|
|
137
|
-
<div className="hc-space-y-2">
|
|
138
|
-
<div className="hc-h-6 hc-bg-gray-300 hc-rounded hc-animate-pulse" style={{ width: `${70 + (i % 3) * 10}%` }} />
|
|
139
|
-
<div className="hc-h-4 hc-bg-gray-200 hc-rounded hc-animate-pulse" style={{ width: `${45 + (i % 4) * 8}%` }} />
|
|
140
|
-
</div>
|
|
141
|
-
|
|
142
|
-
{/* Tags/badges */}
|
|
143
|
-
<div className="hc-flex hc-gap-2 hc-flex-wrap">
|
|
144
|
-
<div className="hc-h-6 hc-w-20 hc-bg-gray-200 hc-rounded-full hc-animate-pulse" />
|
|
145
|
-
<div className="hc-h-6 hc-w-24 hc-bg-gray-200 hc-rounded-full hc-animate-pulse" />
|
|
146
|
-
{i % 2 === 0 && <div className="hc-h-6 hc-w-16 hc-bg-gray-200 hc-rounded-full hc-animate-pulse" />}
|
|
147
|
-
</div>
|
|
148
|
-
|
|
149
|
-
{/* Additional info */}
|
|
150
|
-
<div className="hc-flex hc-gap-3 hc-items-center">
|
|
151
|
-
<div className="hc-h-4 hc-w-24 hc-bg-gray-200 hc-rounded hc-animate-pulse" />
|
|
152
|
-
<div className="hc-h-4 hc-w-28 hc-bg-gray-200 hc-rounded hc-animate-pulse" />
|
|
153
|
-
</div>
|
|
154
|
-
</div>
|
|
155
|
-
))}
|
|
156
|
-
</div>
|
|
157
|
-
</div>
|
|
158
|
-
);
|
|
159
|
-
};
|
|
160
|
-
|
|
161
51
|
export default MapSkeleton;
|