marzban-dev
49 lines
1.0 KiB
Vue
49 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
// imports
|
|
|
|
import { useImage } from "@vueuse/core";
|
|
|
|
// types
|
|
|
|
type Props = {
|
|
image: string;
|
|
title: string;
|
|
};
|
|
|
|
// props
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const { image } = toRefs(props);
|
|
|
|
const { isLoading: cartImageIsLoading } = useImage({
|
|
src: image.value,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center w-full gap-4">
|
|
<div
|
|
v-if="!cartImageIsLoading"
|
|
class="size-[3.5rem] shrink-0 rounded-100 border border-gray-300 overflow-hidden"
|
|
>
|
|
<NuxtImg
|
|
:src="image"
|
|
alt="product"
|
|
loading="lazy"
|
|
fetch-priority="low"
|
|
class="object-conver"
|
|
/>
|
|
</div>
|
|
<Skeleton
|
|
v-else
|
|
class="!size-[3.5rem] aspect-square shrink-0 !rounded-100 border border-slate-200"
|
|
/>
|
|
<span class="text-xs font-semibold lg:text-sm text-gray-800 line-clamp-2">
|
|
{{ title }}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|