add product list and skeleton

eihabkhan · Mar 8, 2024 · 689965d · 689965d
1 parent f6980ff
commit 689965d
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git a/assets/illustrations/cat-in-a-box.png b/assets/illustrations/cat-in-a-box.png
diff --git a/components/ProductsSkeleton.vue b/components/ProductsSkeleton.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { PrimaryButton } from '@youcan/ui-vue3'
+
+function handleClick() {
+  window.parent.location =
+    'https://seller-area.youcanshop.dev/admin/products/create?approved=1'
+}
+</script>
+
+<template>
+  <img src="/assets/illustrations/cat-in-a-box.png" alt="Meow meow" />
+  <div class="flex flex-col justify-center items-center gap-4">
+    <h2 class="text-2xl font-semibold text-gray-400">
+      Oops! You don’t have any products.
+    </h2>
+    <PrimaryButton @click="handleClick"> Create Product </PrimaryButton>
+  </div>
+</template>
diff --git a/pages/index.vue b/pages/index.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import { Product } from '#components'
+import { Product, ProductsSkeleton } from '#components'
 </script>
 
 <template>
   <main class="max-w-[1000px] mx-auto">
     <div class="flex flex-col gap-4">
       <h1 class="text-4xl font-bold">Your products</h1>
       <div
-        class="border border-gray-200 p-4 bg-[#F7F7F7] rounded-lg h-[calc(100vh-220px)] overflow-y-scroll"
+        class="border border-gray-200 rounded-lg h-[calc(100vh-220px)] overflow-y-scroll"
       >
-        <ul class="flex flex-col gap-4">
+        <!-- <ProductsSkeleton /> -->
+        <ul class="flex flex-col gap-4 p-4 bg-[#F7F7F7]">
           <Product />
           <Product />
           <Product />