reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated UI/UX

Browse Source
This commit is contained in:
Ren Amamiya
2023-03-18 08:19:30 +07:00
parent e9aa7bd4ff
commit 8b2c6e67f5
8 changed files with 89 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/appHeader/index.tsx
View File

@@ -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>
);