highperfocused/lume
1
0
Fork 0
mirror of https://github.com/lumehq/lume.git synced 2025-03-28 02:31:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

updated account column

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/columns/account/account.tsx
View File

@ -1,7 +1,7 @@
import Image from 'next/image';
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 setCurrentUser = () => {
@ -9,17 +9,8 @@ export const Account = memo(function Account({ user, current }: { user: any; cur
};
return (
<button
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" />
) : (
<div className="h-11 w-11 animate-pulse rounded-full bg-zinc-700" />
)}
<button onClick={() => setCurrentUser()} className="relative h-11 w-11 shrink rounded-full">
<Image src={userData.picture} alt="user's avatar" fill={true} className="rounded-full object-cover" />
</button>
);
});

4
src/components/columns/account/index.tsx
View File

@ -2,14 +2,12 @@ import { Account } from '@components/columns/account/account';
import LumeSymbol from '@assets/icons/Lume';
import { PlusIcon } from '@radix-ui/react-icons';
import { useLocalStorage } from '@rehooks/local-storage';
import Link from 'next/link';
import { useCallback, useEffect, useState } from 'react';
import Database from 'tauri-plugin-sql-api';
export default function AccountColumn() {
const [users, setUsers] = useState([]);
const [currentUser]: any = useLocalStorage('current-user');
const getAccounts = useCallback(async () => {
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 flex-col gap-4">
{users.map((user, index) => (
<Account key={index} user={user} current={currentUser.id} />
<Account key={index} user={user} />
))}
<Link
href="/onboarding"

2
src/components/user/mini.tsx
View File

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