47 lines
1.4 KiB
Vue
47 lines
1.4 KiB
Vue
<script lang="ts" setup>
|
|
defineProps<{
|
|
title: string
|
|
excerpt?: string
|
|
image?: string
|
|
slug?: string
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<article class="group border p-5 m-2 rounded-2xl shadow-lg text-zinc-700">
|
|
<NuxtLink :to="slug" class="grid grid-cols-1 sm:grid-cols-9 gap-5">
|
|
<div class="sm:col-span-2">
|
|
<img
|
|
class="lg:h-48 md:h-36 sm:h-36 w-full object-cover object-center rounded-2xl shadow-lg group-hover:scale-[1.05] transition-all duration-500"
|
|
src="/blogs/hello-world/riyad.jpg"
|
|
alt="card photo"
|
|
/>
|
|
</div>
|
|
<div class="sm:col-span-7">
|
|
<h2 class="text-3xl font-semibold text-black pb-1 group-hover:text-sky-600">
|
|
This is the card title
|
|
</h2>
|
|
<p class="text-ellipsis line-clamp-2">
|
|
{{ excerpt }}
|
|
</p>
|
|
<div class="text-black text-sm pt-4 pb-2">
|
|
<div class="flex items-center">
|
|
<LogoDate />
|
|
3rd July 2022
|
|
</div>
|
|
<div class="flex items-center gap-1 flex-wrap">
|
|
<LogoTag />
|
|
<span>JavaScript</span>
|
|
<span>Typescript</span>
|
|
<span>Clean</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex group-hover:underline text-sky-600 items-center pt-2">
|
|
<p>Read More</p>
|
|
<LogoArrow />
|
|
</div>
|
|
</div>
|
|
</NuxtLink>
|
|
</article>
|
|
</template>
|