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

wip: convert more components to new ui

Browse Source
This commit is contained in:
Ren Amamiya
2023-08-02 08:28:43 +07:00
parent 1ddcbf1654
commit a85bcf917b
23 changed files with 87 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/space/components/addFeed.tsx
View File

@@ -84,15 +84,15 @@ export function AddFeedBlock() {
className="inline-flex h-9 w-72 items-center justify-start gap-2.5 rounded-md px-2.5"
>
<div className="flex items-center gap-2">
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
<CommandIcon width={12} height={12} className="text-zinc-500" />
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
<CommandIcon width={12} height={12} className="text-white" />
</div>
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
<span className="text-sm leading-none text-zinc-500">F</span>
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
<span className="text-sm leading-none text-white">F</span>
</div>
</div>
<div>
<h5 className="font-medium text-zinc-400">New feed block</h5>
<h5 className="font-medium text-white/50">New feed block</h5>
</div>
</button>
<Transition appear show={isOpen} as={Fragment}>

10
src/app/space/components/addHashtag.tsx
View File

@@ -68,15 +68,15 @@ export function AddHashTagBlock() {
className="inline-flex h-9 w-72 items-center justify-start gap-2.5 rounded-md px-2.5"
>
<div className="flex items-center gap-2">
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
<CommandIcon width={12} height={12} className="text-zinc-500" />
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
<CommandIcon width={12} height={12} className="text-white" />
</div>
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
<span className="text-sm leading-none text-zinc-500">T</span>
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
<span className="text-sm leading-none text-white">T</span>
</div>
</div>
<div>
<h5 className="font-medium text-zinc-400">New hashtag block</h5>
<h5 className="font-medium text-white/50">New hashtag block</h5>
</div>
</button>
<Transition appear show={isOpen} as={Fragment}>

10
src/app/space/components/addImage.tsx
View File

@@ -89,15 +89,15 @@ export function AddImageBlock() {
className="inline-flex h-9 w-72 items-center justify-start gap-2.5 rounded-md px-2.5"
>
<div className="flex items-center gap-2">
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
<CommandIcon width={12} height={12} className="text-zinc-500" />
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
<CommandIcon width={12} height={12} className="text-white" />
</div>
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
<span className="text-sm leading-none text-zinc-500">I</span>
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
<span className="text-sm leading-none text-white">I</span>
</div>
</div>
<div>
<h5 className="font-medium text-zinc-400">New image block</h5>
<h5 className="font-medium text-white/50">New image block</h5>
</div>
</button>
<Transition appear show={isOpen} as={Fragment}>

11
src/app/space/components/blocks/feed.tsx
View File

@@ -113,13 +113,12 @@ export function FeedBlock({ params }: { params: Block }) {
);
return (
<div className="w-[400px] shrink-0 border-r border-zinc-900">
<div
ref={parentRef}
className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20"
>
<TitleBar id={params.id} title={params.title} />
<div
ref={parentRef}
className="scrollbar-hide flex h-full w-full flex-col justify-between gap-1.5 overflow-y-auto pb-20 pt-1.5"
style={{ contain: 'strict' }}
>
<div className="h-full">
{status === 'loading' ? (
<div className="px-3 py-1.5">
<div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">

11
src/app/space/components/blocks/hashtag.tsx
View File

@@ -31,13 +31,12 @@ export function HashtagBlock({ params }: { params: Block }) {
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
return (
<div className="w-[400px] shrink-0 border-r border-zinc-900">
<div
ref={parentRef}
className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20"
>
<TitleBar id={params.id} title={params.title + ' in 48 hours ago'} />
<div
ref={parentRef}
className="scrollbar-hide flex h-full w-full flex-col justify-between gap-1.5 overflow-y-auto pb-20 pt-1.5"
style={{ contain: 'strict' }}
>
<div className="h-full">
{status === 'loading' ? (
<div className="px-3 py-1.5">
<div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">

6
src/app/space/components/blocks/thread.tsx
View File

@@ -22,9 +22,9 @@ export function ThreadBlock({ params }: { params: Block }) {
// useLiveThread(params.content);
return (
<div className="w-[400px] shrink-0 border-r border-zinc-900">
<div className="scrollbar-hide w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20">
<TitleBar id={params.id} title={params.title} />
<div className="scrollbar-hide flex h-full w-full flex-col gap-3 overflow-y-auto pb-20 pt-1.5">
<div className="h-full">
{status === 'loading' ? (
<div className="px-3 py-1.5">
<div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">
@@ -33,7 +33,7 @@ export function ThreadBlock({ params }: { params: Block }) {
</div>
) : (
<div className="h-min w-full px-3 pt-1.5">
<div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
<div className="rounded-xl bg-white/10 px-3 pt-3">
<ThreadUser pubkey={data.pubkey} time={data.created_at} />
<div className="mt-2">
<NoteContent content={data.content} />

16
src/app/space/components/blocks/user.tsx
View File

@@ -35,17 +35,17 @@ export function UserBlock({ params }: { params: Block }) {
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
return (
<div className="h-full w-[400px] shrink-0 border-r border-zinc-900">
<div
ref={parentRef}
className="scrollbar-hide h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20"
>
<TitleBar id={params.id} title={params.title} />
<div
ref={parentRef}
className="scrollbar-hide flex h-full flex-1 flex-col gap-1.5 overflow-y-auto pt-1.5"
>
<div className="h-full">
<div className="px-3 pt-1.5">
<UserProfile pubkey={params.content} />
</div>
<div>
<h3 className="mt-2 px-3 text-lg font-semibold text-zinc-300">
<h3 className="mt-2 px-3 text-lg font-semibold text-white">
Latest activities
</h3>
<div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
@@ -57,9 +57,9 @@ export function UserBlock({ params }: { params: Block }) {
</div>
) : itemsVirtualizer.length === 0 ? (
<div className="px-3 py-1.5">
<div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-6">
<div className="rounded-xl bg-white/10 px-3 py-6">
<div className="flex flex-col items-center gap-4">
<p className="text-center text-sm text-zinc-300">
<p className="text-center text-sm text-white">
No new posts about this hashtag in 48 hours ago
</p>
</div>

4
src/app/space/index.tsx
View File

@@ -54,7 +54,7 @@ export function SpaceScreen() {
);
return (
<div className="scrollbar-hide flex h-full w-full flex-nowrap overflow-x-auto overflow-y-hidden">
<div className="scrollbar-hide flex h-full w-full flex-nowrap divide-x divide-white/5 overflow-x-auto overflow-y-hidden">
<FollowingBlock />
{status === 'loading' ? (
<div className="flex w-[350px] shrink-0 flex-col">
@@ -63,7 +63,7 @@ export function SpaceScreen() {
className="group flex h-11 w-full items-center justify-between overflow-hidden px-3"
/>
<div className="flex w-full flex-1 items-center justify-center p-3">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" />
<LoaderIcon className="h-5 w-5 animate-spin text-white/10" />
</div>
</div>
) : (