mirror of
https://github.com/lumehq/lume.git
synced 2025-10-09 23:42:40 +02:00
updated account column
This commit is contained in:
@@ -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>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@@ -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"
|
||||||
|
@@ -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" />
|
||||||
) : (
|
) : (
|
||||||
|
Reference in New Issue
Block a user