Aida_Purchaser_Front/src/views/wardrobe/index.vue

<template>
	<div class="wardrobe-page">
		<div class="wardrobe-hero flex flex-col flex-center">
			<div class="wardrobe-hero__title">{{ t('Wardrobe.title') }}</div>
			<div class="wardrobe-hero__subtitle">{{ t('Wardrobe.subtitle') }}</div>
		</div>

		<div class="wardrobe-shell">
			<div class="wardrobe-tabs">
				<div
					class="wardrobe-tabs__nav"
					role="tablist"
					:aria-label="t('Wardrobe.tabs.ariaLabel')"
				>
					<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">{{ t('Wardrobe.sort.label') }}</div>
					<el-select
						v-model="activeSort"
						popper-class="wardrobe-sort-dropdown"
						:placeholder="t('Wardrobe.sort.placeholder')"
					>
						<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" :sort-type="activeSort" />
		</div>
		<Footer />
	</div>
</template>
<script setup lang="ts">
	import { computed, shallowRef } from 'vue'
	import { useI18n } from 'vue-i18n'
	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 { t } = useI18n({ useScope: 'global' })

	const tabs = computed<TabItem[]>(() => [
		{
			key: 'assets',
			label: t('Wardrobe.tabs.assets')
		},
		{
			key: 'orders',
			label: t('Wardrobe.tabs.orders')
		}
	])

	const sortOptions = computed<SortOption[]>(() => [
		{
			label: t('Wardrobe.sort.dateAdded'),
			value: 1
		},
		{
			label: t('Wardrobe.sort.selectedFirst'),
			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;
			background: url('@/assets/images/background.png') no-repeat;
			background-size: cover;
			position: relative;
			// &::before {
			//   position: absolute;
			//   top: 0;
			//   right: 0;
			//   bottom: 0;
			//   left: 0;
			//   background-color: rgba(0, 0, 0, 0.2);
			// }
			.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>

<style lang="less">
	.wardrobe-sort-dropdown {
		.el-select-dropdown__list {
			.el-select-dropdown__item {
				padding: 0 2rem;
			}
		}
	}
</style>