43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
|
import React from "react";
|
||
|
|
import Image from "next/image";
|
||
|
|
|
||
|
|
interface ContextItemProps {
|
||
|
|
item: {
|
||
|
|
name: string;
|
||
|
|
url: string;
|
||
|
|
description: string;
|
||
|
|
provider: { name: string; image?: { thumbnail: { contentUrl: string } } }[];
|
||
|
|
datePublished: string;
|
||
|
|
image?: {
|
||
|
|
contentUrl: string;
|
||
|
|
thumbnail: { contentUrl: string; width: number; height: number };
|
||
|
|
};
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
const ContextItem: React.FC<ContextItemProps> = ({ item }) => {
|
||
|
|
return (
|
||
|
|
<div className="border p-4 rounded-lg mb-4">
|
||
|
|
<h4 className="font-bold">{item.name}</h4>
|
||
|
|
{item.image && (
|
||
|
|
<Image
|
||
|
|
src={item.image.contentUrl}
|
||
|
|
alt={item.name}
|
||
|
|
width={item.image.thumbnail.width}
|
||
|
|
height={item.image.thumbnail.height}
|
||
|
|
className="my-2 rounded"
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
<p>{item.description}</p>
|
||
|
|
<div className="text-sm text-gray-500 mt-2">
|
||
|
|
{item.provider[0].name} | {new Date(item.datePublished).toLocaleDateString()}
|
||
|
|
</div>
|
||
|
|
<a href={item.url} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">
|
||
|
|
Read more
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ContextItem;
|