42 lines
991 B
Vue
42 lines
991 B
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-2 items-center md:items-start md:flex-col md:border md:rounded-lg md:p-4"
|
|
>
|
|
<ULink :to="props.url" target="_blank">
|
|
<NuxtImg
|
|
placeholder
|
|
:src="props.image"
|
|
:alt="props.title"
|
|
class="block w-16 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-xs text-slate-600">
|
|
<slot name="subtitle"></slot>
|
|
</div>
|
|
</div>
|
|
<div class="text-sm md:block hidden">
|
|
<slot name="description">Lorem ipsum dorcet sit amet</slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|