Aida_Purchaser_Front/src/views/wardrobe/index.vue

<template>
  <div class="wardrobe-page">
    <section class="wardrobe-hero flex flex-col flex-center">
      <div class="wardrobe-hero__title">My Wardrobe</div>
      <div class="wardrobe-hero__subtitle">Your digital pieces, all in one place</div>
    </section>

    <section class="wardrobe-shell">
      <div class="wardrobe-tabs">
        <div class="wardrobe-tabs__nav" role="tablist" aria-label="Wardrobe tabs">
          <button
            v-for="tab in tabs"
            :key="tab.key"
            class="wardrobe-tabs__item"
            :class="{ 'is-active': activeTab === tab.key }"
            type="button"
            role="tab"
            :aria-selected="activeTab === tab.key"
            @click="activeTab = tab.key"
          >
            {{ tab.label }}
          </button>
        </div>

        <div v-if="activeTab === 'assets'" class="wardrobe-tabs__sort">
          <div class="wardrobe-tabs__sort-label">Sort by</div>
          <el-select v-model="activeSort" placeholder="Select">
            <el-option
              v-for="option in sortOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </div>
      </div>

      <component :is="activePanel" class="wardrobe-shell__panel" />
    </section>
  </div>
</template>
<script setup lang="ts">
import { computed, shallowRef } from 'vue'
import Assets from './Assets.vue'
import Orders from './Orders.vue'

type WardrobeTab = 'assets' | 'orders'

interface TabItem {
  key: WardrobeTab
  label: string
}

interface SortOption {
  label: string
  value: number
}

const tabs: TabItem[] = [
  {
    key: 'assets',
    label: 'Assets'
  },
  {
    key: 'orders',
    label: 'Orders'
  }
]

const sortOptions: SortOption[] = [
  {
    label: 'Default',
    value: 0
  },
  {
    label: 'Date Added',
    value: 1
  },
  {
    label: 'Selected First',
    value: 2
  }
]

const activeTab = shallowRef<WardrobeTab>('assets')
const activeSort = shallowRef(1)

const activePanel = computed(() => {
  return activeTab.value === 'assets' ? Assets : Orders
})
</script>

<style lang="less" scoped>
.wardrobe-page {
  --wardrobe-border-color: #d9d4cd;
  --wardrobe-text-main: #232323;
  --wardrobe-text-secondary: #7a746d;
  --wardrobe-surface: #fffdf8;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  overflow: hidden;

  .wardrobe-hero {
    height: 14.8rem;
    background-color: #f5f5f5;
    .wardrobe-hero__title {
      margin: 0;
      font-family: 'KaiseiOpti-Bold';
      font-size: 4rem;
      color: #232323;
      line-height: 3.6rem;
    }

    .wardrobe-hero__subtitle {
      margin-top: 1rem;
      font-family: 'KaiseiOpti-Regular';
      font-size: 1.4rem;
      line-height: 2.4rem;
      color: #585858;
    }
  }

  > .wardrobe-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    > .wardrobe-tabs {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
      padding: 0 9rem;
      border-bottom: 0.1rem solid var(--wardrobe-border-color);
      background: #ffffff;

      > .wardrobe-tabs__nav {
        display: flex;
        align-items: center;

        > .wardrobe-tabs__item {
          position: relative;
          height: 6rem;
          padding: 0 1.8rem;
          border: 0;
          background: transparent;
          font-family: 'KaiseiOpti-Regular';
          font-size: 1.4rem;
          line-height: 1;
          color: #7d766f;
          cursor: pointer;
          width: 13.9rem;

          &::after {
            content: '';
            position: absolute;
            left: 1.8rem;
            right: 1.8rem;
            bottom: -0.1rem;
            height: 0.2rem;
            background: transparent;
            transition: background-color 0.2s ease;
          }

          &.is-active {
            font-family: 'KaiseiOpti-Bold';
            color: var(--wardrobe-text-main);

            &::after {
              background: var(--wardrobe-text-main);
            }
          }
        }
      }

      > .wardrobe-tabs__sort {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-shrink: 0;

        > .wardrobe-tabs__sort-label {
          font-family: 'KaiseiOpti-Regular';
          font-size: 1.4rem;
          line-height: 2.4rem;
          color: #7d766f;
          white-space: nowrap;
        }

        :deep(.el-select) {
          width: 13rem;
        }

        :deep(.el-select__wrapper) {
          min-height: 3.6rem;
          padding: 0 1.2rem;
          background: #ffffff;
          box-shadow: none;
        }

        :deep(.el-select__selected-item) {
          font-family: 'KaiseiOpti-Regular';
          font-size: 1.4rem;
          color: #232323;
        }
      }
    }

    > .wardrobe-shell__panel {
      flex: 1;
      min-height: 0;
    }
  }
}
</style>