mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-18 11:13:30 +00:00
updated navigatorbar
This commit is contained in:
Ren Amamiya
parent
4ea1cafb7b
commit
4333041872
@ -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>
|
||||
|
||||
@ -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} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
||||
75
src/components/user/mini.tsx
Normal file
75
src/components/user/mini.tsx
Normal file
@ -0,0 +1,75 @@
|
||||
import { DatabaseContext } from '@components/contexts/database';
|
||||
import { ImageWithFallback } from '@components/imageWithFallback';
|
||||
|
||||
import { truncate } from '@utils/truncate';
|
||||
|
||||
import Avatar from 'boring-avatars';
|
||||
import { memo, useCallback, useContext, useEffect, useState } from 'react';
|
||||
|
||||
export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
|
||||
const { db }: any = useContext(DatabaseContext);
|
||||
const [profile, setProfile] = useState({ picture: null, display_name: null });
|
||||
|
||||
const insertCacheProfile = useCallback(
|
||||
async (event) => {
|
||||
const metadata: any = JSON.parse(event.content);
|
||||
// insert to database
|
||||
await db.execute(
|
||||
`INSERT OR IGNORE INTO cache_profiles (id, metadata) VALUES ("${pubkey}", '${JSON.stringify(metadata)}')`
|
||||
);
|
||||
// update state
|
||||
setProfile(metadata);
|
||||
},
|
||||
[db, pubkey]
|
||||
);
|
||||
|
||||
const getCacheProfile = useCallback(async () => {
|
||||
const result: any = await db.select(`SELECT metadata FROM cache_profiles WHERE id = "${pubkey}"`);
|
||||
return result[0];
|
||||
}, [db, pubkey]);
|
||||
|
||||
useEffect(() => {
|
||||
getCacheProfile()
|
||||
.then((res) => {
|
||||
if (res !== undefined) {
|
||||
setProfile(JSON.parse(res.metadata));
|
||||
} else {
|
||||
fetch(`https://rbr.bio/${pubkey}/metadata.json`, { redirect: 'follow' })
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
return response.json();
|
||||
} else if (response.status === 404) {
|
||||
return Promise.reject('error 404');
|
||||
} else {
|
||||
return Promise.reject('some other error: ' + response.status);
|
||||
}
|
||||
})
|
||||
.then((data) => insertCacheProfile(data))
|
||||
.catch((error) => console.log('error is', error));
|
||||
}
|
||||
})
|
||||
.catch(console.error);
|
||||
}, [getCacheProfile, insertCacheProfile, pubkey]);
|
||||
|
||||
return (
|
||||
<div className="flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm font-medium hover:bg-zinc-900">
|
||||
<div className="relative h-5 w-5">
|
||||
{profile.picture ? (
|
||||
<ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded-full object-cover" />
|
||||
) : (
|
||||
<Avatar
|
||||
size={20}
|
||||
name={pubkey}
|
||||
variant="beam"
|
||||
colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<p className="leading-tight text-zinc-300">
|
||||
{profile.display_name ? profile.display_name : truncate(pubkey, 16, ' .... ')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user