forked from mrwyndham/fastpocket
44 lines
1010 B
TypeScript
44 lines
1010 B
TypeScript
import React from "react";
|
|
|
|
import { PostMetadata } from "@/types";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
|
|
function BlogCard({
|
|
title,
|
|
slug,
|
|
subtitle,
|
|
imageUrl,
|
|
}: {
|
|
title: string;
|
|
slug: string;
|
|
subtitle: string;
|
|
imageUrl: string;
|
|
}) {
|
|
return (
|
|
<>
|
|
<Link
|
|
href={`/blogs/${slug}`}
|
|
className="w-52 md:w-64 md:max-w-[300px] h-fit flex flex-col items-center flex-auto bg-base-200 p-10 rounded-xl shadow-lg"
|
|
>
|
|
<div className="w-full aspect-[4/3] rounded-lg overflow-hidden relative">
|
|
<Image
|
|
src={imageUrl}
|
|
alt={title}
|
|
className="w-full h-full object-cover"
|
|
fill
|
|
/>
|
|
</div>
|
|
<div className="w-full h-2/5 ">
|
|
<h1 className="pt-4 pb-2 xl:pt-8 text-base-content text-xl font-bold ">
|
|
{title}
|
|
</h1>
|
|
<p className="text-base-content ">{subtitle}</p>
|
|
</div>
|
|
</Link>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default BlogCard;
|