nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-19 19:46:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

updated navigation

Browse Source
This commit is contained in:
Ren Amamiya 2023-04-01 15:46:08 +07:00
parent 383c9e55ac
commit 27082acf5c
7 changed files with 49 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/multiAccounts/activeAccount.tsx
View File

@ -56,12 +56,12 @@ export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }
return ( return (
<DropdownMenu.Root> <DropdownMenu.Root>
<DropdownMenu.Trigger asChild> <DropdownMenu.Trigger asChild>
<button className="relative h-11 w-11 rounded-md"> <button className="relative h-11 w-11 rounded-lg">
<Image <Image
src={userData.picture || DEFAULT_AVATAR} src={userData.picture || DEFAULT_AVATAR}
alt="user's avatar" alt="user's avatar"
fill={true} fill={true}
className="rounded-md object-cover" className="rounded-lg object-cover"
priority priority
/> />
</button> </button>

4
src/components/multiAccounts/inactiveAccount.tsx
View File

@ -11,12 +11,12 @@ export const InactiveAccount = memo(function InactiveAccount({ user }: { user: a
}; };
return ( return (
<button onClick={() => setCurrentUser()} className="relative h-11 w-11 shrink rounded-md"> <button onClick={() => setCurrentUser()} className="relative h-11 w-11 shrink rounded-lg">
<Image <Image
src={userData.picture || DEFAULT_AVATAR} src={userData.picture || DEFAULT_AVATAR}
alt="user's avatar" alt="user's avatar"
fill={true} fill={true}
className="rounded-md object-cover" className="rounded-lg object-cover"
priority priority
/> />
</button> </button>

6
src/components/multiAccounts/index.tsx
View File

@ -38,18 +38,18 @@ export default function MultiAccounts() {
}, []); }, []);
return ( return (
<div className="flex h-full flex-col items-center justify-between px-2 pb-4 pt-4"> <div className="flex h-full flex-col items-center justify-between px-2 pb-4 pt-3">
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<Link <Link
href="/explore" href="/explore"
className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center rounded-md bg-zinc-900 hover:bg-zinc-800" className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center rounded-lg bg-zinc-900 hover:bg-zinc-800"
> >
<LumeSymbol className="h-6 w-auto text-zinc-400 group-hover:text-zinc-200" /> <LumeSymbol className="h-6 w-auto text-zinc-400 group-hover:text-zinc-200" />
</Link> </Link>
<div>{users.map((user) => renderAccount(user))}</div> <div>{users.map((user) => renderAccount(user))}</div>
<Link <Link
href="/onboarding" href="/onboarding"
className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center rounded-md border-2 border-dashed border-zinc-600 hover:border-zinc-400" className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center rounded-lg border-2 border-dashed border-zinc-600 hover:border-zinc-400"
> >
<PlusIcon className="h-4 w-4 text-zinc-400 group-hover:text-zinc-200" /> <PlusIcon className="h-4 w-4 text-zinc-400 group-hover:text-zinc-200" />
</Link> </Link>

25
src/components/navigation/channels.tsx Normal file
View File

@ -0,0 +1,25 @@
import * as Collapsible from '@radix-ui/react-collapsible';
import { TriangleUpIcon } from '@radix-ui/react-icons';
import { useState } from 'react';
export default function Channels() {
const [open, setOpen] = useState(true);
return (
<Collapsible.Root open={open} onOpenChange={setOpen}>
<div className="flex flex-col gap-1 px-2">
<Collapsible.Trigger className="flex cursor-pointer items-center gap-2 px-2 py-1">
<div
className={`inline-flex h-6 w-6 transform items-center justify-center transition-transform duration-150 ease-in-out ${
open ? 'rotate-180' : ''
}`}
>
<TriangleUpIcon className="h-4 w-4 text-zinc-700" />
</div>
<h3 className="text-xs font-bold uppercase tracking-wide text-zinc-600">Channels</h3>
</Collapsible.Trigger>
<Collapsible.Content></Collapsible.Content>
</div>
</Collapsible.Root>
);
}

12
src/components/navigation/chats.tsx
View File

@ -6,21 +6,19 @@ export default function Chats() {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
return ( return (
<Collapsible.Root open={open} onOpenChange={setOpen} className="h-full shrink-0"> <Collapsible.Root open={open} onOpenChange={setOpen}>
<div className="flex h-full flex-col gap-1 px-2 pb-8"> <div className="flex flex-col gap-1 px-2">
<Collapsible.Trigger className="flex cursor-pointer items-center gap-2 px-2 py-1"> <Collapsible.Trigger className="flex cursor-pointer items-center gap-2 px-2 py-1">
<div <div
className={`inline-flex h-6 w-6 transform items-center justify-center transition-transform duration-150 ease-in-out ${ className={`inline-flex h-6 w-6 transform items-center justify-center transition-transform duration-150 ease-in-out ${
open ? 'rotate-180' : '' open ? 'rotate-180' : ''
}`} }`}
> >
<TriangleUpIcon className="h-4 w-4 text-zinc-500" /> <TriangleUpIcon className="h-4 w-4 text-zinc-700" />
</div> </div>
<h3 className="bg-gradient-to-r from-red-300 via-pink-100 to-blue-300 bg-clip-text text-xs font-bold uppercase tracking-wide text-transparent"> <h3 className="text-xs font-bold uppercase tracking-wide text-zinc-600">Chats</h3>
Chats
</h3>
</Collapsible.Trigger> </Collapsible.Trigger>
<Collapsible.Content className="h-full"></Collapsible.Content> <Collapsible.Content></Collapsible.Content>
</div> </div>
</Collapsible.Root> </Collapsible.Root>
); );

5
src/components/navigation/index.tsx
View File

@ -1,11 +1,14 @@
import Channels from '@components/navigation/channels';
import Chats from '@components/navigation/chats'; import Chats from '@components/navigation/chats';
import Newsfeed from '@components/navigation/newsfeed'; import Newsfeed from '@components/navigation/newsfeed';
export default function Navigation() { export default function Navigation() {
return ( return (
<div className="relative flex h-full flex-col gap-1 overflow-hidden pt-4"> <div className="relative flex h-full flex-col gap-1 overflow-hidden pt-3">
{/* Newsfeed */} {/* Newsfeed */}
<Newsfeed /> <Newsfeed />
{/* Channels */}
<Channels />
{/* Chats */} {/* Chats */}
<Chats /> <Chats />
</div> </div>

18
src/components/navigation/newsfeed.tsx
View File

@ -12,21 +12,19 @@ export default function Newsfeed() {
<div className="flex flex-col gap-1 px-2"> <div className="flex flex-col gap-1 px-2">
<Collapsible.Trigger className="flex cursor-pointer items-center gap-2 px-2 py-1"> <Collapsible.Trigger className="flex cursor-pointer items-center gap-2 px-2 py-1">
<div <div
className={`inline-flex h-6 w-6 transform items-center justify-center transition-transform duration-150 ease-in-out ${ className={`inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out ${
open ? 'rotate-180' : '' open ? 'rotate-180' : ''
}`} }`}
> >
<TriangleUpIcon className="h-4 w-4 text-zinc-500" /> <TriangleUpIcon className="h-4 w-4 text-zinc-700" />
</div> </div>
<h3 className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-xs font-bold uppercase tracking-wide text-transparent"> <h3 className="text-xs font-bold uppercase tracking-wide text-zinc-600">Newsfeed</h3>
Newsfeed
</h3>
</Collapsible.Trigger> </Collapsible.Trigger>
<Collapsible.Content className="flex flex-col gap-1 text-zinc-400"> <Collapsible.Content className="flex flex-col text-zinc-400">
<ActiveLink <ActiveLink
href={`/newsfeed/following`} href={`/newsfeed/following`}
activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800" activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:bg-zinc-900" className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:text-zinc-200"
> >
<div className="inline-flex h-5 w-5 items-center justify-center"> <div className="inline-flex h-5 w-5 items-center justify-center">
<span className="h-4 w-3 rounded-sm bg-gradient-to-br from-fuchsia-500 via-purple-300 to-pink-300"></span> <span className="h-4 w-3 rounded-sm bg-gradient-to-br from-fuchsia-500 via-purple-300 to-pink-300"></span>
@ -35,8 +33,8 @@ export default function Newsfeed() {
</ActiveLink> </ActiveLink>
<ActiveLink <ActiveLink
href={`/newsfeed/circle`} href={`/newsfeed/circle`}
activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800" activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:bg-zinc-900" className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:text-zinc-200"
> >
<div className="inline-flex h-5 w-5 items-center justify-center"> <div className="inline-flex h-5 w-5 items-center justify-center">
<span className="h-4 w-3 rounded-sm bg-gradient-to-br from-amber-500 via-orange-200 to-yellow-300"></span> <span className="h-4 w-3 rounded-sm bg-gradient-to-br from-amber-500 via-orange-200 to-yellow-300"></span>