93 lines
4.3 KiB
TypeScript
93 lines
4.3 KiB
TypeScript
import { Timeline } from "@columns/timeline";
|
|
import {
|
|
ArrowLeftIcon,
|
|
ArrowRightIcon,
|
|
PlusIcon,
|
|
PlusSquareIcon,
|
|
} from "@lume/icons";
|
|
import { useColumn } from "@lume/storage";
|
|
import * as Tooltip from "@radix-ui/react-tooltip";
|
|
import { t } from "i18next";
|
|
import { VList } from "virtua";
|
|
|
|
export function HomeScreen() {
|
|
const { vlistRef } = useColumn();
|
|
|
|
return (
|
|
<div className="relative w-full h-full">
|
|
<VList
|
|
ref={vlistRef}
|
|
className="h-full w-full flex-nowrap overflow-x-auto !overflow-y-hidden scrollbar-none focus:outline-none"
|
|
itemSize={420}
|
|
tabIndex={0}
|
|
horizontal
|
|
>
|
|
<Timeline column={{ id: 1, title: "", content: "" }} />
|
|
<div className="w-[420px] h-full flex items-center justify-center">
|
|
<button
|
|
type="button"
|
|
className="size-16 inline-flex items-center justify-center hover:bg-neutral-100 dark:hover:bg-neutral-900 rounded-2xl"
|
|
>
|
|
<PlusIcon className="size-6" />
|
|
</button>
|
|
</div>
|
|
</VList>
|
|
<Tooltip.Provider>
|
|
<div className="absolute bottom-3 right-3">
|
|
<div className="flex items-center gap-1 p-1 bg-black/50 dark:bg-white/30 backdrop-blur-xl rounded-xl shadow-toolbar">
|
|
<Tooltip.Root delayDuration={150}>
|
|
<Tooltip.Trigger asChild>
|
|
<button
|
|
type="button"
|
|
className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/30 size-10"
|
|
>
|
|
<ArrowLeftIcon className="size-5" />
|
|
</button>
|
|
</Tooltip.Trigger>
|
|
<Tooltip.Portal>
|
|
<Tooltip.Content className="inline-flex h-7 select-none text-neutral-50 dark:text-neutral-950 items-center justify-center rounded-md bg-neutral-950 dark:bg-neutral-50 px-3.5 text-sm will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
|
|
{t("global.moveLeft")}
|
|
<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
|
|
</Tooltip.Content>
|
|
</Tooltip.Portal>
|
|
</Tooltip.Root>
|
|
<Tooltip.Root delayDuration={150}>
|
|
<Tooltip.Trigger asChild>
|
|
<button
|
|
type="button"
|
|
className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/30 size-10"
|
|
>
|
|
<ArrowRightIcon className="size-5" />
|
|
</button>
|
|
</Tooltip.Trigger>
|
|
<Tooltip.Portal>
|
|
<Tooltip.Content className="inline-flex h-7 select-none text-neutral-50 dark:text-neutral-950 items-center justify-center rounded-md bg-neutral-950 dark:bg-neutral-50 px-3.5 text-sm will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
|
|
{t("global.moveRight")}
|
|
<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
|
|
</Tooltip.Content>
|
|
</Tooltip.Portal>
|
|
</Tooltip.Root>
|
|
<Tooltip.Root delayDuration={150}>
|
|
<Tooltip.Trigger asChild>
|
|
<button
|
|
type="button"
|
|
className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/30 size-10"
|
|
>
|
|
<PlusSquareIcon className="size-5" />
|
|
</button>
|
|
</Tooltip.Trigger>
|
|
<Tooltip.Portal>
|
|
<Tooltip.Content className="inline-flex h-7 select-none text-neutral-50 dark:text-neutral-950 items-center justify-center rounded-md bg-neutral-950 dark:bg-neutral-50 px-3.5 text-sm will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
|
|
{t("global.newColumn")}
|
|
<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
|
|
</Tooltip.Content>
|
|
</Tooltip.Portal>
|
|
</Tooltip.Root>
|
|
<div className="w-px h-6 bg-white/10" />
|
|
</div>
|
|
</div>
|
|
</Tooltip.Provider>
|
|
</div>
|
|
);
|
|
}
|