feat: align the NewsDetail page style with the related contents on the Search page
This commit is contained in:
Kaiwen Gong
parent
0c5d1320e9
commit
48c8181fca
5 changed files with 75 additions and 15 deletions
86
ui/components/NewsDetailPage/ContextItem.tsx
Normal file
86
ui/components/NewsDetailPage/ContextItem.tsx
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import Image from "next/image";
|
||||
import { ReactMarkdown } from "@/components/Markdown";
|
||||
import PreviewNewsDetail from "./PreviewNewsDetail";
|
||||
|
||||
interface ContextItemProperties {
|
||||
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 };
|
||||
};
|
||||
article?: string;
|
||||
score?: number;
|
||||
};
|
||||
}
|
||||
|
||||
const ProviderInfo: React.FC<{ name: string; date: string }> = ({ name, date }) => (
|
||||
<div className="absolute -bottom-3 right-0 text-sm text-gray-700 dark:text-gray-300 flex items-end">
|
||||
<div className="relative dark:bg-slate-900 flex items-center">
|
||||
<span className="truncate max-w-xs">{name}</span>
|
||||
<span className="truncate max-w-xs text-xs text-gray-500 dark:text-gray-400 pl-3">{date}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ContextItem: React.FC<ContextItemProperties> = ({ item }) => {
|
||||
const [isPreviewVisible, setIsPreviewVisible] = useState(false);
|
||||
|
||||
const togglePreview = () => {
|
||||
setIsPreviewVisible(!isPreviewVisible);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
onClick={togglePreview}
|
||||
className="no-underline text-black dark:text-white bg-gray-200 dark:bg-slate-900 rounded-lg px-6 py-2 ring-1 items-stretch h-56 ring-slate-900/5 shadow-xl flex flex-row cursor-pointer hover:scale-95 transition-transform duration-300"
|
||||
>
|
||||
<div className="w-40 h-40 flex-shrink-0">
|
||||
{item.image ? (
|
||||
<Image
|
||||
src={item.image.contentUrl}
|
||||
alt={item.name}
|
||||
width={150}
|
||||
height={150}
|
||||
className="rounded w-36 h-36 object-cover"
|
||||
/>
|
||||
) : (
|
||||
<Image
|
||||
src={"https://via.placeholder.com/150"}
|
||||
alt={"placeholder"}
|
||||
width={150}
|
||||
height={150}
|
||||
className="rounded w-36 h-36 object-cover"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col items-stretch relative h-48">
|
||||
<div className="flex justify-start max-w-xl">
|
||||
<h4 className="font-bold text-black dark:text-white truncate">{item.name}</h4>
|
||||
</div>
|
||||
<div className="max-32 overflow-hidden">
|
||||
<ReactMarkdown text={item.description} className="text-gray-700 dark:text-gray-300 line-clamp-3" />
|
||||
</div>
|
||||
<ProviderInfo name={item.provider[0].name} date={new Date(item.datePublished).toLocaleDateString()} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isPreviewVisible && <PreviewNewsDetail item={item} togglePreview={togglePreview} />}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContextItem;
|
||||
62
ui/components/NewsDetailPage/ExpandableItems.tsx
Normal file
62
ui/components/NewsDetailPage/ExpandableItems.tsx
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
"use client";
|
||||
import React, { useState } 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 ExpandableItemsProperties {
|
||||
context: ContextItemType[];
|
||||
}
|
||||
|
||||
const ExpandableItems: React.FC<ExpandableItemsProperties> = ({ context }) => {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
const handleShowMore = () => {
|
||||
setExpanded(!expanded);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button
|
||||
onClick={handleShowMore}
|
||||
className="transition duration-300 ease-in-out transform hover:scale-105 text-white font-bold py-2 px-4 rounded mb-4"
|
||||
>
|
||||
{expanded ? "Show Less" : `Show More (${context.length})`}
|
||||
</button>
|
||||
<div className="mb-4">
|
||||
<ContextItem item={context[0]} />
|
||||
</div>
|
||||
{expanded &&
|
||||
context.slice(1).map((item, index) => (
|
||||
<div key={index} className="mb-4 last:mb-0">
|
||||
<ContextItem item={item} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExpandableItems;
|
||||
58
ui/components/NewsDetailPage/NewsDetail.tsx
Normal file
58
ui/components/NewsDetailPage/NewsDetail.tsx
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
import React from "react";
|
||||
import ContextItem from "./ContextItem";
|
||||
import ExpandableItems from "./ExpandableItems";
|
||||
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>
|
||||
<ExpandableItems context={section.context} />
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</article>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewsDetail;
|
||||
53
ui/components/NewsDetailPage/PreviewNewsDetail.tsx
Normal file
53
ui/components/NewsDetailPage/PreviewNewsDetail.tsx
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import { ReactMarkdown } from "@/components/Markdown";
|
||||
|
||||
interface ContextItemProperties {
|
||||
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 };
|
||||
};
|
||||
article?: string;
|
||||
score?: number;
|
||||
};
|
||||
togglePreview: () => void; // Add togglePreview prop
|
||||
}
|
||||
|
||||
const PreviewNewsDetail: React.FC<ContextItemProperties> = ({ item, togglePreview = () => {} }) => {
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50 p-8">
|
||||
<div className="bg-white dark:bg-slate-800 p-8 justify-center rounded-lg overflow-hidden relative w-4/5 h-4/5">
|
||||
<div className="flex justify-between items-start">
|
||||
<h2 className="truncate">{item.name}</h2>
|
||||
<button onClick={togglePreview} className="p-2 rounded focus:outline-none">
|
||||
<span className="text-4xl font-bold">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<ReactMarkdown className="overflow-y-auto h-2/3 mb-8" text={item.article || ""} />
|
||||
<a
|
||||
href={item.url}
|
||||
className="absolute bottom-2 right-2 block no-underline"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Visit
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PreviewNewsDetail;
|
||||
Loading…
Add table
Add a link
Reference in a new issue