Skip to content

Commit

Permalink
feat: added taps
Browse files Browse the repository at this point in the history
  • Loading branch information
@vwh
vwh committed Sep 25, 2024
1 parent 5f12bb7 commit 228057d
Showing 1 changed file with 185 additions and 160 deletions.
345 changes: 185 additions & 160 deletions src/components/sidebar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { useState } from "react";
import { useStore } from "@/store/useStore";

import { Slider } from "@/components/ui/slider";
import { HexColorPicker } from "react-colorful";
import IconsDialog from "./icons-dialog";
import { Button } from "./ui/button";

type ControlProps = {
label: string;
Expand Down Expand Up @@ -46,189 +48,212 @@ const ControlColor: React.FC<ControlColorProps> = ({
);

export default function Sidebar() {
const { svgSettings, updateSvgSetting } = useStore();
const [tapName, setTapName] = useState<"icon" | "background">("icon");

return (
<aside className="w-full space-y-3 overflow-y-auto border-b-[3px] border-r-2 p-3 pt-4 md:w-[500px] md:border-b-0">
<ControlGroup label="Icon Customization">
<div className="mt-2">
<IconsDialog />
</div>
<ControlSlider
label="Icon Opacity"
min={0}
max={1}
step={0.01}
value={[svgSettings.opacity]}
onValueChange={(value) => updateSvgSetting("opacity", value[0])}
/>
<ControlColor
label="Icon Color"
value={svgSettings.svgColor}
onChange={(color) => updateSvgSetting("svgColor", color)}
/>
<aside className="w-full space-y-3 overflow-y-auto border-b-[3px] border-r-2 px-1 py-2 md:w-[500px] md:border-b-0">
<div className="flex">
<Button
className="w-full rounded-none rounded-bl-lg rounded-tl-lg border-r-2"
onClick={() => setTapName("icon")}
>
Icon
</Button>
<Button
className="w-full rounded-none rounded-br-lg rounded-tr-lg"
onClick={() => setTapName("background")}
>
Background
</Button>
</div>
<div className="space-y-3 md:border-b-0">
{tapName === "icon" ? <IconControlGroup /> : <BackgroundControlGroup />}
</div>
</aside>
);
}

function IconControlGroup() {
const { svgSettings, updateSvgSetting } = useStore();
return (
<ControlGroup label="Icon Customization">
<div className="mt-2">
<IconsDialog />
</div>
<ControlSlider
label="Icon Opacity"
min={0}
max={1}
step={0.01}
value={[svgSettings.opacity]}
onValueChange={(value) => updateSvgSetting("opacity", value[0])}
/>
<ControlColor
label="Icon Color"
value={svgSettings.svgColor}
onChange={(color) => updateSvgSetting("svgColor", color)}
/>
<ControlSlider
label="Fill Opacity"
min={0}
max={1}
step={0.01}
value={[svgSettings.fillOpacity]}
onValueChange={(value) => updateSvgSetting("fillOpacity", value[0])}
/>
<ControlColor
label="Icon Filling Color"
value={svgSettings.fillColor}
onChange={(color) => updateSvgSetting("fillColor", color)}
/>
<ControlSlider
label="Icon Border Width"
min={0.1}
max={10}
step={0.1}
value={[svgSettings.strokeWidth]}
onValueChange={(value) => updateSvgSetting("strokeWidth", value[0])}
/>
<ControlSlider
label="Icon Rotation"
min={0}
max={360}
step={1}
value={[svgSettings.rotation]}
onValueChange={(value) => updateSvgSetting("rotation", value[0])}
/>
<ControlSlider
label="Icon Blur"
min={0}
max={20}
step={0.1}
value={[svgSettings.iconBlur]}
onValueChange={(value) => updateSvgSetting("iconBlur", value[0])}
/>
<ControlGroup label="Icon Dimensions">
<ControlSlider
label="Fill Opacity"
min={0}
max={1}
step={0.01}
value={[svgSettings.fillOpacity]}
onValueChange={(value) => updateSvgSetting("fillOpacity", value[0])}
/>
<ControlColor
label="Icon Filling Color"
value={svgSettings.fillColor}
onChange={(color) => updateSvgSetting("fillColor", color)}
label="Icon Size"
min={32}
max={256}
step={1}
value={[svgSettings.size]}
onValueChange={(value) => updateSvgSetting("size", value[0])}
/>
<ControlSlider
label="Icon Border Width"
label="Icon Scale"
min={0.1}
max={10}
max={2}
step={0.1}
value={[svgSettings.strokeWidth]}
onValueChange={(value) => updateSvgSetting("strokeWidth", value[0])}
value={[svgSettings.scale]}
onValueChange={(value) => updateSvgSetting("scale", value[0])}
/>
</ControlGroup>
<ControlGroup label="Icon Position">
<ControlSlider
label="Icon Rotation"
min={0}
max={360}
label="Icon Position X"
min={-100}
max={100}
step={1}
value={[svgSettings.rotation]}
onValueChange={(value) => updateSvgSetting("rotation", value[0])}
value={[svgSettings.position.x]}
onValueChange={(value) =>
updateSvgSetting("position", {
...svgSettings.position,
x: value[0]
})
}
/>
<ControlSlider
label="Icon Blur"
min={0}
max={20}
step={0.1}
value={[svgSettings.iconBlur]}
onValueChange={(value) => updateSvgSetting("iconBlur", value[0])}
label="Icon Position Y"
min={-100}
max={100}
step={1}
value={[svgSettings.position.y]}
onValueChange={(value) =>
updateSvgSetting("position", {
...svgSettings.position,
y: value[0]
})
}
/>
</ControlGroup>
<ControlGroup label="Icon Skew">
<ControlSlider
label="Icon Skew X"
min={-100}
max={100}
step={0.2}
value={[svgSettings.skewX]}
onValueChange={(value) => updateSvgSetting("skewX", value[0])}
/>
<ControlSlider
label="Icon Skew Y"
min={-100}
max={100}
step={1}
value={[svgSettings.skewY]}
onValueChange={(value) => updateSvgSetting("skewY", value[0])}
/>
<ControlGroup label="Icon Dimensions">
<ControlSlider
label="Icon Size"
min={32}
max={256}
step={1}
value={[svgSettings.size]}
onValueChange={(value) => updateSvgSetting("size", value[0])}
/>
<ControlSlider
label="Icon Scale"
min={0.1}
max={2}
step={0.1}
value={[svgSettings.scale]}
onValueChange={(value) => updateSvgSetting("scale", value[0])}
/>
</ControlGroup>
<ControlGroup label="Icon Position">
<ControlSlider
label="Icon Position X"
min={-100}
max={100}
step={1}
value={[svgSettings.position.x]}
onValueChange={(value) =>
updateSvgSetting("position", {
...svgSettings.position,
x: value[0]
})
}
/>
<ControlSlider
label="Icon Position Y"
min={-100}
max={100}
step={1}
value={[svgSettings.position.y]}
onValueChange={(value) =>
updateSvgSetting("position", {
...svgSettings.position,
y: value[0]
})
}
/>
</ControlGroup>
<ControlGroup label="Icon Skew">
<ControlSlider
label="Icon Skew X"
min={-100}
max={100}
step={0.2}
value={[svgSettings.skewX]}
onValueChange={(value) => updateSvgSetting("skewX", value[0])}
/>
<ControlSlider
label="Icon Skew Y"
min={-100}
max={100}
step={1}
value={[svgSettings.skewY]}
onValueChange={(value) => updateSvgSetting("skewY", value[0])}
/>
</ControlGroup>
</ControlGroup>
<ControlGroup label="Background Customization">
</ControlGroup>
);
}

function BackgroundControlGroup() {
const { svgSettings, updateSvgSetting } = useStore();
return (
<ControlGroup label="Background Customization">
<ControlColor
label="Background Color"
value={svgSettings.bgColor}
onChange={(color) => updateSvgSetting("bgColor", color)}
/>
<ControlSlider
label="Border Radius"
min={0}
max={128}
step={1}
value={[svgSettings.radius]}
onValueChange={(value) => updateSvgSetting("radius", value[0])}
/>
<ControlSlider
label="Background Blur"
min={0}
max={20}
step={0.1}
value={[svgSettings.backgroundBlur]}
onValueChange={(value) => updateSvgSetting("backgroundBlur", value[0])}
/>
<ControlGroup label="Shadow">
<ControlColor
label="Background Color"
value={svgSettings.bgColor}
onChange={(color) => updateSvgSetting("bgColor", color)}
label="Background Shadow Color"
value={svgSettings.shadowColor}
onChange={(color) => updateSvgSetting("shadowColor", color)}
/>
<ControlSlider
label="Border Radius"
label="Background Shadow Blur"
min={0}
max={128}
max={20}
step={1}
value={[svgSettings.radius]}
onValueChange={(value) => updateSvgSetting("radius", value[0])}
value={[svgSettings.shadowBlur]}
onValueChange={(value) => updateSvgSetting("shadowBlur", value[0])}
/>
<ControlSlider
label="Background Blur"
min={0}
label="Shadow Offset X"
min={-20}
max={20}
step={0.1}
value={[svgSettings.backgroundBlur]}
onValueChange={(value) =>
updateSvgSetting("backgroundBlur", value[0])
}
step={1}
value={[svgSettings.shadowOffsetX]}
onValueChange={(value) => updateSvgSetting("shadowOffsetX", value[0])}
/>
<ControlSlider
label="Shadow Offset Y"
min={-20}
max={20}
step={1}
value={[svgSettings.shadowOffsetY]}
onValueChange={(value) => updateSvgSetting("shadowOffsetY", value[0])}
/>
<ControlGroup label="Shadow">
<ControlColor
label="Background Shadow Color"
value={svgSettings.shadowColor}
onChange={(color) => updateSvgSetting("shadowColor", color)}
/>
<ControlSlider
label="Background Shadow Blur"
min={0}
max={20}
step={1}
value={[svgSettings.shadowBlur]}
onValueChange={(value) => updateSvgSetting("shadowBlur", value[0])}
/>
<ControlSlider
label="Shadow Offset X"
min={-20}
max={20}
step={1}
value={[svgSettings.shadowOffsetX]}
onValueChange={(value) =>
updateSvgSetting("shadowOffsetX", value[0])
}
/>
<ControlSlider
label="Shadow Offset Y"
min={-20}
max={20}
step={1}
value={[svgSettings.shadowOffsetY]}
onValueChange={(value) =>
updateSvgSetting("shadowOffsetY", value[0])
}
/>
</ControlGroup>
</ControlGroup>
</aside>
</ControlGroup>
);
}

0 comments on commit 228057d

Please sign in to comment.