jamesf/Perplexica
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Modify the layout of news items Add the function of expanding or contracting after clicking on them

Browse source
This commit is contained in:
Kaiwen Gong 2024-07-18 17:33:59 +08:00
parent 460c523633
commit 0590864b6f
4 changed files with 118 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

82
ui/components/ContextItem.tsx
View file

@ -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>
);
};