tempblade/creator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve forms by adding select and float inputs

Browse Source 
performance fix
This commit is contained in:
Enrico Bühler
2023-06-01 01:24:42 +02:00
parent ebb2408a68
commit fcd3afa3f2
21 changed files with 872 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
app/src/components/ToolBar/index.tsx
View File

@@ -2,6 +2,7 @@ import {
BoxIcon,
CircleIcon,
CursorArrowIcon,
FontStyleIcon,
MixIcon,
Pencil1Icon,
Pencil2Icon,
@@ -9,48 +10,81 @@ import {
TextIcon,
} from "@radix-ui/react-icons";
import * as Toolbar from "@radix-ui/react-toolbar";
import { FC, ReactNode } from "react";
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);
const ToolBarButton: FC<{ children: ReactNode }> = ({ children }) => {
return (
<Toolbar.Button
onClick={onClick}
onMouseOver={() => !didHover && setDidHover(true)}
asChild
className="text-white p-[10px] bg-gray-900 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-indigo-900
transition-colors
focus:relative focus:shadow-[0_0_0_2px] focus:shadow-indigo"
>
{children}
<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-gray-800 flex flex-col gap-1 p-1 h-full"
orientation="vertical"
>
<ToolBarButton>
<CursorArrowIcon width="100%" height="100%" />
</ToolBarButton>
<Toolbar.Separator />
<ToolBarButton>
<BoxIcon width="100%" height="100%" />
</ToolBarButton>
<ToolBarButton>
<CircleIcon width="100%" height="100%" />
</ToolBarButton>
<ToolBarButton>
<Pencil1Icon width="100%" height="100%" />
</ToolBarButton>
<ToolBarButton>
<MixIcon width="100%" height="100%" />
</ToolBarButton>
<Toolbar.Separator />
<ToolBarButton>
<TextIcon width="100%" height="100%" />
</ToolBarButton>
<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>
);
};