75 lines
2.6 KiB
Vue
75 lines
2.6 KiB
Vue
<script setup>
|
|
defineProps({
|
|
post: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<article class="post-card site-section site-panel-hover group relative">
|
|
<div class="post-card__body site-section-body flex gap-4">
|
|
<PostCardMedia
|
|
:to="post.to"
|
|
:title="post.title"
|
|
:featured-image="post.featuredImage"
|
|
:thumbnail-image="post.featuredImageThumbnail"
|
|
link-class="h-20 w-36 shrink-0"
|
|
aspect-class="h-full w-full"
|
|
/>
|
|
<div class="post-card__content min-w-0">
|
|
<h2 class="post-card__title text-base font-semibold leading-tight">
|
|
<NuxtLink class="post-card__title-link site-interactive hover:opacity-70" :to="post.to">
|
|
{{ post.title }}
|
|
</NuxtLink>
|
|
</h2>
|
|
<p
|
|
v-if="post.excerpt"
|
|
class="post-card__excerpt post-summary-clamp post-summary-clamp--two mt-2 text-sm leading-6 site-muted"
|
|
>
|
|
{{ post.excerpt }}
|
|
</p>
|
|
<p class="post-card__meta mt-2 flex flex-wrap items-center gap-1.5 text-xs site-muted">
|
|
{{ post.publishedAt }}<template v-if="post.tag"> / </template>
|
|
<NuxtLink
|
|
v-if="post.tag && post.tagSlug"
|
|
class="post-card__tag-link site-interactive rounded-md px-1.5 py-px font-medium text-[var(--site-text)] hover:text-[var(--site-accent)]"
|
|
:style="post.tagColor ? { backgroundColor: `${post.tagColor}1a` } : undefined"
|
|
:to="`/tag/${post.tagSlug}`"
|
|
>
|
|
{{ post.tag }}
|
|
</NuxtLink>
|
|
<span
|
|
v-else-if="post.tag"
|
|
class="post-card__tag-label rounded-md px-1.5 py-px font-medium text-[var(--site-text)]"
|
|
:style="post.tagColor ? { backgroundColor: `${post.tagColor}1a` } : undefined"
|
|
>
|
|
{{ post.tag }}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<NuxtLink
|
|
class="post-card__arrow absolute right-6 bottom-4 flex cursor-pointer items-center gap-1 text-[var(--site-text)] opacity-100 transition-[opacity,visibility] duration-200 hover:opacity-75 md:invisible md:opacity-0 md:group-hover:visible md:group-hover:opacity-100"
|
|
:to="post.to"
|
|
aria-label="게시물 보기"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="h-4 w-4"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M17 7 7 17" />
|
|
<path d="M8 7h9v9" />
|
|
</svg>
|
|
</NuxtLink>
|
|
</div>
|
|
</article>
|
|
</template>
|