updated account column

This commit is contained in:
Ren Amamiya
2023-03-15 14:38:16 +07:00
parent 4333041872
commit 387ca17a59
3 changed files with 5 additions and 16 deletions

View File

@@ -1,7 +1,7 @@
import Image from 'next/image'; import Image from 'next/image';
import { memo } from 'react'; import { memo } from 'react';
export const Account = memo(function Account({ user, current }: { user: any; current: string }) { export const Account = memo(function Account({ user }: { user: any }) {
const userData = JSON.parse(user.metadata); const userData = JSON.parse(user.metadata);
const setCurrentUser = () => { const setCurrentUser = () => {
@@ -9,17 +9,8 @@ export const Account = memo(function Account({ user, current }: { user: any; cur
}; };
return ( return (
<button <button onClick={() => setCurrentUser()} className="relative h-11 w-11 shrink rounded-full">
onClick={() => setCurrentUser()}
className={`relative h-11 w-11 shrink overflow-hidden rounded-full ${
current === user.pubkey ? 'ring-1 ring-fuchsia-500 ring-offset-4 ring-offset-black' : ''
}`}
>
{userData?.picture !== undefined ? (
<Image src={userData.picture} alt="user's avatar" fill={true} className="rounded-full object-cover" /> <Image src={userData.picture} alt="user's avatar" fill={true} className="rounded-full object-cover" />
) : (
<div className="h-11 w-11 animate-pulse rounded-full bg-zinc-700" />
)}
</button> </button>
); );
}); });

View File

@@ -2,14 +2,12 @@ import { Account } from '@components/columns/account/account';
import LumeSymbol from '@assets/icons/Lume'; import LumeSymbol from '@assets/icons/Lume';
import { PlusIcon } from '@radix-ui/react-icons'; import { PlusIcon } from '@radix-ui/react-icons';
import { useLocalStorage } from '@rehooks/local-storage';
import Link from 'next/link'; import Link from 'next/link';
import { useCallback, useEffect, useState } from 'react'; import { useCallback, useEffect, useState } from 'react';
import Database from 'tauri-plugin-sql-api'; import Database from 'tauri-plugin-sql-api';
export default function AccountColumn() { export default function AccountColumn() {
const [users, setUsers] = useState([]); const [users, setUsers] = useState([]);
const [currentUser]: any = useLocalStorage('current-user');
const getAccounts = useCallback(async () => { const getAccounts = useCallback(async () => {
const db = await Database.load('sqlite:lume.db'); const db = await Database.load('sqlite:lume.db');
@@ -26,7 +24,7 @@ export default function AccountColumn() {
<div className="flex h-full flex-col items-center justify-between px-2 pt-4 pb-4"> <div className="flex h-full flex-col items-center justify-between px-2 pt-4 pb-4">
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
{users.map((user, index) => ( {users.map((user, index) => (
<Account key={index} user={user} current={currentUser.id} /> <Account key={index} user={user} />
))} ))}
<Link <Link
href="/onboarding" href="/onboarding"

View File

@@ -53,7 +53,7 @@ export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
return ( 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="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"> <div className="relative h-5 w-5 rounded-full">
{profile.picture ? ( {profile.picture ? (
<ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded-full object-cover" /> <ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded-full object-cover" />
) : ( ) : (