Aida_Purchaser_Front/src/views/wardrobe/Orders.vue

<script setup lang="ts">
import { shallowRef } from 'vue'
import { useRouter } from 'vue-router'

type OrderStatus = 'all' | 'paid' | 'unpaid' | 'cancelled'

interface StatusOption {
	key: OrderStatus
	label: string
}

const router = useRouter()

const statusOptions: StatusOption[] = [
	{ key: 'all', label: 'All' },
	{ key: 'paid', label: 'Paid' },
	{ key: 'unpaid', label: 'Unpaid' },
	{ key: 'cancelled', label: 'Cancelled' }
]

const activeStatus = shallowRef<OrderStatus>('all')

const goToDigitalItems = () => {
	router.push('/digitalItem')
}
</script>

<template>
	<div class="wardrobe-orders">
		<div class="orders-toolbar">
			<button
				v-for="status in statusOptions"
				:key="status.key"
				class="orders-toolbar__chip"
				type="button"
				:class="{ 'is-active': activeStatus === status.key }"
				@click="activeStatus = status.key"
			>
				{{ status.label }}
			</button>
		</div>

		<div class="orders-empty">
			<div class="orders-empty__illustration" aria-hidden="true">
				<div class="orders-empty__hook"></div>
				<div class="orders-empty__hanger"></div>
				<div class="orders-empty__body"></div>
				<div class="orders-empty__hem"></div>
			</div>

			<h2 class="orders-empty__title">Nothing in Wardrobe yet</h2>
			<p class="orders-empty__description">
				Explore the digital item and add pieces to your collection.
			</p>
			<button class="orders-empty__button" type="button" @click="goToDigitalItems">
				Explore Digital Items
			</button>
		</div>
	</div>
</template>

<style lang="less" scoped>
	.wardrobe-orders {
		--wardrobe-border-color: #d9d4cd;
		--wardrobe-border-dark: #c8c0b4;
		height: 100%;
		display: flex;
		flex-direction: column;
		background: #fffdf8;

		> .orders-toolbar {
			display: flex;
			align-items: center;
			gap: 1rem;
			padding: 2.2rem 3rem 0;
			flex-wrap: wrap;

			> .orders-toolbar__chip {
				height: 3rem;
				padding: 0 1.4rem;
				border: 0.1rem solid var(--wardrobe-border-color);
				border-radius: 999rem;
				background: #ffffff;
				font-family: 'KaiseiOpti-Regular';
				font-size: 1.2rem;
				line-height: 1;
				color: #8b8277;
				cursor: pointer;

				&.is-active {
					background: #232323;
					border-color: #232323;
					color: #ffffff;
				}
			}
		}

		> .orders-empty {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 4rem 2rem 7rem;
			text-align: center;

			> .orders-empty__illustration {
				position: relative;
				width: 8.8rem;
				height: 10.4rem;
				margin-bottom: 2.4rem;
				opacity: 0.55;

				> .orders-empty__hook {
					position: absolute;
					left: 50%;
					top: 0;
					width: 1.6rem;
					height: 1.6rem;
					border: 0.14rem solid #b8b1a5;
					border-bottom-color: transparent;
					border-left-color: transparent;
					border-radius: 50%;
					transform: translateX(-10%) rotate(-18deg);
				}

				> .orders-empty__hanger {
					position: absolute;
					left: 50%;
					top: 1.2rem;
					width: 4rem;
					height: 2rem;
					border-top: 0.14rem solid #b8b1a5;
					border-left: 0.14rem solid #b8b1a5;
					border-right: 0.14rem solid #b8b1a5;
					transform: translateX(-50%) skewY(-12deg);
				}

				> .orders-empty__body {
					position: absolute;
					left: 50%;
					top: 3.2rem;
					width: 4.8rem;
					height: 4.8rem;
					border: 0.14rem solid #b8b1a5;
					border-top: 0;
					transform: translateX(-50%);

					&::before,
					&::after {
						content: '';
						position: absolute;
						top: 0.2rem;
						width: 1.7rem;
						height: 2.6rem;
						border: 0.14rem solid #b8b1a5;
						border-bottom: 0;
					}

					&::before {
						left: -1.2rem;
						transform: skewY(22deg);
					}

					&::after {
						right: -1.2rem;
						transform: skewY(-22deg);
					}
				}

				> .orders-empty__hem {
					position: absolute;
					left: 50%;
					bottom: 0.8rem;
					width: 4.6rem;
					height: 2rem;
					border-left: 0.14rem solid #b8b1a5;
					border-right: 0.14rem solid #b8b1a5;
					border-bottom: 0.14rem solid #b8b1a5;
					transform: translateX(-50%);

					&::before,
					&::after {
						content: '';
						position: absolute;
						top: 0;
						width: 1.3rem;
						height: 100%;
						border-bottom: 0.14rem solid #b8b1a5;
					}

					&::before {
						left: -0.1rem;
						transform: skewX(24deg);
						transform-origin: left bottom;
					}

					&::after {
						right: -0.1rem;
						transform: skewX(-24deg);
						transform-origin: right bottom;
					}
				}
			}

			> .orders-empty__title {
				margin: 0;
				font-family: 'KaiseiOpti-Bold';
				font-size: 1.8rem;
				line-height: 1.3;
				color: #8c8479;
			}

			> .orders-empty__description {
				max-width: 32rem;
				margin: 1rem 0 0;
				font-family: 'KaiseiOpti-Regular';
				font-size: 1.3rem;
				line-height: 1.7;
				color: #b1a99e;
			}

			> .orders-empty__button {
				margin-top: 2rem;
				height: 3.8rem;
				padding: 0 2.4rem;
				border: 0.1rem solid var(--wardrobe-border-color);
				background: #ffffff;
				font-family: 'KaiseiOpti-Regular';
				font-size: 1.2rem;
				line-height: 1;
				letter-spacing: 0.06rem;
				text-transform: uppercase;
				color: #6d655b;
				cursor: pointer;
				transition: background-color 0.2s ease, border-color 0.2s ease;

				&:hover {
					background: #f8f3ea;
					border-color: var(--wardrobe-border-dark);
				}
			}
		}
	}

	@media (max-width: 960px) {
		.wardrobe-orders {
			> .orders-toolbar {
				padding: 2rem 2rem 0;
			}

			> .orders-empty {
				padding: 5rem 2rem 7rem;
			}
		}
	}
</style>