feat: wardrobe orders

src/views/wardrobe/Assets.vue

@@ -99,17 +99,7 @@
         </div>
       </div>
 
-      <div v-else class="assets-empty flex flex-col flex-center">
-        <img src="@/assets/images/wardrobe/empty-wardrobe.png" class="empty-img" alt="" />
-
-        <h2 class="assets-empty__title">Nothing in Wardrobe yet</h2>
-        <p class="assets-empty__description">
-          Explore the digital item and add pieces to your collection.
-        </p>
-        <div class="assets-empty__button" type="button" @click="goToDigitalItems">
-          Explore Digital Items
-        </div>
-      </div>
+      <Empty v-else @explore="goToDigitalItems" />
     </section>
   </div>
 </template>
@@ -117,6 +107,7 @@
 import { computed, nextTick, onMounted, onUnmounted, reactive, ref, shallowRef, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import img from '@/assets/images/collectionStory/Rectangle.png'
+import Empty from './Empty.vue'
 
 interface FilterOption {
   label: string
@@ -553,39 +544,6 @@ onUnmounted(() => {
       }
     }
 
-    .assets-empty {
-      flex: 1;
-
-      color: #979797;
-      .empty-img {
-        width: 14.2rem;
-        height: 18.8rem;
-      }
-
-      .assets-empty__title {
-        font-family: 'KaiseiOpti-Bold';
-        font-size: 1.6rem;
-        margin: 2.4rem 0 0.8rem;
-      }
-
-      .assets-empty__description {
-        font-family: 'KaiseiOpti-Regular';
-        font-size: 1.4rem;
-      }
-
-      .assets-empty__button {
-        margin-top: 3rem;
-        height: 4.4rem;
-        line-height: 4.4rem;
-        padding: 0 3.8rem;
-        border: 0.1rem solid #c4c4c4;
-        font-family: 'KaiseiOpti-Regular';
-        font-size: 1.6rem;
-        color: #585858;
-        cursor: pointer;
-        text-transform: uppercase;
-      }
-    }
   }
 }
 </style>