mearge with front

2024-12-12 21:53:53 +03:30
parent 0a63bc275c c3ed710a26
commit 907a115e3e
25 changed files with 146 additions and 53 deletions
@@ -1,12 +1,10 @@
@import "tailwindcss";

-@import "./typo.utils.css";
@import "./other.utils.css";
+@import "./typo.utils.css";
@import "./button.comp.css";
@import "./input.comp.css";

-@config "../../tailwind.config.js";
-
@theme {
    /* COLORS */
    --color-slate-50: hsl(210, 40%, 98%);
@@ -110,6 +108,7 @@

    /* FONT FAMILY */
    --font-lato: "Lato", sans-serif;
+    --font-inter: "Inter", sans-serif;
    --font-dmsans: "DM Sans", sans-serif;
    --font-iran-yekan-x: "IRANYekanXVF, sans-serif";

@@ -1,96 +1,96 @@
 /* TYPO HERO */
@utility typo-hero-1 {
-    @apply text-[96px] leading-[96px] font-bold;
+    @apply text-[96px] leading-[96px] font-bold font-dmsans;
 }

@utility typo-hero-2 {
-    @apply text-[72px] leading-[72px] font-bold;
+    @apply text-[72px] leading-[72px] font-bold font-dmsans;
 }

 /* TYPE HEADING */
@utility typo-h-1 {
-    @apply text-[64px] leading-[72px] font-bold;
+    @apply text-[64px] leading-[72px] font-bold font-dmsans;
 }

@utility typo-h-2 {
-    @apply text-[56px] leading-[64px] font-bold;
+    @apply text-[56px] leading-[64px] font-bold font-dmsans;
 }

@utility typo-h-3 {
-    @apply text-[48px] leading-[56px] font-bold;
+    @apply text-[48px] leading-[56px] font-bold font-dmsans;
 }

@utility typo-h-4 {
-    @apply text-[40px] leading-[52px] font-bold;
+    @apply text-[40px] leading-[52px] font-bold font-inter;
 }

@utility typo-h-5 {
-    @apply text-[32px] leading-[40px] font-bold;
+    @apply text-[32px] leading-[40px] font-bold font-inter;
 }

@utility typo-h-6 {
-    @apply text-[24px] leading-[32px] font-bold;
+    @apply text-[24px] leading-[32px] font-bold font-inter;
 }

 /* TYPE SUBHEADING */
@utility typo-sub-h-xl {
-    @apply text-[20px] leading-[24px] font-semibold;
+    @apply text-[20px] leading-[24px] font-semibold font-inter;
 }

@utility typo-sub-h-lg {
-    @apply text-[18px] leading-[24px] font-semibold;
+    @apply text-[18px] leading-[24px] font-semibold font-inter;
 }

@utility typo-sub-h-md {
-    @apply text-[16px] leading-[20px] font-semibold;
+    @apply text-[16px] leading-[20px] font-semibold font-inter;
 }

@utility typo-sub-h-sm {
-    @apply text-[14px] leading-[20px] font-semibold;
+    @apply text-[14px] leading-[20px] font-semibold font-inter;
 }

@utility typo-sub-h-xs {
-    @apply text-[12px] leading-[16px] font-semibold;
+    @apply text-[12px] leading-[16px] font-semibold font-inter;
 }

 /* TYPE PARAGRAPH */
@utility typo-p-2xl {
-    @apply text-[24px] leading-[40px] font-normal;
+    @apply text-[24px] leading-[40px] font-light font-inter;
 }

@utility typo-p-xl {
-    @apply text-[20px] leading-[32px] font-normal;
+    @apply text-[20px] leading-[32px] font-light font-inter;
 }

@utility typo-p-lg {
-    @apply text-[18px] leading-[32px] font-normal;
+    @apply text-[18px] leading-[32px] font-light font-inter;
 }

@utility typo-p-md {
-    @apply text-[16px] leading-[28px] font-normal;
+    @apply text-[16px] leading-[28px] font-light font-inter;
 }

@utility typo-p-sm {
-    @apply text-[14px] leading-[24px] font-normal;
+    @apply text-[14px] leading-[24px] font-light font-inter;
 }

@utility typo-p-xs {
-    @apply text-[12px] leading-[16px] font-normal;
+    @apply text-[12px] leading-[16px] font-light font-inter;
 }

 /* TYPO LABEL */
@utility typo-label-lg {
-    @apply text-[18px] leading-[24px] font-medium;
+    @apply text-[18px] leading-[24px] font-medium font-inter;
 }

@utility typo-label-md {
-    @apply text-[16px] leading-[24px] font-medium;
+    @apply text-[16px] leading-[24px] font-medium font-inter;
 }

@utility typo-label-sm {
-    @apply text-[14px] leading-[20px] font-medium;
+    @apply text-[14px] leading-[20px] font-medium font-inter;
 }

@utility typo-label-xs {
-    @apply text-[12px] leading-[16px] font-medium;
+    @apply text-[12px] leading-[16px] font-medium font-inter;
 }
@@ -41,4 +41,5 @@ const classes = computed(() => {
        <slot />
        <Icon v-if="endIcon" :name="endIcon" class="me-0" />
    </button>
-</template>
+</template>
+
@@ -1,7 +1,7 @@
 <script setup lang="ts">

 // types
-import Tooltip from "~/components/ui/Tooltip.vue";
+import Tooltip from "~/components/Tooltip.vue";

 type Props = {
    variant?: "solid" | "outlined",
@@ -39,7 +39,7 @@ const classes = computed(() => {

 <template>
    <Tooltip :title="message">
-        <div :class="classes" @click="inputRef?.focus()">
+        <div v-bind="$attrs" :class="classes" @click="inputRef?.focus()">
            <Icon v-if="startIcon" :name="startIcon" class="ms-0" size="24px" />
            <input ref="inputRef" class="outline-none" :placeholder="placeholder" />
            <Icon v-if="endIcon" :name="endIcon" class="me-0" size="24px" />
@@ -0,0 +1,63 @@
+<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>
@@ -6,8 +6,7 @@ type Props = {
 }

 // prop
-const props = defineProps<Props>();
-const { title } = toRefs(props);
+defineProps<Props>();

 </script>

@@ -0,0 +1,3 @@
+<template>
+    <div class="size-[30px] rounded-full shadow-black/30 shadow-inner"></div>
+</template>
@@ -0,0 +1,6 @@
+<template>
+    <div class="bg-white flex justify-center items-center gap-2 rounded-full border-[0.5px] border-slate-200 px-4 py-2 typo-p-sm">
+        <slot />
+        <Icon name="ci:star-solid" class="**:fill-warning-500 size-4.5" />
+    </div>
+</template>
@@ -0,0 +1,5 @@
+<template>
+    <div class="text-white flex items-center justify-center rounded-full px-4 py-2 bg-danger-600 typo-sub-h-sm">
+        <slot />
+    </div>
+</template>
@@ -1,6 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
    compatibilityDate: "2024-11-01",
+    ssr: false,
    devtools: { enabled: false },
    css: ["~/assets/css/tailwind.css"],

@@ -12,27 +13,28 @@ export default defineNuxtConfig({
    },

    icon: {
-        mode : "svg",
+        mode: "svg",
        customCollections: [
            {
-                prefix: 'ci',
-                dir: './assets/custom-icons'
-            },
-        ],
+                prefix: "ci",
+                dir: "./assets/custom-icons"
+            }
+        ]
    },

-    modules: [[
-        'reka-ui/nuxt',
+    modules: [
        [
            "@nuxtjs/google-fonts",
            {
                families: {
-                    'DM Sans': true,
-                    Lato: true,
+                    "DM Sans": "100..900",
+                    Inter: "100..900",
                    download: true,
                    inject: false
                }
            }
-        ]
-    ], "@nuxt/icon"]
+        ],
+        "@nuxt/icon",
+        "reka-ui/nuxt"
+    ]
 });
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div class="w-full h-screen p-8 flex gap-8 justify-start items-start">
+        <Product
+            brand="Samsung"
+            title="Galaxy S20 Ultra"
+            picture="/assets/img/product-1.jpg"
+            :colors="['#0000ff', '#00ff00','red']"
+            :price="599"
+            :rate="2.4"
+            tag="New"
+        />
+        <Product
+            brand="Samsung"
+            title="Galaxy S20 Ultra"
+            picture="/assets/img/product-1.jpg"
+            :colors="['#0000ff', '#00ff00','red']"
+            :price="599"
+            :rate="2.4"
+            tag="New"
+        />
+    </div>
+</template>
@@ -1,11 +0,0 @@
-const plugin = require("tailwindcss/plugin");
-
-/** @type {import("tailwindcss").Config} */
-module.exports = {
-    theme: {
-        extend : {
-        }
-    },
-    plugins: [
-    ]
-};