feat: Modify the layout of news items Add the function of expanding or contracting after clicking on them
This commit is contained in:
Kaiwen Gong
parent
460c523633
commit
0590864b6f
4 changed files with 118 additions and 40 deletions
|
|
@ -10,4 +10,12 @@
|
|||
.overflow-hidden-scrollable::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.line-clamp-3-5 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import { ReactMarkdown } from "@/components/Markdown";
|
||||
|
||||
interface ContextItemProperties {
|
||||
item: {
|
||||
name: string;
|
||||
|
|
@ -22,49 +21,60 @@ interface ContextItemProperties {
|
|||
};
|
||||
};
|
||||
}
|
||||
|
||||
const ContextItem: React.FC<ContextItemProperties> = ({ item }) => {
|
||||
return (
|
||||
<div className="border p-4 rounded-lg mb-4 dark:border-gray-700">
|
||||
<h4 className="font-bold text-black dark:text-white">{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"
|
||||
/>
|
||||
)}
|
||||
<div className="text-black dark:text-white">
|
||||
<ReactMarkdown text={item.description} />
|
||||
</div>
|
||||
<a
|
||||
href={item.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-black dark:text-white hover:underline inline-block mt-2"
|
||||
<a
|
||||
href={item.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block no-underline text-black dark:text-white "
|
||||
>
|
||||
<div
|
||||
className="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"
|
||||
>
|
||||
Read more
|
||||
</a>
|
||||
<div className="mt-2">
|
||||
<div className="flex items-center text-sm text-gray-700 dark:text-gray-300">
|
||||
{item.provider[0].image && (
|
||||
<Image
|
||||
src={item.provider[0].image.thumbnail.contentUrl}
|
||||
alt={`${item.provider[0].name} logo`}
|
||||
width={16}
|
||||
height={16}
|
||||
className="mr-2"
|
||||
<div className="w-40 h-40 flex-shrink-0">
|
||||
{/* div for image if the link does not exist use the placeholder image */}
|
||||
{!item.image && (
|
||||
<img
|
||||
src={"https://via.placeholder.com/150"}
|
||||
alt={"placeholder"}
|
||||
className="rounded w-36 h-36 object-cover"
|
||||
/>
|
||||
)}
|
||||
{item.provider[0].name}
|
||||
{item.image && <img src={item.image.contentUrl} alt={item.name} className="rounded w-36 h-36 object-cover" />}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
{new Date(item.datePublished).toLocaleDateString()}
|
||||
<div className="flex flex-col items-stretch relative h-48">
|
||||
{/* div for other text info */}
|
||||
<div className="flex justify-start max-w-xl">
|
||||
<h4 className="font-bold text-white truncate">{item.name}</h4>
|
||||
</div>
|
||||
|
||||
{/* Content container with controlled overflow */}
|
||||
<div className="max-32">
|
||||
<ReactMarkdown text={item.description} className="text-slate-500 dark:text-slate-40 line-clamp-3" />
|
||||
</div>
|
||||
|
||||
{/* Absolute positioned provider info */}
|
||||
<div className="absolute bottom-3 right-0 text-sm text-gray-700 dark:text-gray-300 flex items-end">
|
||||
<div className="absolute right-40 top-0 bottom-0 w-40 bg-gradient-to-r from-transparent to-slate-900 pointer-events-none"></div>
|
||||
{/* <div className="ml-auto text-sm text-gray-700 dark:text-gray-300 flex items-end"> */}
|
||||
{item.provider[0].image && (
|
||||
<Image
|
||||
src={item.provider[0].image.thumbnail.contentUrl}
|
||||
alt={`${item.provider[0].name} logo`}
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
)}
|
||||
<span className="dark:bg-slate-900">{item.provider[0].name}</span>
|
||||
<span className="ml-2 text-xs text-gray-500 dark:text-gray-400 dark:bg-slate-900">
|
||||
{new Date(item.datePublished).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
62
ui/components/ExpandableItems.tsx
Normal file
62
ui/components/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;
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import React from "react";
|
||||
import ContextItem from "./ContextItem";
|
||||
|
||||
import ExpandableItems from "./ExpandableItems";
|
||||
interface ContextItemType {
|
||||
name: string;
|
||||
url: string;
|
||||
|
|
@ -47,9 +47,7 @@ const NewsDetail: React.FC<NewsDetailProperties> = ({ news }) => {
|
|||
<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} />
|
||||
))}
|
||||
<ExpandableItems context={section.context} />
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue