69 lines
2.0 KiB
Vue
69 lines
2.0 KiB
Vue
<template>
|
|
<div class="flex min-h-screen flex-col items-center gap-10">
|
|
<div class="flex items-start justify-center space-x-8 p-8">
|
|
<!-- First Grid -->
|
|
<div class="w-1/2">
|
|
<h2 class="mb-4 text-xl font-bold">You smashed</h2>
|
|
<div
|
|
class="grid grid-cols-1 gap-2 lg:grid-cols-3 xl:grid-cols-5 xl:gap-4"
|
|
>
|
|
<div
|
|
v-for="(img, idx) in imagesListOne"
|
|
:key="idx"
|
|
class="flex items-center justify-center rounded p-2 shadow"
|
|
>
|
|
<img
|
|
:src="img"
|
|
alt="Image from Smash List"
|
|
class="h-32 w-full rounded object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Second Grid -->
|
|
<div class="w-1/2">
|
|
<h2 class="mb-4 text-xl font-bold">You passed</h2>
|
|
<div
|
|
class="grid grid-cols-1 gap-2 lg:grid-cols-3 xl:grid-cols-5 xl:gap-4"
|
|
>
|
|
<div
|
|
v-for="(img, idx) in imagesListTwo"
|
|
:key="idx"
|
|
class="flex items-center justify-center rounded p-2 shadow"
|
|
>
|
|
<img
|
|
:src="img"
|
|
alt="Image from pass list"
|
|
class="h-32 w-full rounded object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Button label="Return" class="h-16 w-64" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const imagesListOne = [
|
|
// Replace with your image URLs
|
|
"https://picsum.photos/id/1011/200/200",
|
|
"https://picsum.photos/id/1012/800/400",
|
|
"https://picsum.photos/id/1013/200/200",
|
|
"https://picsum.photos/id/1014/200/200",
|
|
"https://picsum.photos/id/1015/200/200",
|
|
"https://picsum.photos/id/1016/200/200",
|
|
// ...more images
|
|
];
|
|
|
|
const imagesListTwo = [
|
|
"https://picsum.photos/id/1021/200/200",
|
|
"https://picsum.photos/id/1022/200/200",
|
|
"https://picsum.photos/id/1023/200/200",
|
|
"https://picsum.photos/id/1024/200/200",
|
|
"https://picsum.photos/id/1025/200/200",
|
|
"https://picsum.photos/id/1026/200/200",
|
|
// ...more images
|
|
];
|
|
</script>
|