39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import React from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { ArrowRight } from "lucide-react";
|
|
|
|
const CardBlog = ({
|
|
item,
|
|
}: {
|
|
item: {
|
|
id: number;
|
|
date: string;
|
|
title: string;
|
|
title_page: string;
|
|
description: string;
|
|
image: string;
|
|
alt_image: string;
|
|
};
|
|
}) => {
|
|
return (
|
|
<Card className="p-4">
|
|
<img src={item.image} alt={item.alt_image} className="rounded-md" />
|
|
<CardContent className="p-4">
|
|
<Badge className="bg-red-600 text-white">{item.date}</Badge>
|
|
<p className="text-gray-500 text-sm mt-2">{item.date}</p>
|
|
<h3 className="text-md font-semibold mt-2 text-gray-900">
|
|
{item.title}
|
|
</h3>
|
|
<p className="text-sm text-gray-600 mt-2">{item.description}</p>
|
|
<Button variant="link" className="text-red-600 mt-2">
|
|
Baca Selengkapnya <ArrowRight className="ml-2 w-4 h-4" />
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default CardBlog;
|