60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
import React from "react";
|
|
import ContextItem from "./ContextItem";
|
|
|
|
interface ContextItemType {
|
|
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;
|
|
};
|
|
};
|
|
article?: string;
|
|
score?: number;
|
|
}
|
|
|
|
interface NewsDetailProperties {
|
|
news: {
|
|
title: string;
|
|
sections: {
|
|
title: string;
|
|
content: string;
|
|
context: ContextItemType[];
|
|
}[];
|
|
};
|
|
}
|
|
|
|
const NewsDetail: React.FC<NewsDetailProperties> = ({ news }) => {
|
|
return (
|
|
<article className="prose lg:prose-xl dark:prose-invert">
|
|
<h1 className="text-black dark:text-white">{news.title}</h1>
|
|
{news.sections.map((section, index) => (
|
|
<section key={index}>
|
|
<h2 className="text-black dark:text-white">{section.title}</h2>
|
|
<p className="text-black dark:text-white">{section.content}</p>
|
|
<div className="mt-4">
|
|
<h3 className="text-black dark:text-white">Related Context:</h3>
|
|
{section.context.map((item, index_) => (
|
|
<ContextItem key={index_} item={item} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
))}
|
|
</article>
|
|
);
|
|
};
|
|
|
|
export default NewsDetail;
|