17 lines
2.1 KiB
JavaScript
17 lines
2.1 KiB
JavaScript
import { c as createComponent, m as maybeRenderHead, a as addAttribute, r as renderTemplate, b as createAstro } from './astro/server_DrnzQWw3.mjs';
|
|
import 'kleur/colors';
|
|
import 'clsx';
|
|
import { f as formatPostRelativeTime } from './cms_CRTVymfB.mjs';
|
|
|
|
const $$Astro = createAstro();
|
|
const $$PostCard = createComponent(($$result, $$props, $$slots) => {
|
|
const Astro2 = $$result.createAstro($$Astro, $$props, $$slots);
|
|
Astro2.self = $$PostCard;
|
|
const { post } = Astro2.props;
|
|
const image = post.thumbnail || post.image;
|
|
const timeLabel = formatPostRelativeTime(post);
|
|
return renderTemplate`${maybeRenderHead()}<article class="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow group"> <a${addAttribute(`/posts/${post.slug}/`, "href")} class="flex gap-4 p-4"> <div class="img-placeholder w-28 sm:w-36 h-24 sm:h-28 rounded-xl flex-shrink-0 relative overflow-hidden"> ${image ? renderTemplate`<img${addAttribute(image, "src")}${addAttribute(post.title, "alt")} class="w-full h-full object-cover" loading="lazy">` : renderTemplate`<div class="absolute inset-0 flex items-center justify-center text-gray-400"> <span class="material-icons text-2xl opacity-30">image</span> </div>`} </div> <div class="flex-1 min-w-0 flex flex-col justify-between"> <div> <span class="text-brand text-xs font-bold">${post.category}</span> <h3 class="font-bold text-sm sm:text-base mt-1 leading-snug line-clamp-2 group-hover:text-brand transition-colors">${post.title}</h3> <p class="text-gray-500 text-xs sm:text-sm mt-1 leading-relaxed line-clamp-2 hidden sm:block">${post.excerpt}</p> </div> <div class="flex items-center justify-between mt-2"> <div class="flex items-center gap-2 text-xs text-gray-400"> <span>${timeLabel}</span> <span>·</span> <span>${post.readTime}</span> <span>·</span> <span>${post.category}</span> </div> <div class="flex items-center gap-1 text-gray-300"> <span class="material-icons text-lg">bookmark_border</span> <span class="material-icons text-lg">share</span> </div> </div> </div> </a> </article>`;
|
|
}, "/Users/drfelfel/ruseemrooz/src/components/PostCard.astro", void 0);
|
|
|
|
export { $$PostCard as $ };
|