Skip to content

Commit 822b827

Browse files
cheddZycheddZy
committed
improved placeholder cards
1 parent 01ef704 commit 822b827

File tree

2 files changed

+258
-35
lines changed

2 files changed

+258
-35
lines changed

‎src/components/Content.astro

+169-27
Original file line numberDiff line numberDiff line change
@@ -68,59 +68,201 @@ import Card from "./ui/Card.astro";
6868
<div id="contentWrap">
6969
<div class="item show free">
7070
<p class="labelText">FREE</p>
71-
<Card label="free"/>
71+
<Card label="free"
72+
tag1="FREE"
73+
tag2="RESOURCES"
74+
title="Free"
75+
func="Function"
76+
/>
7277
</div>
7378
<div class="item show free">
7479
<p class="labelText">FREE</p>
75-
<Card label="free"/>
80+
<Card label="free"
81+
tag1="FREE"
82+
tag2="RESOURCES"
83+
title="Free"
84+
func="Function"
85+
/>
7686
</div>
7787
<div class="item show free">
78-
<label class="labelText">insPIRATION</label>
79-
<Card label="inspiration" />
88+
<p class="labelText">FREE</p>
89+
<Card label="free"
90+
tag1="FREE"
91+
tag2="RESOURCES"
92+
title="Free"
93+
func="Function"
94+
/>
8095
</div>
8196
<div class="item show free">
82-
<p class="labelText">resources</p>
83-
<Card label="resources" />
97+
<p class="labelText">FREE</p>
98+
<Card label="free"
99+
tag1="FREE"
100+
tag2="RESOURCES"
101+
title="Free"
102+
func="Function"
103+
/>
84104
</div>
85105
<div class="item show free">
86-
<p class="labelText">resources</p>
87-
<Card label="resources" />
106+
<p class="labelText">RESOURCES</p>
107+
<Card label="free"
108+
tag1="FREE"
109+
tag2="RESOURCES"
110+
title="Resource"
111+
func="Function"
112+
/>
88113
</div>
89114
<div class="item show free">
90-
<p class="labelText">resources</p>
91-
<Card label="resources" />
115+
<p class="labelText">RESOURCES</p>
116+
<Card label="free"
117+
tag1="FREE"
118+
tag2="RESOURCES"
119+
title="Resource"
120+
func="Function"
121+
/>
92122
</div>
93123
<div class="item show free">
94-
<p class="labelText">resources</p>
95-
<Card label="its not dependent on tag text" />
124+
<p class="labelText">RESOURCES</p>
125+
<Card label="free"
126+
tag1="FREE"
127+
tag2="RESOURCES"
128+
title="Resource"
129+
func="Function"
130+
/>
96131
</div>
97132
<div class="item show free">
98-
<p class="labelText">FREE</p>
99-
<Card label="free"/>
133+
<p class="labelText">RESOURCES</p>
134+
<Card label="free"
135+
tag1="FREE"
136+
tag2="RESOURCES"
137+
title="Resource"
138+
func="Function"
139+
/>
100140
</div>
101141
<div class="item show free">
102-
<p class="labelText">FREE</p>
103-
<Card label="free"/>
142+
<p class="labelText">RESOURCES</p>
143+
<Card label="free"
144+
tag1="FREE"
145+
tag2="RESOURCES"
146+
title="Resource"
147+
func="Function"
148+
/>
149+
</div>
150+
<div class="item show free">
151+
<p class="labelText">RESOURCES</p>
152+
<Card label="free"
153+
tag1="FREE"
154+
tag2="RESOURCES"
155+
title="Resource"
156+
func="Function"
157+
/>
104158
</div>
105159
<div class="item show free">
106-
<label class="labelText">insPIRATION</label>
107-
<Card label="inspiration" />
160+
<p class="labelText">COMMERCE</p>
161+
<Card label="free"
162+
tag1="FREE"
163+
tag2="RESOURCES"
164+
title="Commerce"
165+
func="Function"
166+
/>
108167
</div>
109168
<div class="item show free">
110-
<p class="labelText">personal</p>
111-
<Card label="personal" />
169+
<p class="labelText">PERSONAL</p>
170+
<Card label="free"
171+
tag1="FREE"
172+
tag2="RESOURCES"
173+
title="Personal"
174+
func="Function"
175+
/>
112176
</div>
113177
<div class="item show free">
114-
<p class="labelText">personal</p>
115-
<Card label="personal" />
178+
<p class="labelText">PERSONAL</p>
179+
<Card label="free"
180+
tag1="FREE"
181+
tag2="RESOURCES"
182+
title="Personal"
183+
func="Function"
184+
/>
116185
</div>
117-
<div class="item show commerce">
118-
<p class="labelText">commerce</p>
119-
<Card label="commerce" />
186+
<div class="item show free">
187+
<p class="labelText">PERSONAL</p>
188+
<Card label="free"
189+
tag1="FREE"
190+
tag2="RESOURCES"
191+
title="Personal"
192+
func="Function"
193+
/>
194+
</div>
195+
<div class="item show free">
196+
<p class="labelText">INSPIRATION</p>
197+
<Card label="free"
198+
tag1="FREE"
199+
tag2="RESOURCES"
200+
title="Inspiration"
201+
func="Function"
202+
/>
203+
</div>
204+
<div class="item show free">
205+
<p class="labelText">RESOURCES</p>
206+
<Card label="free"
207+
tag1="FREE"
208+
tag2="RESOURCES"
209+
title="Resource"
210+
func="Function"
211+
/>
212+
</div>
213+
<div class="item show free">
214+
<p class="labelText">COMMERCE</p>
215+
<Card label="free"
216+
tag1="FREE"
217+
tag2="RESOURCES"
218+
title="Commerce"
219+
func="Function"
220+
/>
221+
</div>
222+
<div class="item show free">
223+
<p class="labelText">COMMERCE</p>
224+
<Card label="free"
225+
tag1="FREE"
226+
tag2="RESOURCES"
227+
title="Commerce"
228+
func="Function"
229+
/>
230+
</div>
231+
<div class="item show free">
232+
<p class="labelText">COMMERCE</p>
233+
<Card label="free"
234+
tag1="FREE"
235+
tag2="RESOURCES"
236+
title="Commerce"
237+
func="Function"
238+
/>
239+
</div>
240+
<div class="item show free">
241+
<p class="labelText">PERSONAL</p>
242+
<Card label="free"
243+
tag1="FREE"
244+
tag2="RESOURCES"
245+
title="Personal"
246+
func="Function"
247+
/>
248+
</div>
249+
<div class="item show free">
250+
<p class="labelText">INSPIRATION</p>
251+
<Card label="free"
252+
tag1="FREE"
253+
tag2="RESOURCES"
254+
title="Inspiration"
255+
func="Function"
256+
/>
120257
</div>
121258
<div class="item show free">
122-
<p class="labelText">resources</p>
123-
<Card label="its not dependent on tag text" />
259+
<p class="labelText">PERSONAL</p>
260+
<Card label="free"
261+
tag1="FREE"
262+
tag2="RESOURCES"
263+
title="Personal"
264+
func="Function"
265+
/>
124266
</div>
125267

126268
</div>

‎src/components/ui/Card.astro

+89-8
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,111 @@
11
---
2-
const {label} = Astro.props;
2+
const {label, tag1, tag2, tag3, title, func} = Astro.props;
33
---
44

55
<div class="item" aria-label={label} id="cardContainer">
6-
<div>
7-
<small>{label}</small>
8-
</div>
6+
<div class="tagsList">
7+
<small class="tagCard">{tag1}</small>
8+
<small class="tagCard free">{tag2}</small>
9+
</div>
10+
<div class="bottomCard">
11+
<div class="textCard">
12+
<h3>{title}</h3>
13+
<p>{func}</p>
14+
</div>
15+
<button>
16+
<a>
17+
<svg data-slot="icon" aria-hidden="true" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
18+
<path d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" stroke-linecap="round" stroke-linejoin="round"></path>
19+
</svg>
20+
</a>
21+
</button>
22+
</div>
923
</div>
1024

1125

1226
<style>
1327
#cardContainer {
14-
background: linear-gradient(#250B5B, #060525);
28+
background: linear-gradient(#250B5B 25%, #060525 75%);
1529
width: 16rem;
1630
height: 16rem;
1731
@apply rounded-lg;
1832
}
1933

34+
* {
35+
border-radius: 0.25rem;
36+
font-size: 1rem !important;
37+
}
38+
2039
#cardContainer {
40+
display:flex;
41+
flex-direction: column;
42+
justify-content: space-between;
43+
cursor: pointer;
44+
}
45+
.textCard {
46+
width: auto;
47+
}
48+
svg {
49+
width: 1.5rem;
50+
color: #f0f1f2;
51+
@apply transition-colors;
52+
}
53+
54+
button {
55+
display: grid;
56+
place-items: center;
57+
@apply transition-colors;
58+
59+
aspect-ratio: 1;
60+
}
61+
button:hover {
62+
63+
background-color: #f0f1f2;
64+
color:#060525;
65+
66+
}
67+
button:hover svg {
68+
color:#060525;
69+
}
70+
71+
72+
.tagsList {
73+
@apply py-1;
74+
@apply px-2;
75+
}
76+
.bottomCard {
77+
@apply p-3;
2178
display: flex;
22-
justify-content: center;
23-
align-items: center;
79+
flex-direction: row;
80+
justify-content: space-between;
2481
}
2582

26-
small {
83+
small, h3, p {
2784
color: white;
2885
}
86+
small, p {
87+
font-size: 0.75rem !important;
88+
}
89+
p {
90+
opacity: 0.66;
91+
}
92+
93+
small {
94+
@apply px-2;
95+
@apply py-1;
96+
font-size: 0.6rem !important;
97+
@apply rounded-full;
98+
background-color: #8aeca1;
99+
color: #1E1F22;
100+
font-weight: 600;
101+
102+
}
103+
.free {
104+
background-color: #8abbec;
105+
}
106+
.inspiration {
107+
background-color: #b68aec;
108+
}
109+
29110

30111
</style>

0 commit comments

Comments
 (0)