cooking

src/pages/shop/comps/ShopItemCard.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { ShopItem } from "@src/ts/api/classes/ShopItem";
+  import { ArrowBigRight } from "lucide-svelte";
 
   export let shopItem: ShopItem;
 
@@ -9,7 +10,22 @@
 <div class="">
   <div class="relative w-48 h-48">
     <!-- moved w/h here -->
-    <div class="corner-border-container"></div>
+    <div class="corner-border-container">
+      <div class="w-full h-full flex flex-col justify-end">
+        <div class="flex flex-col justify-center items-center">
+          <span class="text-xl font-semibold text-center w-full"
+            >{shopItem.item_name}</span
+          >
+          <span>{@html shopItem.short_desc}</span>
+        </div>
+        <div class="flex justify-end p-2">
+          <a
+            class="btn not-hover:btn-outline btn-primary btn-square"
+            href={shopItem.page_url}><ArrowBigRight /></a
+          >
+        </div>
+      </div>
+    </div>
     <!-- removed 'relative w-48 h-48' -->
     <div
       class="absolute"
@@ -20,7 +36,7 @@
     >
       <div class="w-full h-full">
         <img
-          class="object-cover w-full h-full peer"
+          class="object-cover w-full h-full peer rounded"
           src={shopItem.preview_image}
           alt=""
         />
@@ -40,7 +56,6 @@
     position: absolute;
     inset: 0;
     z-index: 1;
-    pointer-events: none;
 
     /* Corner lines (same 8-gradients as before) */
     background-image:
@@ -94,6 +109,6 @@
     --y: var(--length);
     opacity: 1;
     transform: scale(1);
-    background-color: #0008;
+    background-color: rgba(0, 0, 0, 0.65);
   }
 </style>

src/ts/api/classes/ShopItem.ts

@@ -3,6 +3,7 @@ import { ParseAssetUrl } from "@src/ts/Helper";
 
 export class ShopItem {
   item_name: string;
+  short_desc: string;
   preview_image: string;
   page_url: string; // the url used for the item
   images_root: string; // might not be optimal to include this, in the same class, but should be fine, for now at least
@@ -13,6 +14,7 @@ export class ShopItem {
 
   constructor(
     item_name: string,
+    short_desc: string,
     preview_image: string,
     redirect: string,
     images_root: string,
@@ -22,6 +24,7 @@ export class ShopItem {
     unlisted: boolean,
   ) {
     this.item_name = item_name;
+    this.short_desc = short_desc;
     this.preview_image = preview_image;
     this.page_url = redirect;
     this.images_root = images_root;
@@ -34,6 +37,7 @@ export class ShopItem {
   static fromJSON(json: any): ShopItem {
     return new ShopItem(
       json.item_name,
+      json.short_desc,
       ParseAssetUrl(json.preview_image, "/assets/shop/preview-images"),
       json.page_url,
       ParseAssetUrl(json.images_root, "/assets/shop/" + json.item_name + "/"), // Please use better paths