Skip to content

Commit 9326331

Browse files
namnotherenamnothere
committed
feat: dropdown wishlist
1 parent 7f1a16c commit 9326331

1 file changed

Lines changed: 134 additions & 97 deletions

File tree

‎src/pages/index.astro‎

Lines changed: 134 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ const cards: {
6565
title: 'Switch',
6666
description: 'hehehehe',
6767
descriptionHtml:
68-
'<li>cái nào cũng ok</li>',
68+
'<li>cái nào cũng ok</li>',
6969
tone: 'bg-[#fff8e3] border-[#ffe5b0]',
7070
labelTone: 'bg-[#ffe8b1] text-[#a25803]',
7171
badgeTone: 'bg-[#f5efe4] text-[#7a624c]',
@@ -162,7 +162,7 @@ const cards: {
162162
</div>
163163
<a
164164
class="rounded-2xl border border-transparent bg-white/70 p-2 text-[#6b6f7c] shadow-sm transition hover:border-[#d6d6d6] hover:text-[#3a3e4a]"
165-
href="https://www.google.com/maps/search/?api=1&query=Grand+Engineering+Hall+West+Campus"
165+
href="https://maps.app.goo.gl/jy3Qj2kadiyFSfqG7"
166166
target="_blank"
167167
rel="noreferrer"
168168
aria-label="Open ceremony location in Google Maps"
@@ -206,119 +206,147 @@ const cards: {
206206
);
207207
})}
208208
</div>
209-
<img
209+
<!-- <img
210210
src={"/images/pepoclown-pepe.gif"}
211211
alt={"Pepe Clown"}
212212
class="object-center h-full lg:h-100 w-full rounded-[18px] object-cover"
213213
loading="lazy"
214214
decoding="async"
215+
/> -->
216+
<Image
217+
src={"/images/me.jpg"}
218+
alt={"me"}
219+
width={500}
220+
height={500}
221+
class="object-center h-full lg:h-100 w-full rounded-[18px] object-cover"
222+
loading="lazy"
223+
decoding="async"
215224
/>
216225
</div>
217226
</section>
218227

219228
<section class="rounded-4xl border border-[#f2dec4] bg-[#fff7df] px-6 py-6 shadow-[0_25px_45px_rgba(15,23,42,0.12)] backdrop-blur">
220229
<div class="mt-4 overflow-hidden rounded-[22px] border border-[#f1e4c7] bg-white shadow-[0_12px_30px_rgba(15,23,42,0.08)]">
221-
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1164.9745656195105!2d106.7717415642758!3d10.850165915243517!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31752763f23816ab%3A0x282f711441b6916f!2zVHLGsOG7nW5nIMSQ4bqhaSBo4buNYyBTxrAgcGjhuqFtIEvhu7kgdGh14bqtdCBUaMOgbmggcGjhu5EgSOG7kyBDaMOtIE1pbmg!5e0!3m2!1svi!2s!4v1767372389507!5m2!1svi!2s" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
230+
<iframe
231+
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1164.9745656195105!2d106.7717415642758!3d10.850165915243517!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31752763f23816ab%3A0x282f711441b6916f!2zVHLGsOG7nW5nIMSQ4bqhaSBo4buNYyBTxrAgcGjhuqFtIEvhu7kgdGh14bqtdCBUaMOgbmggcGjhu5EgSOG7kyBDaMOtIE1pbmg!5e0!3m2!1svi!2s!4v1767372389507!5m2!1svi!2s"
232+
class="h-72 w-full min-h-7h"
233+
style="border:0;"
234+
allowfullscreen=""
235+
loading="lazy"
236+
referrerpolicy="no-referrer-when-downgrade"
237+
title="Google Maps"
238+
></iframe>
222239
</div>
223240
</section>
224241

225242
<section class="rounded-4xl border border-[#f2dec4] bg-[#fff7df] px-4 py-5 shadow-[0_20px_40px_rgba(15,23,42,0.12)]">
226-
<div class="flex flex-wrap items-center gap-3">
227-
{filters.map((filter) => (
228-
<button
229-
class={`flex items-center gap-2 rounded-[18px] px-5 py-2 text-sm font-semibold transition ${filter.active
230-
? 'bg-[#1f2937] text-white shadow-[0_10px_35px_rgba(31,41,55,0.35)]'
231-
: 'bg-[#fff8df] text-[#1f1f26] shadow-[inset_0_0px_0_1px_rgba(0,0,0,0.03)] ring-1 ring-[#f5e4c2]'}`}
232-
type="button"
233-
data-filter={filter.label}
234-
aria-pressed={filter.active ? 'true' : 'false'}
235-
>
236-
<span>{filter.icon}</span>
237-
<span>{filter.label}</span>
238-
</button>
239-
))}
240-
</div>
241-
</section>
242-
243-
244-
<section class="grid gap-5 sm:grid-cols-2">
245-
{cards.map((card) => (
246-
<article
247-
class={`flex h-full flex-col overflow-hidden rounded-[30px] border px-0 pb-4 shadow-[0_20px_45px_rgba(15,23,42,0.15)] ${card.tone}`}
248-
data-card-category={card.category ?? 'All'}
249-
>
250-
<div class="px-4 pt-4">
251-
<div class="overflow-hidden rounded-[22px] border border-white bg-white p-1 shadow-[0_12px_30px_rgba(15,23,42,0.15)]">
252-
{card.media?.images ? (
253-
<div class="photo-strip">
254-
{card.media.images.map((src, i) => (
255-
<img
256-
src={src}
257-
class={`slice slice-${i + 1}`}
258-
loading="lazy"
259-
/>
260-
))}
261-
</div>
262-
): (<Image
263-
src={card.image}
264-
alt={card.title}
265-
width={500}
266-
height={300}
267-
sizes="(min-width: 640px) 320px, 100vw"
268-
class="h-32 w-full rounded-[18px] object-cover"
269-
loading="lazy"
270-
decoding="async"
271-
/>)}
272-
</div>
243+
<details class="group rounded-[28px] border border-[#f1e4c7] bg-white p-4 shadow-[0_12px_30px_rgba(15,23,42,0.08)]">
244+
<summary class="flex cursor-pointer items-center justify-between gap-3 rounded-[20px] border border-transparent px-4 py-3 text-sm font-semibold text-[#1f2937] transition hover:border-[#e2d5c0]" aria-label="Toggle wishlist filters and cards">
245+
<div>
246+
<p class="text-xs font-normal text-[#6c7284]">👉👈</p>
273247
</div>
274-
<div class="flex h-full flex-1 flex-col gap-4 px-4 pt-4">
275-
<div class="flex items-center justify-between text-[11px] font-semibold uppercase tracking-[0.4em]">
276-
<span class={`rounded-full px-3 py-1 text-[10px] ${card.labelTone}`}>{card.label}</span>
277-
<span class={`rounded-full px-2 py-1 text-[10px] font-semibold ${card.badgeTone}`}>{card.badge}</span>
278-
</div>
279-
<div class="space-y-2">
280-
<h3 class="text-base font-semibold leading-snug text-[#1f2937]">{card.title}</h3>
281-
{card.descriptionHtml ? (
282-
<ul
283-
class="text-sm text-[#4c5565] list-disc space-y-1 pl-5"
284-
set:html={card.descriptionHtml}
285-
/>
286-
) : (
287-
<p class="text-sm text-[#4c5565]">{card.description}</p>
288-
)}
289-
</div>
290-
<div class="h-px border-t border-dashed border-[#f0d2a8]" />
291-
<div class="mt-auto flex items-center justify-between">
292-
<div class="flex items-center gap-3">
293-
<button
294-
type="button"
295-
class="grid h-10 w-10 place-items-center rounded-full border border-white bg-white/85 text-[#4c5565] shadow-sm transition hover:translate-y-0.5 hover:border-[#d5d5d5]"
296-
aria-label={`Inspect ${card.title}`}
297-
>
298-
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
299-
<circle cx="10.5" cy="10.5" r="6.5" />
300-
<line x1="16" y1="16" x2="22" y2="22" stroke-linecap="round" />
301-
</svg>
302-
</button>
303-
<button
304-
type="button"
305-
class="grid h-10 w-10 place-items-center rounded-full border border-white bg-white/85 text-[#4c5565] shadow-sm transition hover:translate-y-0.5 hover:border-[#d5d5d5]"
306-
>
307-
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
308-
<path d="M6 12l4 4 8-8" stroke-linecap="round" stroke-linejoin="round" />
309-
</svg>
310-
</button>
311-
</div>
312-
<div class="flex items-center gap-2">
313-
<span class="h-2.5 w-2.5 rounded-full bg-[#c5c5c5]/70" />
314-
<span class="h-2.5 w-2.5 rounded-full bg-[#c5c5c5]/30" />
315-
</div>
316-
</div>
248+
<span class="text-2xl leading-none transition-transform" aria-hidden="true">⌄</span>
249+
</summary>
250+
<div class="mt-5 space-y-5">
251+
<!-- <div class="flex flex-wrap items-center gap-3">
252+
{filters.map((filter) => (
253+
<button
254+
class={`flex items-center gap-2 rounded-[18px] px-5 py-2 text-sm font-semibold transition ${filter.active
255+
? 'bg-[#1f2937] text-white shadow-[0_10px_35px_rgba(31,41,55,0.35)]'
256+
: 'bg-[#fff8df] text-[#1f1f26] shadow-[inset_0_0px_0_1px_rgba(0,0,0,0.03)] ring-1 ring-[#f5e4c2]'}`}
257+
type="button"
258+
data-filter={filter.label}
259+
aria-pressed={filter.active ? 'true' : 'false'}
260+
>
261+
<span>{filter.icon}</span>
262+
<span>{filter.label}</span>
263+
</button>
264+
))}
265+
</div> -->
266+
<div class="grid gap-5 sm:grid-cols-2">
267+
{cards.map((card) => (
268+
<article
269+
class={`flex h-full flex-col overflow-hidden rounded-[30px] border px-0 pb-4 shadow-[0_20px_45px_rgba(15,23,42,0.15)] ${card.tone}`}
270+
data-card-category={card.category ?? 'All'}
271+
>
272+
<div class="px-4 pt-4">
273+
<div class="overflow-hidden rounded-[22px] border border-white bg-white p-1 shadow-[0_12px_30px_rgba(15,23,42,0.15)]">
274+
{card.media?.images ? (
275+
<div class="photo-strip">
276+
{card.media.images.map((src, i) => (
277+
<img
278+
src={src}
279+
class={`slice slice-${i + 1}`}
280+
loading="lazy"
281+
alt={card.title}
282+
/>
283+
))}
284+
</div>
285+
): (<Image
286+
src={card.image}
287+
alt={card.title}
288+
width={500}
289+
height={300}
290+
sizes="(min-width: 640px) 320px, 100vw"
291+
class="h-32 w-full rounded-[18px] object-cover"
292+
loading="lazy"
293+
decoding="async"
294+
/>)}
295+
</div>
296+
</div>
297+
<div class="flex h-full flex-1 flex-col gap-4 px-4 pt-4">
298+
<div class="flex items-center justify-between text-[11px] font-semibold uppercase tracking-[0.4em]">
299+
<span class={`rounded-full px-3 py-1 text-[10px] ${card.labelTone}`}>{card.label}</span>
300+
<span class={`rounded-full px-2 py-1 text-[10px] font-semibold ${card.badgeTone}`}>{card.badge}</span>
301+
</div>
302+
<div class="space-y-2">
303+
<h3
304+
class="text-base font-semibold leading-snug text-[#1f2937]"
305+
aria-label={card.title}
306+
>{card.title}</h3>
307+
{card.descriptionHtml ? (
308+
<ul
309+
class="text-sm text-[#4c5565] list-disc space-y-1 pl-5"
310+
set:html={card.descriptionHtml}
311+
/>
312+
) : (
313+
<p class="text-sm text-[#4c5565]">{card.description}</p>
314+
)}
315+
</div>
316+
<div class="h-px border-t border-dashed border-[#f0d2a8]" />
317+
<div class="mt-auto flex items-center justify-between">
318+
<div class="flex items-center gap-3">
319+
<button
320+
type="button"
321+
class="grid h-10 w-10 place-items-center rounded-full border border-white bg-white/85 text-[#4c5565] shadow-sm transition hover:translate-y-0.5 hover:border-[#d5d5d5]"
322+
aria-label={`Inspect ${card.title}`}
323+
>
324+
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
325+
<circle cx="10.5" cy="10.5" r="6.5" />
326+
<line x1="16" y1="16" x2="22" y2="22" stroke-linecap="round" />
327+
</svg>
328+
</button>
329+
<button
330+
type="button"
331+
class="grid h-10 w-10 place-items-center rounded-full border border-white bg-white/85 text-[#4c5565] shadow-sm transition hover:translate-y-0.5 hover:border-[#d5d5d5]"
332+
>
333+
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
334+
<path d="M6 12l4 4 8-8" stroke-linecap="round" stroke-linejoin="round" />
335+
</svg>
336+
</button>
337+
</div>
338+
<div class="flex items-center gap-2">
339+
<span class="h-2.5 w-2.5 rounded-full bg-[#c5c5c5]/70" />
340+
<span class="h-2.5 w-2.5 rounded-full bg-[#c5c5c5]/30" />
341+
</div>
342+
</div>
343+
</div>
344+
</article>
345+
))}
317346
</div>
318-
</article>
319-
))}
347+
</div>
348+
</details>
320349
</section>
321-
</div>
322350
<script type="module">
323351
document.addEventListener("DOMContentLoaded", () => {
324352
const ACTIVE_CLASSES = [
@@ -375,5 +403,14 @@ const cards: {
375403
setActiveButton(defaultActive);
376404
});
377405
</script>
406+
<style>
407+
details > summary span {
408+
transition: transform 0.25s ease;
409+
}
410+
411+
details[open] > summary span {
412+
transform: rotate(-90deg);
413+
}
414+
</style>
378415
</main>
379416
</Layout>

0 commit comments

Comments
 (0)