93 lines
2.6 KiB
TypeScript
93 lines
2.6 KiB
TypeScript
import {
|
|
BoxIcon,
|
|
CircleIcon,
|
|
CursorArrowIcon,
|
|
FontStyleIcon,
|
|
MixIcon,
|
|
Pencil1Icon,
|
|
Pencil2Icon,
|
|
SymbolIcon,
|
|
TextIcon,
|
|
} from "@radix-ui/react-icons";
|
|
import * as Toolbar from "@radix-ui/react-toolbar";
|
|
import { motion } from "framer-motion";
|
|
import { FC, ReactNode, useMemo, useState } from "react";
|
|
import { EntitiesService } from "services/entities.service";
|
|
|
|
const ToolBarButton: FC<{ children: ReactNode; onClick?: () => void }> = ({
|
|
children,
|
|
onClick,
|
|
}) => {
|
|
const [didHover, setDidHover] = useState(false);
|
|
|
|
return (
|
|
<Toolbar.Button
|
|
onClick={onClick}
|
|
onMouseOver={() => !didHover && setDidHover(true)}
|
|
asChild
|
|
className="text-main p-[10px] bg-neutral flex-shrink-0 flex-grow-0
|
|
basis-auto w-[40px] h-[40px] rounded inline-flex text-[13px] leading-none
|
|
items-center justify-center outline-none hover:bg-primary/50
|
|
transition-colors
|
|
focus:relative focus:shadow-[0_0_0_2px] focus:shadow-indigo"
|
|
>
|
|
<motion.button
|
|
animate={didHover ? "enter" : undefined}
|
|
whileTap="press"
|
|
variants={{
|
|
enter: { scale: 1 },
|
|
from: { scale: 0 },
|
|
press: { scale: 0.9 },
|
|
}}
|
|
>
|
|
{children}
|
|
</motion.button>
|
|
</Toolbar.Button>
|
|
);
|
|
};
|
|
|
|
const ToolBar = () => {
|
|
const entitiesService = useMemo(() => new EntitiesService(), []);
|
|
|
|
return (
|
|
<Toolbar.Root
|
|
asChild
|
|
className="bg-neutral-accent flex flex-col gap-1 p-1 h-full"
|
|
orientation="vertical"
|
|
>
|
|
<motion.div
|
|
animate="enter"
|
|
initial="from"
|
|
transition={{ staggerChildren: 0.1 }}
|
|
variants={{ enter: {}, from: {} }}
|
|
>
|
|
<ToolBarButton>
|
|
<CursorArrowIcon width="100%" height="100%" />
|
|
</ToolBarButton>
|
|
<Toolbar.Separator />
|
|
<ToolBarButton onClick={() => entitiesService.createRect()}>
|
|
<BoxIcon width="100%" height="100%" />
|
|
</ToolBarButton>
|
|
<ToolBarButton onClick={() => entitiesService.createEllipse()}>
|
|
<CircleIcon width="100%" height="100%" />
|
|
</ToolBarButton>
|
|
<ToolBarButton>
|
|
<Pencil1Icon width="100%" height="100%" />
|
|
</ToolBarButton>
|
|
<ToolBarButton>
|
|
<MixIcon width="100%" height="100%" />
|
|
</ToolBarButton>
|
|
<Toolbar.Separator />
|
|
<ToolBarButton onClick={() => entitiesService.createText()}>
|
|
<TextIcon width="100%" height="100%" />
|
|
</ToolBarButton>
|
|
<ToolBarButton onClick={() => entitiesService.createStaggeredText()}>
|
|
<FontStyleIcon width="100%" height="100%" />
|
|
</ToolBarButton>
|
|
</motion.div>
|
|
</Toolbar.Root>
|
|
);
|
|
};
|
|
|
|
export default ToolBar;
|