gh_mirrors/newsnow
1
0
Fork 0
mirror of https://github.com/ourongxing/newsnow.git synced 2025-01-31 19:08:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

pref: card extra info ui

Browse Source
This commit is contained in:
Ou 2024-10-05 01:23:39 +08:00
parent ae242300d7
commit b652d73fa6
1 changed files with 8 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/section/Card.tsx
View File

@ -119,7 +119,7 @@ export function NewsCard({ id, inView, isOverlay, handleListeners }: NewsCardPro
defer defer
className="h-full pl-2 pr-3 mr-1" className="h-full pl-2 pr-3 mr-1"
element="div" element="div"
options={{ scrollbars: { autoHide: "scroll" } }} options={{ scrollbars: { autoHide: "scroll" }, overflow: { x: "hidden" } }}
> >
<NewsList query={query} /> <NewsList query={query} />
</OverlayScrollbarsComponent> </OverlayScrollbarsComponent>
@ -156,18 +156,12 @@ function Num({ num }: { num: number }) {
function ExtraInfo({ item }: { item: NewsItem }) { function ExtraInfo({ item }: { item: NewsItem }) {
if (item?.extra?.date) { if (item?.extra?.date) {
return ( return relativeTime(item.extra.date)
<span className="text-xs text-gray-4/80 self-center">
{relativeTime(item.extra.date)}
</span>
)
} }
if (item?.extra?.icon) { if (item?.extra?.icon) {
return ( return (
<span className="text-xs text-gray-4/80 self-start"> <img src={item.extra.icon} className="w-5 inline" />
<img src={item.extra.icon} className="w-2em" />
</span>
) )
} }
} }
@ -180,11 +174,13 @@ function NewsList({ query }: Query) {
{items.slice(0, 20).map((item, i) => ( {items.slice(0, 20).map((item, i) => (
<div key={item.title} className="flex gap-2 items-center"> <div key={item.title} className="flex gap-2 items-center">
<Num num={i + 1} /> <Num num={i + 1} />
<a href={item.url} target="_blank" className="my-1 w-full flex justify-between flex-wrap"> <a href={item.url} target="_blank" className="my-1">
<span className="flex-1 mr-2"> <span className="mr-2">
{item.title} {item.title}
</span> </span>
<ExtraInfo item={item} /> <span className="text-xs text-gray-4/80 truncate align-middle">
<ExtraInfo item={item} />
</span>
</a> </a>
</div> </div>
))} ))}