CMU Coding Bootcamp
thecoded.prof
1import { Link } from "react-router";
2
3export function BlogPostItem({
4 title,
5 idx,
6 datePosted,
7 summary,
8}: {
9 title: string;
10 idx: number;
11 datePosted: string;
12 summary: string;
13}) {
14 return (
15 <>
16 <Link to={`/entries/${idx}`}>
17 <div className="border border-gray-300 p-3.5 md:p-5 rounded-md flex flex-col gap justify-center items-center max-w-lg">
18 <div className="flex flex-row gap-4 justify-center items-center">
19 <p className="text-gray-500">#{idx + 1}</p>
20 <h2 className="text-xl md:text-2xl dark:text-gray-300 text-gray-900 font-bold ">
21 {title}
22 </h2>
23 </div>
24 <p className="text-gray-500 text-sm">Posted on {datePosted}</p>
25 <div className="h-3" />
26 <p className="text-left w-full">
27 {summary.length > 100 ? summary.substring(0, 100) + "..." : summary}
28 </p>
29 </div>
30 </Link>
31 </>
32 );
33}