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

added tabs mockup and updated note conente style

Browse Source
This commit is contained in:
Ren Amamiya
2023-03-27 08:43:48 +07:00
parent 5fcb1ef647
commit 392ce50280
10 changed files with 92 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,47 +1,26 @@
import AppActions from '@components/appHeader/actions';
import { NoteConnector } from '@components/note/connector';
import { ArrowLeftIcon, ArrowRightIcon, ReloadIcon } from '@radix-ui/react-icons';
import { useRouter } from 'next/router';
import { PlusIcon } from '@radix-ui/react-icons';
export default function AppHeader() {
const router = useRouter();
const goBack = () => {
router.back();
};
const goForward = () => {
window.history.forward();
};
const reload = () => {
router.reload();
};
return (
<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 data-tauri-drag-region className="flex h-full w-full flex-1 items-center px-2">
<AppActions />
<div data-tauri-drag-region className="flex h-full w-full items-center justify-between">
<div className="flex h-full items-center divide-x divide-zinc-900 px-4 py-px">
<div className="group inline-flex h-full w-24 items-center justify-center border-l border-zinc-900 hover:bg-zinc-900">
<span className="text-sm font-medium leading-none text-zinc-400 group-hover:text-zinc-100">Home</span>
</div>
<div className="inline-flex h-full w-16 items-center justify-center border-r border-zinc-900">
<button className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900">
<PlusIcon className="h-4 w-4 text-zinc-400 group-hover:text-zinc-100" />
</button>
</div>
</div>
<div>
<NoteConnector />
</div>
</div>
</div>
);