reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redesign daily page

Browse Source
This commit is contained in:
Ren Amamiya
2023-05-06 16:59:06 +07:00
parent 417df1796d
commit 473f474e20
13 changed files with 80 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/daily/layout.tsx
View File

@@ -20,7 +20,7 @@ export function LayoutNewsfeed({ children }: { children: React.ReactNode }) {
<div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
<Navigation />
</div>
<div className="col-span-3 m-3 overflow-hidden xl:col-span-4">{children}</div>
<div className="col-span-3 overflow-hidden xl:col-span-4">{children}</div>
</div>
</div>
</div>

60
src/app/daily/pages/index.page.tsx
View File

@@ -45,46 +45,48 @@ export function Page() {
}, [fetchNextPage, allRows.length, rowVirtualizer.getVirtualItems()]);
return (
<div className="flex h-full flex-col justify-between gap-4">
<div
ref={parentRef}
className="scrollbar-hide flex h-full flex-col justify-between gap-1.5 overflow-y-auto"
style={{ contain: 'strict' }}
>
<div className="flex h-11 w-full shrink-0 items-center justify-between border-b border-zinc-800"></div>
<div className="relative flex w-full flex-1 flex-col justify-between rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
<div className="flex-1">
{status === 'loading' ? (
<Skeleton count={5} containerClassName="flex-1" />
) : status === 'error' ? (
<div>{error.message}</div>
) : (
<div ref={parentRef} className="scrollbar-hide h-full w-full overflow-y-auto" style={{ contain: 'strict' }}>
<div
className="relative w-full"
style={{
height: `${rowVirtualizer.getTotalSize()}px`,
}}
>
<div
className="relative w-full"
className="absolute left-0 top-0 w-full"
style={{
height: `${rowVirtualizer.getTotalSize()}px`,
transform: `translateY(${itemsVirtualizer[0].start - rowVirtualizer.options.scrollMargin}px)`,
}}
>
<div
className="absolute left-0 top-0 w-full"
style={{
transform: `translateY(${itemsVirtualizer[0].start - rowVirtualizer.options.scrollMargin}px)`,
}}
>
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
const note = allRows[virtualRow.index];
if (note) {
if (note.kind === 1) {
return (
<div key={virtualRow.index} data-index={virtualRow.index} ref={rowVirtualizer.measureElement}>
<NoteBase key={note.event_id} event={note} />
</div>
);
} else {
return (
<div key={virtualRow.index} data-index={virtualRow.index} ref={rowVirtualizer.measureElement}>
<NoteQuoteRepost key={note.event_id} event={note} />
</div>
);
}
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
const note = allRows[virtualRow.index];
if (note) {
if (note.kind === 1) {
return (
<div key={virtualRow.index} data-index={virtualRow.index} ref={rowVirtualizer.measureElement}>
<NoteBase key={note.event_id} event={note} />
</div>
);
} else {
return (
<div key={virtualRow.index} data-index={virtualRow.index} ref={rowVirtualizer.measureElement}>
<NoteQuoteRepost key={note.event_id} event={note} />
</div>
);
}
})}
</div>
}
})}
</div>
</div>
)}