42 lines
1.1 KiB
Vue
42 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
title: string;
|
|
image: string;
|
|
url: string;
|
|
marketplace?: string;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="flex overflow-auto gap-x-5 md:gap-2 items-center md:items-start md:flex-col md:border md:rounded-lg md:p-4 md:dark:border-slate-600"
|
|
>
|
|
<ULink :to="props.url" target="_blank">
|
|
<NuxtImg
|
|
placeholder
|
|
:src="props.image"
|
|
:alt="props.title"
|
|
class="block min-w-[50px] w-[50px] md:w-16 h-[50px] md:h-16"
|
|
/>
|
|
</ULink>
|
|
<div class="grid row-span-3 gap-2">
|
|
<div>
|
|
<ULink
|
|
class="font-semibold hover:underline hover:underline-offset-4"
|
|
:to="props.url"
|
|
target="_blank"
|
|
>{{ props.title }}</ULink
|
|
>
|
|
<div class="text-sm text-slate-500 md:text-xs">
|
|
<slot name="subtitle"></slot>
|
|
</div>
|
|
</div>
|
|
<div class="text-sm md:block text-gray-600 hidden">
|
|
<slot name="description">Lorem ipsum dorcet sit amet</slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|