<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import sellerHeader from "../seller-header.vue"

//const props = defineProps({
//})
//const emit = defineEmits([
//])
let data = reactive({
})
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="myListings-seller">
		<seller-header
			title="My Listings"
			tip="Active listings and unpublished inventory."
		>
			<template #right>
				<div class="button">
					<span>New Listing</span>
					<div class="icon">
						<i class="fi fi-br-plus"></i>
					</div>
				</div>
			</template>
		</seller-header>
		<div class="content">
			123122222s
		</div>
	</div>
</template>
<style scoped lang="less">
	.myListings-seller {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: relative;
		display: flex;
		flex-direction: column;
		.button {
			width: 16rem;
			line-height: 6rem;
			border-radius: 4rem;
			display: flex;
			border: 1.5px solid #000000;
			background-color: #000;
			color: #fff;
			transition: all .3s;
			gap: .8rem;
			align-items: center;
			justify-content: center;
			font-size: 1.6rem;
			cursor: pointer;
			i{
				color: #fff;
				display: flex;
				font-size: 1.6rem;
			}
			&:hover{
				background-color: #fff;
				color: #000;
				i{
					color: #000;
				}
			}
		}
		> .content {
			margin-top: 2rem;
			flex: 1;
			overflow: hidden;
		}
	}
</style>