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

feat: import the news details layout

Browse source
This commit is contained in:
Kaiwen Gong 2024-07-19 11:44:49 +08:00
parent 93b1b186ca
commit 3e88692efd
1 changed files with 13 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
ui/components/ContextItem.tsx
View file

@ -51,27 +51,25 @@ const ContextItem: React.FC<ContextItemProperties> = ({ item }) => {
</div> </div>
{/* Content container with controlled overflow */} {/* Content container with controlled overflow */}
<div className="max-32"> <div className="max-32 overflow-hidden">
<ReactMarkdown text={item.description} className="text-slate-500 dark:text-slate-40 line-clamp-3" /> <ReactMarkdown text={item.description} className="text-slate-500 dark:text-slate-40 line-clamp-3" />
</div> </div>
{/* Absolute positioned provider info */} {/* 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="relative">
<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="absolute bottom-3 right-0 text-sm text-gray-700 dark:text-gray-300 flex items-end z-50">
{item.provider[0].image && ( <div className="absolute z-50 right-60 top-0 bottom-0 w-40 h-10 bg-gradient-to-r from-transparent to-slate-900 pointer-events-none"></div>
<Image <div className="absolute z-50 right-0 top-0 bottom-0 w-60 h-10 bg-slate-900 pointer-events-none"></div>
src={item.provider[0].image.thumbnail.contentUrl} <div className="relative z-50 dark:bg-slate-900 flex items-center">
alt={`${item.provider[0].name} logo`} <span className="truncate max-w-xs">{item.provider[0].name}</span>
width={16} <span className="truncate max-w-xs text-xs text-gray-500 dark:text-gray-400 pl-3">
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()} {new Date(item.datePublished).toLocaleDateString()}
</span> </span>
</div> </div>
</div> </div>
<div className="absolute bottom-0 right-0 left-0 top-0 bg-white dark:bg-slate-900 opacity-80 z-40 pointer-events-none"></div>
</div>
</div>
</div> </div>
</a> </a>
); );