DeprivedDevs/deprived-main-website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Big progress! gets data from pocketbase
Some checks failed
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Failing after 0s
Details

Browse source
This commit is contained in:
BOTAlex 2025-08-14 06:05:23 +02:00
parent dfc823fe1f
commit a4e20f5ff3
13 changed files with 232 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/pages/shop/_shop_main.svelte
View file

@ -1,14 +1,29 @@
<script>
import ShopItemCard from "./comps/ShopItemCard.svelte";
<script lang="ts">
import { onMount } from "svelte";
import ShopItemCard from "./comps/ShopItemCard.svelte";
import { api } from "@stores";
import { ShopItem } from "@src/ts/api/classes/ShopItem";
let allItems: undefined | ShopItem[] = undefined;
onMount(async () => {
allItems = await api.GetAllShopItems();
console.log(allItems);
});
</script>
<div class="p-8 flex w-full justify-center">
<div class="text-4xl cozette">Items</div>
</div>
<div class="flex w-full justify-center">
<div class="grid grid-cols-2 gap-4 ">
{#each { length: 5 } as _, i}
<ShopItemCard/>
{/each}
<div class="grid grid-cols-2 gap-4">
{#if allItems != undefined}
{#each allItems as item, i}
<ShopItemCard bind:shopItem={item} />
{/each}
{:else}
<div></div>
{/if}
</div>
</div>

16
src/pages/shop/comps/ShopItemCard.svelte
View file

@ -1,14 +1,22 @@
<script>
<script lang="ts">
import type { ShopItem } from "@src/ts/api/classes/ShopItem";
export let shopItem: ShopItem;
</script>
<div>
<div class="group relative w-64 h-64 bg-slate-300">
<div class="w-full h-full">
<img class="object-cover w-full h-full peer" src="/images/Zhen/Infomatik/PressurePlate.png" alt="">
<img
class="object-cover w-full h-full peer"
src={shopItem.preview_image}
alt=""
/>
</div>
<div class="absolute hidden group-hover:flex w-full h-full top-0 bg-black opacity-50">
<div
class="absolute hidden group-hover:flex w-full h-full top-0 bg-black opacity-50"
>
Baller
</div>
</div>