xiaoxue_admin
/
Folo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: entry column animation

This commit is contained in:
DIYgod 2024-04-16 11:39:42 +08:00
parent 0cf3b651d5
commit 18c0bd94ef
No known key found for this signature in database
1 changed files with 38 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/renderer/src/components/entry-column.tsx
View File

@ -1,7 +1,7 @@
import { useEntries } from '@renderer/lib/entries'
import { ActivedList } from '@renderer/lib/types'
import dayjs from '@renderer/lib/dayjs'
import { parseHtml } from '@renderer/lib/parse-html'
import { m } from 'framer-motion'
export function EntryColumn({ activedList }: { activedList: ActivedList }) {
const entries = useEntries({
@ -11,39 +11,49 @@ export function EntryColumn({ activedList }: { activedList: ActivedList }) {
return (
<div>
<div className='ml-7'>
<div className="ml-7">
<div className="font-bold text-lg">{activedList?.name}</div>
<div className="text-xs font-medium text-zinc-400">
{entries.data?.pages?.[0].total} Items
</div>
</div>
{entries.data?.pages?.map((page) =>
page.entries.map((entry) => (
<div key={entry.id} className="mt-5 flex">
<img
src={`https://icons.duckduckgo.com/ip3/${new URL(entry.feed.site_url).host}.ico`}
className="w-5 h-5 mr-2 rounded-sm shrink-0"
/>
<div className='line-clamp-5 text-sm flex-1 -mt-1'>
<div className='text-zinc-500 text-[13px]'>
{dayjs
.duration(dayjs(entry.published_at).diff(dayjs(), 'minute'), 'minute')
.humanize()} ago
<div>
{entries.data?.pages?.map((page, index) => (
<m.div
key={`${activedList?.level}-${activedList?.id}-${index}`}
initial={{ y: 100, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
exit={{ y: -100, opacity: 0 }}
>
{page.entries.map((entry) => (
<div key={entry.id} className="mt-5 flex">
<img
src={`https://icons.duckduckgo.com/ip3/${new URL(entry.feed.site_url).host}.ico`}
className="w-5 h-5 mr-2 rounded-sm shrink-0"
/>
<div className="line-clamp-5 text-sm flex-1 -mt-1">
<div className="text-zinc-500 text-[13px]">
{dayjs
.duration(dayjs(entry.published_at).diff(dayjs(), 'minute'), 'minute')
.humanize()}{' '}
ago
</div>
<div className="font-medium">{entry.title}</div>
<div className="text-zinc-500 text-[13px]">{entry.text}</div>
</div>
{entry.images?.[0] && (
<img
src={entry.images[0]}
className="w-14 h-14 shrink-0 ml-2 rounded object-cover"
referrerPolicy="no-referrer"
loading="lazy"
/>
)}
</div>
<div className='font-medium'>{entry.title}</div>
<div className='text-zinc-500 text-[13px]'>{entry.text}</div>
</div>
{entry.images?.[0] && (
<img
src={entry.images[0]}
className="w-14 h-14 shrink-0 ml-2 rounded object-cover"
referrerPolicy="no-referrer"
loading='lazy'
/>
)}
</div>
))
)}
))}
</m.div>
))}
</div>
</div>
)
}