new changes

This commit is contained in:
Mamalizz
2024-12-15 22:14:29 +03:30
parent bbe0559a15
commit 4dd8a4cc7e
2 changed files with 0 additions and 118 deletions
-63
View File
@@ -1,63 +0,0 @@
<script lang="ts" setup>
// import
import Tag from "~/components/ui/Tag.vue";
import Rate from "~/components/ui/Rate.vue";
import ColorCircle from "~/components/ui/ColorCircle.vue";
// types
type Props = {
brand: string;
title: string;
colors: string[];
price: number;
picture: string;
tag?: string;
rate?: number;
}
// props
defineProps<Props>();
</script>
<template>
<div class="relative h-[500px] w-[400px] rounded-2xl bg-black/10 overflow-hidden p-6">
<img
src="~/assets/img/product-2.jpg"
class="size-full object-cover absolute inset-0"
alt="product-background"
/>
<div class="flex justify-between items-center absolute px-6 pt-6 top-0 w-full inset-x-0">
<Rate v-if="rate">
{{ rate }}
</Rate>
<Tag v-if="tag">
{{ tag }}
</Tag>
</div>
<div class="absolute inset-x-0 bottom-0 pb-6 px-6 flex justify-between items-center">
<span class="typo-p-md">
${{ price }}
</span>
<div class="flex flex-col gap-2 items-end">
<span class="typo-p-md ">
{{ brand }}
</span>
<span class="typo-sub-h-md">
{{ title }}
</span>
<div class="flex items-center gap-2 mt-1">
<ColorCircle
v-for="color in colors"
:key="color"
:style="{backgroundColor: color}"
/>
</div>
</div>
</div>
</div>
</template>
@@ -1,55 +0,0 @@
<script lang="ts" setup>
// state
const quantity = ref(1);
const maxQuantity = ref(10);
</script>
<template>
<div class="flex gap-12">
<div class="w-[800px] flex flex-col items-end gap-3 mt-12">
<span class="typo-label-sm">
Nova
</span>
<h1 class="typo-h-2">
Nova
</h1>
<div class="flex w-full items-center justify-between">
<Rating />
<span class="typo-p-2xl">
$689.00
</span>
</div>
<p class="typo-p-md text-slate-500 text-left">
Compact, stylish, and engineered for the future, Eco Tunes are more than just headphones; they're a
statement. Hear the future, save the planet.
</p>
<div class="w-full flex flex-col gap-6 mt-4">
<RemainQuantity :quantity="maxQuantity" />
<div class="w-full flex gap-3 flex-col">
<div class="w-full flex gap-3">
<Button
class="w-full"
end-icon="ci:plus"
>
Add to cart
</Button>
<QuantityCounter v-model="quantity" :max="maxQuantity" />
</div>
<Button
class="w-full"
variant="outlined"
>
Buy it now
</Button>
</div>
<InfoCard />
<Share />
</div>
</div>
<div class="bg-red-300 w-full h-[500px] rounded-200">
</div>
</div>
</template>