Create blog post

frontend/components/global/BlogPost.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+
+// types
+
+type Props = {
+    tag: string;
+    date: string;
+    comments: number;
+    title: string;
+    description: string;
+    link: string;
+    variant?: "sm" | "lg";
+}
+
+// props
+
+const props = withDefaults(defineProps<Props>(), {
+    variant: "lg"
+});
+const {} = toRefs(props);
+
+</script>
+
+<template>
+    <div
+        :class="variant === 'lg' ? 'rounded-150 overflow-hidden' : ''"
+        class="max-h-[700px] h-[700px] relative"
+    >
+
+        <Tag
+            v-if="variant === 'lg'"
+            class="bg-success-500 absolute left-10 top-10 z-20"
+        >
+            اسپیکر
+        </Tag>
+
+        <div
+            v-if="variant === 'sm'"
+            class="h-[350px] rounded-150 overflow-hidden relative"
+        >
+            <Tag
+                class="bg-success-500 absolute z-20 left-6 top-6"
+            >
+                اسپیکر
+            </Tag>
+
+            <img
+                src="/img/hero-bg.jpg"
+                class="absolute size-full object-cover z-10"
+                alt=""
+            />
+        </div>
+
+        <div
+            :class="variant === 'lg' ? 'absolute px-10' : 'invert mt-8'"
+            class="bottom-10 flex flex-col gap-6 z-20"
+        >
+
+            <div class="flex items-center gap-6">
+                <div class="flex items-center gap-2">
+                    <Icon
+                        name="ci:comment"
+                        size="18"
+                        class="**:stroke-white"
+                    />
+                    <span class="typo-p-sm text-white">
+                        ۰ نظر
+                    </span>
+                </div>
+                <div class="flex items-center gap-2">
+                    <Icon
+                        name="ci:calendar"
+                        size="18"
+                        class="**:stroke-white"
+                    />
+                    <span class="typo-p-sm text-white">
+                        ۳۱ مهر ۱۴۰۳
+                    </span>
+                </div>
+            </div>
+
+            <div class="flex gap-4 flex-col">
+                <span
+                    :class="variant === 'lg' ? 'typo-h-4' : 'typo-h-6'"
+                    class="text-white"
+                >
+                    برسی آیفون ۱۶ پرومکس
+                </span>
+                <p
+                    :class="variant === 'lg' ? 'typo-h-4' : 'typo-h-6 text-slate-500'"
+                    class="typo-p-md text-white text-justify"
+                >
+                    نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
+                    نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
+                    کتابهای زیادی در شصت و سه درصد گذشته.
+                </p>
+            </div>
+
+            <span class="underline text-white typo-p-md">
+                بیشتر بخوانید...
+            </span>
+
+        </div>
+
+        <img
+            v-if="variant === 'lg'"
+            src="/img/hero-bg.jpg"
+            class="absolute size-full object-cover z-10"
+            alt=""
+        />
+
+        <div
+            v-if="variant === 'lg'"
+            class="w-full h-full bg-linear-to-t from-black to-transparent absolute inset-0 z-15"
+        />
+    </div>
+</template>