mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43:30 +00:00
updated UI/UX
This commit is contained in:
parent
e9aa7bd4ff
commit
8b2c6e67f5
@ -1,6 +1,6 @@
|
||||
import { NoteConnector } from '@components/note/connector';
|
||||
|
||||
import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons';
|
||||
import { ArrowLeftIcon, ArrowRightIcon, ReloadIcon } from '@radix-ui/react-icons';
|
||||
import { useRouter } from 'next/router';
|
||||
|
||||
export default function AppHeader() {
|
||||
@ -14,21 +14,34 @@ export default function AppHeader() {
|
||||
window.history.forward();
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
router.reload();
|
||||
};
|
||||
|
||||
return (
|
||||
<div data-tauri-drag-region className="flex h-full w-full items-center">
|
||||
<div className="relative w-[68px] shrink-0">{/* macos traffic lights */}</div>
|
||||
<div className="flex w-full flex-1 items-center justify-between px-2">
|
||||
<div className="flex h-full gap-2">
|
||||
<button onClick={() => goBack()} className="group rounded-md p-1 hover:bg-zinc-900">
|
||||
<ArrowLeftIcon className="h-5 w-5 text-zinc-500 group-hover:text-zinc-300" />
|
||||
</button>
|
||||
<button onClick={() => goForward()} className="group rounded-md p-1 hover:bg-zinc-900">
|
||||
<ArrowRightIcon className="h-5 w-5 text-zinc-500 group-hover:text-zinc-300" />
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<NoteConnector />
|
||||
</div>
|
||||
<div data-tauri-drag-region className="flex h-full w-full flex-1 items-center justify-between px-2">
|
||||
<div className="flex h-full items-center gap-2 pl-[68px]">
|
||||
<button
|
||||
onClick={() => goBack()}
|
||||
className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
|
||||
>
|
||||
<ArrowLeftIcon className="h-4 w-4 text-zinc-500 group-hover:text-zinc-300" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => goForward()}
|
||||
className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
|
||||
>
|
||||
<ArrowRightIcon className="h-4 w-4 text-zinc-500 group-hover:text-zinc-300" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => reload()}
|
||||
className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
|
||||
>
|
||||
<ReloadIcon className="h-[14px] w-[14px] text-zinc-500 group-hover:text-zinc-300" />
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<NoteConnector />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -9,8 +9,8 @@ export const Account = memo(function Account({ user }: { user: any }) {
|
||||
};
|
||||
|
||||
return (
|
||||
<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 onClick={() => setCurrentUser()} className="relative h-11 w-11 shrink rounded-lg">
|
||||
<Image src={userData.picture} alt="user's avatar" fill={true} className="rounded-lg object-cover" />
|
||||
</button>
|
||||
);
|
||||
});
|
||||
|
@ -2,12 +2,14 @@ import { Account } from '@components/columns/account/account';
|
||||
|
||||
import LumeSymbol from '@assets/icons/Lume';
|
||||
import { PlusIcon } from '@radix-ui/react-icons';
|
||||
import { getVersion } from '@tauri-apps/api/app';
|
||||
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 [version, setVersion] = useState(null);
|
||||
|
||||
const getAccounts = useCallback(async () => {
|
||||
const db = await Database.load('sqlite:lume.db');
|
||||
@ -16,25 +18,40 @@ export default function AccountColumn() {
|
||||
setUsers(result);
|
||||
}, []);
|
||||
|
||||
const getAppVersion = useCallback(async () => {
|
||||
const appVersion = await getVersion();
|
||||
setVersion(appVersion);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
getAccounts().catch(console.error);
|
||||
}, [getAccounts]);
|
||||
getAppVersion().catch(console.error);
|
||||
}, [getAccounts, getAppVersion]);
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col items-center justify-between px-2 pt-4 pb-4">
|
||||
<div className="flex flex-col gap-4">
|
||||
<Link
|
||||
href="/explore"
|
||||
className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center overflow-hidden rounded-lg bg-zinc-900 hover:bg-zinc-800"
|
||||
>
|
||||
<LumeSymbol className="h-6 w-auto text-zinc-400 group-hover:text-zinc-200" />
|
||||
</Link>
|
||||
{users.map((user, index) => (
|
||||
<Account key={index} user={user} />
|
||||
))}
|
||||
<Link
|
||||
href="/onboarding"
|
||||
className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center overflow-hidden rounded-full border-2 border-dashed border-zinc-600 hover:border-zinc-400"
|
||||
className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-zinc-600 hover:border-zinc-400"
|
||||
>
|
||||
<PlusIcon className="h-4 w-4 text-zinc-400 group-hover:text-zinc-200" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<LumeSymbol className="h-8 w-auto text-zinc-700" />
|
||||
<div className="flex flex-col gap-0.5 text-center">
|
||||
<span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-sm font-black uppercase leading-tight text-transparent">
|
||||
Lume
|
||||
</span>
|
||||
<span className="text-xs font-medium text-zinc-700">v{version}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -29,7 +29,7 @@ export default function Newsfeed() {
|
||||
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-fuchsia-500 via-purple-300 to-pink-300"></span>
|
||||
<span className="h-4 w-3 rounded-sm bg-gradient-to-br from-fuchsia-500 via-purple-300 to-pink-300"></span>
|
||||
</div>
|
||||
<span>Following</span>
|
||||
</ActiveLink>
|
||||
@ -39,7 +39,7 @@ export default function Newsfeed() {
|
||||
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>
|
||||
<span className="h-4 w-3 rounded-sm bg-gradient-to-br from-amber-500 via-orange-200 to-yellow-300"></span>
|
||||
</div>
|
||||
<span>Circle</span>
|
||||
</ActiveLink>
|
||||
|
@ -26,6 +26,7 @@ export const ImageWithFallback = memo(function ImageWithFallback({
|
||||
size={44}
|
||||
name={alt}
|
||||
variant="beam"
|
||||
square={true}
|
||||
colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
|
||||
/>
|
||||
) : (
|
||||
|
@ -55,14 +55,20 @@ export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: s
|
||||
|
||||
return (
|
||||
<div className="relative flex items-start gap-4">
|
||||
<div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
|
||||
<div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-900">
|
||||
{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-md border border-white/10 object-cover"
|
||||
/>
|
||||
) : (
|
||||
<Avatar
|
||||
size={44}
|
||||
name={pubkey}
|
||||
variant="beam"
|
||||
square={true}
|
||||
colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
|
||||
/>
|
||||
)}
|
||||
|
@ -50,14 +50,15 @@ 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 shrink-0 overflow-hidden rounded-full">
|
||||
<div className="relative h-5 w-5 shrink-0 overflow-hidden rounded">
|
||||
{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 object-cover" />
|
||||
) : (
|
||||
<Avatar
|
||||
size={20}
|
||||
name={pubkey}
|
||||
variant="beam"
|
||||
square={true}
|
||||
colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
|
||||
/>
|
||||
)}
|
||||
|
24
src/pages/explore.tsx
Normal file
24
src/pages/explore.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import BaseLayout from '@layouts/base';
|
||||
import WithSidebarLayout from '@layouts/withSidebar';
|
||||
|
||||
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
|
||||
|
||||
export default function Page() {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
Page.getLayout = function getLayout(
|
||||
page:
|
||||
| string
|
||||
| number
|
||||
| boolean
|
||||
| ReactElement<unknown, string | JSXElementConstructor<unknown>>
|
||||
| ReactFragment
|
||||
| ReactPortal
|
||||
) {
|
||||
return (
|
||||
<BaseLayout>
|
||||
<WithSidebarLayout>{page}</WithSidebarLayout>
|
||||
</BaseLayout>
|
||||
);
|
||||
};
|
Loading…
Reference in New Issue
Block a user