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

updated navigatorbar

Browse Source
This commit is contained in:
Ren Amamiya
2023-03-15 14:09:23 +07:00
parent 4ea1cafb7b
commit 4333041872
3 changed files with 131 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/components/columns/navigator/index.tsx
View File

@@ -2,73 +2,60 @@ import ActiveLink from '@components/activeLink';
import Messages from '@components/columns/navigator/messages';
import { PlusIcon } from '@radix-ui/react-icons';
import useLocalStorage from '@rehooks/local-storage';
export default function NavigatorColumn() {
const [follows] = useLocalStorage('follows');
return (
<div className="flex h-full flex-col flex-wrap justify-between overflow-hidden px-2 pt-4 pb-4">
<div className="flex flex-col gap-4">
{/* Create post
<div className="flex flex-col rounded-lg bg-zinc-900 ring-1 ring-white/10">
<div className="flex flex-col p-2">
<div className="flex items-center justify-between">
<h5 className="font-semibold leading-tight text-zinc-100">{profile.display_name || ''}</h5>
<UserDropdownMenu pubkey={currentUser.id} />
</div>
<span className="text-sm leading-tight text-zinc-500">@{profile.username || ''}</span>
</div>
<div className="p-2">
<CreatePost />
</div>
</div>
*/}
{/* Newsfeed */}
<div className="flex flex-col gap-1">
<div className="flex items-center justify-between px-2">
<h3 className="text-xs font-bold uppercase tracking-wide text-zinc-300">Newsfeed</h3>
<button
type="button"
className="group flex h-6 w-6 items-center justify-center rounded-full hover:bg-zinc-900"
>
<PlusIcon className="h-3 w-3 text-zinc-500 group-hover:text-zinc-100" />
</button>
</div>
<div className="flex flex-col gap-1 text-zinc-400">
<ActiveLink
href={`/newsfeed/following`}
activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
className="flex h-8 items-center gap-2.5 rounded-lg px-2.5 text-sm font-medium hover:bg-zinc-900"
>
<div className="inline-flex h-5 w-5 items-center justify-center">
<span className="h-4 w-3.5 rounded bg-gradient-to-br from-fuchsia-500 via-purple-300 to-pink-300"></span>
</div>
<span>following</span>
</ActiveLink>
<ActiveLink
href={`/newsfeed/circle`}
activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white 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"
>
<div className="inline-flex h-5 w-5 items-center justify-center">
<span className="h-4 w-3.5 rounded bg-gradient-to-br from-amber-500 via-orange-200 to-yellow-300"></span>
</div>
<span>circle</span>
</ActiveLink>
</div>
<div className="flex h-full flex-col gap-4 pt-4">
{/* Newsfeed */}
<div className="flex flex-col gap-1 px-2">
<div className="flex items-center justify-between px-2">
<h3 className="text-xs font-bold uppercase tracking-wide text-zinc-300">Newsfeed</h3>
<button
type="button"
className="group flex h-6 w-6 items-center justify-center rounded-full hover:bg-zinc-900"
>
<PlusIcon className="h-3 w-3 text-zinc-500 group-hover:text-zinc-100" />
</button>
</div>
{/* Messages */}
<div className="flex flex-col gap-1">
<div className="flex items-center justify-between px-2">
<h3 className="text-xs font-bold uppercase tracking-wide text-zinc-300">Messages</h3>
<button
type="button"
className="group flex h-6 w-6 items-center justify-center rounded-full hover:bg-zinc-900"
>
<PlusIcon className="h-3 w-3 text-zinc-500 group-hover:text-zinc-100" />
</button>
</div>
<div className="flex flex-col">
<Messages />
</div>
<div className="flex flex-col gap-1 text-zinc-400">
<ActiveLink
href={`/newsfeed/following`}
activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
className="flex h-8 items-center gap-2.5 rounded-lg px-2.5 text-sm font-medium hover:bg-zinc-900"
>
<div className="inline-flex h-5 w-5 items-center justify-center">
<span className="h-4 w-3.5 rounded bg-gradient-to-br from-fuchsia-500 via-purple-300 to-pink-300"></span>
</div>
<span>following</span>
</ActiveLink>
<ActiveLink
href={`/newsfeed/circle`}
activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white 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"
>
<div className="inline-flex h-5 w-5 items-center justify-center">
<span className="h-4 w-3.5 rounded bg-gradient-to-br from-amber-500 via-orange-200 to-yellow-300"></span>
</div>
<span>circle</span>
</ActiveLink>
</div>
</div>
{/* Messages */}
<div className="flex flex-col gap-1 px-2">
<div className="flex items-center justify-between px-2">
<h3 className="text-xs font-bold uppercase tracking-wide text-zinc-300">Messages</h3>
<button
type="button"
className="group flex h-6 w-6 items-center justify-center rounded-full hover:bg-zinc-900"
>
<PlusIcon className="h-3 w-3 text-zinc-500 group-hover:text-zinc-100" />
</button>
</div>
<div className="flex flex-col">
<Messages data={follows} />
</div>
</div>
</div>

29
src/components/columns/navigator/messages/index.tsx
View File

@@ -1,31 +1,14 @@
import Avatar from 'boring-avatars';
import { useState } from 'react';
import { Config, names, uniqueNamesGenerator } from 'unique-names-generator';
import { UserMini } from '@components/user/mini';
const config: Config = {
dictionaries: [names],
};
import { Key } from 'react';
export default function Messages() {
const [data] = useState([...Array(15)]);
export default function Messages({ data }: { data: any }) {
console.log(data);
return (
<>
{data.map((item, index) => (
<div
key={index}
className="flex h-8 cursor-pointer items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:bg-zinc-900"
>
<Avatar
size={20}
name={uniqueNamesGenerator(config).toString()}
variant="beam"
colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
/>
<div>
<p className="text-zinc-400">{uniqueNamesGenerator(config).toString()}</p>
</div>
</div>
{data.map((item: string, index: Key) => (
<UserMini key={index} pubkey={item} />
))}
</>
);