56 lines
1.5 KiB
Vue
56 lines
1.5 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="card in cardStore.smashList"
|
|
:key="card.id"
|
|
class="flex items-center justify-center rounded p-2 shadow"
|
|
>
|
|
<img
|
|
:src="card.image"
|
|
alt="Image from Smash List"
|
|
class="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="card in cardStore.passList"
|
|
:key="card.id"
|
|
class="flex items-center justify-center rounded p-2 shadow"
|
|
>
|
|
<img
|
|
:src="card.image"
|
|
alt="Image from pass list"
|
|
class="w-full rounded object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Button label="Return" class="h-16 w-64" @click="goHome" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useCardStore } from "~/store/Card";
|
|
|
|
const cardStore = useCardStore();
|
|
|
|
const goHome = () => {
|
|
navigateTo("");
|
|
};
|
|
</script>
|