Skip to content

Commit da9c1a6

Browse files
HarshCasperHarshCasper
committed
get the mvp done
1 parent ada8ef5 commit da9c1a6

File tree

4 files changed

+626
-0
lines changed

4 files changed

+626
-0
lines changed

‎src/components/ApplicationsShowcase.astro‎

Lines changed: 308 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,308 @@
1+
---
2+
import applicationsData from '../data/developerhub/applications.json';
3+
import servicesData from '../data/developerhub/services.json';
4+
import platformsData from '../data/developerhub/platforms.json';
5+
import deploymentsData from '../data/developerhub/deployments.json';
6+
import complexitiesData from '../data/developerhub/complexities.json';
7+
import { ApplicationsShowcase } from './applications/ApplicationsShowcase';
8+
9+
const applications = applicationsData.applications;
10+
---
11+
12+
<ApplicationsShowcase
13+
applications={applications}
14+
services={servicesData}
15+
platforms={platformsData}
16+
deployments={deploymentsData}
17+
complexities={complexitiesData}
18+
client:load
19+
/>
20+
21+
<style>
22+
/* Applications Showcase Styles */
23+
:global(.applications-showcase) {
24+
margin: 2rem 0;
25+
}
26+
27+
:global(.showcase-header) {
28+
display: flex;
29+
justify-content: space-between;
30+
align-items: center;
31+
margin-bottom: 2rem;
32+
flex-wrap: wrap;
33+
gap: 1rem;
34+
}
35+
36+
:global(.search-controls) {
37+
display: flex;
38+
gap: 1rem;
39+
align-items: center;
40+
flex-wrap: wrap;
41+
}
42+
43+
:global(.search-input) {
44+
padding: 0.5rem 1rem;
45+
border: 1px solid var(--sl-color-gray-5);
46+
border-radius: 0.375rem;
47+
background: var(--sl-color-bg);
48+
color: var(--sl-color-white);
49+
font-size: 0.875rem;
50+
min-width: 250px;
51+
}
52+
53+
:global(.search-input:focus) {
54+
outline: none;
55+
border-color: var(--sl-color-accent);
56+
box-shadow: 0 0 0 2px var(--sl-color-accent-low);
57+
}
58+
59+
:global(.pro-filter) {
60+
display: flex;
61+
align-items: center;
62+
gap: 0.5rem;
63+
cursor: pointer;
64+
font-size: 0.875rem;
65+
color: var(--sl-color-gray-2);
66+
}
67+
68+
:global(.results-count) {
69+
color: var(--sl-color-gray-2);
70+
font-size: 0.875rem;
71+
}
72+
73+
:global(.showcase-content) {
74+
display: grid;
75+
grid-template-columns: 280px 1fr;
76+
gap: 2rem;
77+
}
78+
79+
@media (max-width: 768px) {
80+
:global(.showcase-content) {
81+
grid-template-columns: 1fr;
82+
}
83+
}
84+
85+
/* Filters Sidebar */
86+
:global(.filters-sidebar) {
87+
background: var(--sl-color-bg-nav);
88+
border: 1px solid var(--sl-color-gray-6);
89+
border-radius: 0.5rem;
90+
padding: 1.5rem;
91+
height: fit-content;
92+
position: sticky;
93+
top: 2rem;
94+
}
95+
96+
:global(.filters-sidebar h3) {
97+
margin: 0 0 1.5rem 0;
98+
font-size: 1.125rem;
99+
font-weight: 600;
100+
color: var(--sl-color-white);
101+
}
102+
103+
:global(.filter-section) {
104+
margin-bottom: 2rem;
105+
}
106+
107+
:global(.filter-section:last-child) {
108+
margin-bottom: 0;
109+
}
110+
111+
:global(.filter-title) {
112+
font-size: 0.875rem;
113+
font-weight: 600;
114+
color: var(--sl-color-white);
115+
margin: 0 0 1rem 0;
116+
}
117+
118+
:global(.filter-items) {
119+
display: flex;
120+
flex-direction: column;
121+
gap: 0.5rem;
122+
}
123+
124+
:global(.filter-item) {
125+
display: flex;
126+
align-items: center;
127+
gap: 0.5rem;
128+
cursor: pointer;
129+
font-size: 0.75rem;
130+
color: var(--sl-color-gray-2);
131+
}
132+
133+
:global(.filter-checkbox) {
134+
width: 1rem;
135+
height: 1rem;
136+
accent-color: var(--sl-color-accent);
137+
}
138+
139+
:global(.filter-label) {
140+
line-height: 1.4;
141+
}
142+
143+
/* Applications Grid */
144+
:global(.applications-grid) {
145+
display: grid;
146+
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
147+
gap: 1.5rem;
148+
}
149+
150+
:global(.application-card) {
151+
background: var(--sl-color-bg-sidebar);
152+
border: 1px solid var(--sl-color-gray-6);
153+
border-radius: 0.75rem;
154+
overflow: hidden;
155+
transition: all 0.2s ease;
156+
height: 100%;
157+
display: flex;
158+
flex-direction: column;
159+
}
160+
161+
:global(.application-card:hover) {
162+
border-color: var(--sl-color-accent);
163+
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
164+
transform: translateY(-2px);
165+
}
166+
167+
:global(.application-card-link) {
168+
text-decoration: none;
169+
color: inherit;
170+
display: flex;
171+
flex-direction: column;
172+
height: 100%;
173+
}
174+
175+
:global(.application-card-image) {
176+
position: relative;
177+
width: 100%;
178+
height: 200px;
179+
overflow: hidden;
180+
}
181+
182+
:global(.application-card-image img) {
183+
width: 100%;
184+
height: 100%;
185+
object-fit: cover;
186+
}
187+
188+
:global(.pro-badge) {
189+
position: absolute;
190+
top: 0.75rem;
191+
right: 0.75rem;
192+
background: var(--sl-color-accent);
193+
color: white;
194+
padding: 0.25rem 0.5rem;
195+
border-radius: 0.25rem;
196+
font-size: 0.75rem;
197+
font-weight: 600;
198+
}
199+
200+
:global(.application-card-content) {
201+
padding: 1.5rem;
202+
display: flex;
203+
flex-direction: column;
204+
flex-grow: 1;
205+
}
206+
207+
:global(.application-card-title) {
208+
font-size: 1.125rem;
209+
font-weight: 600;
210+
margin: 0 0 1rem 0;
211+
color: var(--sl-color-white);
212+
line-height: 1.4;
213+
}
214+
215+
:global(.application-card-description) {
216+
font-size: 0.875rem;
217+
color: var(--sl-color-gray-2);
218+
margin: 0 0 1.5rem 0;
219+
line-height: 1.5;
220+
flex-grow: 1;
221+
}
222+
223+
:global(.application-card-footer) {
224+
margin-top: auto;
225+
}
226+
227+
:global(.service-icons) {
228+
display: flex;
229+
gap: 0.5rem;
230+
align-items: center;
231+
margin-bottom: 1rem;
232+
flex-wrap: wrap;
233+
}
234+
235+
:global(.service-icon) {
236+
width: 1.5rem;
237+
height: 1.5rem;
238+
border-radius: 0.25rem;
239+
}
240+
241+
:global(.service-count) {
242+
font-size: 0.75rem;
243+
color: var(--sl-color-gray-3);
244+
background: var(--sl-color-gray-6);
245+
padding: 0.25rem 0.5rem;
246+
border-radius: 0.25rem;
247+
}
248+
249+
:global(.tech-stack) {
250+
display: flex;
251+
gap: 1rem;
252+
flex-wrap: wrap;
253+
}
254+
255+
:global(.platforms), :global(.deployments) {
256+
display: flex;
257+
gap: 0.5rem;
258+
flex-wrap: wrap;
259+
}
260+
261+
:global(.tech-badge) {
262+
font-size: 0.75rem;
263+
padding: 0.25rem 0.5rem;
264+
border-radius: 0.25rem;
265+
background: var(--sl-color-gray-6);
266+
color: var(--sl-color-gray-1);
267+
white-space: nowrap;
268+
}
269+
270+
:global(.platform-badge) {
271+
background: var(--sl-color-blue-low);
272+
color: var(--sl-color-blue);
273+
}
274+
275+
:global(.deployment-badge) {
276+
background: var(--sl-color-green-low);
277+
color: var(--sl-color-green);
278+
}
279+
280+
/* No Results */
281+
:global(.no-results) {
282+
grid-column: 1 / -1;
283+
text-align: center;
284+
padding: 3rem;
285+
color: var(--sl-color-gray-2);
286+
}
287+
288+
:global(.no-results p) {
289+
margin: 0 0 1rem 0;
290+
font-size: 1.125rem;
291+
}
292+
293+
:global(.clear-filters-btn) {
294+
background: var(--sl-color-accent);
295+
color: white;
296+
border: none;
297+
padding: 0.75rem 1.5rem;
298+
border-radius: 0.375rem;
299+
cursor: pointer;
300+
font-size: 0.875rem;
301+
font-weight: 500;
302+
transition: background-color 0.2s ease;
303+
}
304+
305+
:global(.clear-filters-btn:hover) {
306+
background: var(--sl-color-accent-high);
307+
}
308+
</style>

0 commit comments

Comments
 (0)