marzban-dev
116 lines
3.7 KiB
Vue
116 lines
3.7 KiB
Vue
<script setup lang="ts">
|
||
// types
|
||
|
||
import { usePersianTimeAgo } from "~/composables/global/usePersianTimeAgo";
|
||
|
||
type Props = {
|
||
id: number;
|
||
slug: string;
|
||
tag: string;
|
||
date: string;
|
||
title: string;
|
||
description: string;
|
||
variant?: "sm" | "lg";
|
||
category: SubCategory;
|
||
image: string;
|
||
};
|
||
|
||
// props
|
||
|
||
const props = withDefaults(defineProps<Props>(), {
|
||
variant: "lg",
|
||
});
|
||
|
||
const { date } = toRefs(props);
|
||
|
||
// state
|
||
|
||
const createdAt = usePersianTimeAgo(new Date(date.value));
|
||
</script>
|
||
|
||
<template>
|
||
<NuxtLink
|
||
:to="`/article/${slug}`"
|
||
:class="variant === 'lg' ? 'aspect-square rounded-150 overflow-hidden' : 'h-fit'"
|
||
class="group w-full relative block"
|
||
>
|
||
<Tag
|
||
v-if="variant === 'lg'"
|
||
class="bg-slate-950 absolute left-6 top-6 z-20"
|
||
>
|
||
{{ category.name }}
|
||
</Tag>
|
||
|
||
<div
|
||
v-if="variant === 'sm'"
|
||
class="aspect-square w-full rounded-150 overflow-hidden relative"
|
||
>
|
||
<Tag class="bg-slate-950 absolute z-20 left-4 sm:left-6 top-4 sm:top-6 max-sm:text-xs">
|
||
{{ category.name }}
|
||
</Tag>
|
||
|
||
<NuxtImg
|
||
:src="image"
|
||
loading="lazy"
|
||
fetch-priority="low"
|
||
class="group-hover:scale-105 transition-transform duration-200 absolute size-full object-cover z-10"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
|
||
<div
|
||
:class="variant === 'lg' ? 'absolute px-6' : 'invert mt-6'"
|
||
class="bottom-6 lg:bottom-8 flex flex-col gap-4 z-20"
|
||
>
|
||
<div class="flex items-center gap-4 lg:gap-6">
|
||
<div class="flex items-center gap-2">
|
||
<Icon
|
||
name="ci:comment"
|
||
class="**:stroke-white size-3 md:size-3.5"
|
||
/>
|
||
<span class="typo-p-xs md:typo-p-sm text-white"> ۰ نظر </span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<Icon
|
||
name="ci:calendar"
|
||
class="**:stroke-white size-3 md:size-3.5"
|
||
/>
|
||
<span class="typo-p-xs md:typo-p-sm text-white">
|
||
{{ createdAt }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex gap-4 flex-col">
|
||
<span
|
||
:class="variant === 'lg' ? 'line-clamp-2' : ''"
|
||
class="text-base md:text-lg font-medium lg:typo-h-6 text-white"
|
||
>
|
||
{{ title }}
|
||
</span>
|
||
<p
|
||
v-if="variant === 'sm'"
|
||
class="text-white typo-p-xs max-sm:!leading-[175%] sm:typo-p-sm md:typo-p-md line-clamp-3"
|
||
>
|
||
تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در
|
||
زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<NuxtImg
|
||
v-if="variant === 'lg'"
|
||
loading="lazy"
|
||
fetch-priority="low"
|
||
:src="image"
|
||
class="group-hover:scale-105 transition-transform duration-200 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"
|
||
/>
|
||
</NuxtLink>
|
||
</template>
|