mirror of
https://github.com/elk-zone/elk.git
synced 2024-12-14 23:21:46 +03:00
50 lines
1.2 KiB
Vue
50 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import type { Card } from 'masto'
|
|
|
|
defineProps<{
|
|
card: Card
|
|
}>()
|
|
|
|
/**
|
|
* TODO:
|
|
* - extract username
|
|
* - generate user profile link
|
|
* - quotation icon ?
|
|
*/
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="card.image"
|
|
flex flex-col
|
|
display-block of-hidden
|
|
bg-code
|
|
relative
|
|
border="base"
|
|
w-full min-h-50 md:min-h-60 border-b
|
|
justify-center
|
|
rounded-lg
|
|
>
|
|
<div p4 sm:px-8 flex flex-col justify-between min-h-50 md:min-h-60 h-full>
|
|
<div flex justify-between items-center gap-2 sm:gap-6 h-full mb-2 min-h-35 md:min-h-45>
|
|
<div flex flex-col gap-2>
|
|
<a flex gap-1 text-sm flex-wrap leading-none :href="card.url" target="_blank">
|
|
<span>{{ card.title }}</span>
|
|
</a>
|
|
<a sm:text-lg :href="card.url" target="_blank">
|
|
<span text-secondary leading-tight>{{ card.description }}</span>
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a :href="card.url" target="_blank">
|
|
<img w-30 aspect-square width="20" height="20" rounded-2 :src="card.image">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div flex justify-between>
|
|
<div />
|
|
<div text-2xl i-ri:mastodon-fill text-secondary />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|