Skip to content

Commit

Permalink
refactor: small refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@vwh
vwh committed Oct 8, 2024
1 parent 430c917 commit 9c5a565
Show file tree
Hide file tree
Showing 8 changed files with 39 additions and 43 deletions.
Binary file modified bun.lockb
View file
Binary file not shown.
4 changes: 1 addition & 3 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,10 @@ const App: React.FC = () => {

useEffect(() => {
if (customSvg) {
// Extract the SVG content from the base64 string
const svgContent = atob(customSvg.split(",")[1]);
setCustomSvgContent(svgContent);
// Extract viewBox
const viewBoxMatch = svgContent.match(/viewBox="([^"]+)"/);
if (viewBoxMatch && viewBoxMatch[1]) {
if (viewBoxMatch?.[1]) {
setCustomViewBox(viewBoxMatch[1]);
} else {
setCustomViewBox(null);
Expand Down
20 changes: 11 additions & 9 deletions src/components/color-picker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {

import { Paintbrush } from "lucide-react";

export default function ColorPicker({
function ColorPicker({
value,
onChange,
displayColorOnly = true
Expand All @@ -30,7 +30,7 @@ export default function ColorPicker({
!value && "text-muted-foreground"
)}
>
<div className="flex w-full items-center gap-2">
<section className="flex w-full items-center gap-2">
{value ? (
<div
className="h-4 w-4 rounded !bg-cover !bg-center transition-all"
Expand All @@ -41,29 +41,29 @@ export default function ColorPicker({
)}
<div className="w-full flex-1 truncate">
{displayColorOnly
? value && value.startsWith("#")
? value?.startsWith("#")
? value
: "Color Picker"
: value && !value.startsWith("#")
: value && !value?.startsWith("#")
? value
: "Gradient Picker"}
</div>
</div>
</section>
</Button>
</PopoverTrigger>
<PopoverContent className="w-64">
{!displayColorOnly && (
<div className="mb-2 flex max-h-24 flex-wrap gap-1 overflow-auto">
{gradients.map((s, index) => (
<section className="mb-2 flex max-h-24 flex-wrap gap-1 overflow-auto">
{gradients.map((s) => (
<button
type="button"
key={index}
key={s}
style={{ background: s }}
className="h-6 w-6 cursor-pointer rounded-md active:scale-105"
onClick={() => onChange(s)}
/>
))}
</div>
</section>
)}
<Input
id="custom"
Expand All @@ -75,3 +75,5 @@ export default function ColorPicker({
</Popover>
);
}

export default ColorPicker;
46 changes: 21 additions & 25 deletions src/components/editing-section.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@ const ControlGroup: React.FC<ControlGroupProps> = ({
}

return (
<div className="rounded border">
<section className="rounded border">
<div className="flex items-center justify-between border-b-2 p-2">
<label className="block text-sm font-medium">{label}</label>
<p className="block text-sm font-medium">{label}</p>
{rester && (
<Tooltiper message="Reset To Default">
<button
Expand All @@ -45,7 +45,7 @@ const ControlGroup: React.FC<ControlGroupProps> = ({
)}
</div>
<span className="flex flex-col gap-3 px-2 pb-3 pt-1">{children}</span>
</div>
</section>
);
};

Expand All @@ -54,7 +54,7 @@ type ControlSliderProps = ControlProps &

const ControlSlider: React.FC<ControlSliderProps> = ({ label, ...props }) => (
<div>
<label className="mb-1 block text-sm font-medium">{label}</label>
<p className="mb-1 block text-sm font-medium">{label}</p>
<Slider {...props} />
</div>
);
Expand All @@ -70,7 +70,7 @@ const ControlColor: React.FC<ControlColorProps> = ({
label
}) => (
<div>
<label className="mb-1 block text-sm font-medium">{label}</label>
<p className="mb-1 block text-sm font-medium">{label}</p>
<HexColorPicker className="w-full" color={value} onChange={onChange} />
</div>
);
Expand All @@ -80,7 +80,7 @@ export default function EditingSection() {

return (
<aside className="h-full w-full space-y-3 overflow-y-auto border-b-[3px] border-r-2 p-3 md:w-[500px] md:border-b-0">
<div className="flex">
<section className="flex">
<Button
variant="gooeyLeft"
className="w-full rounded-none rounded-bl rounded-tl border-r-2"
Expand All @@ -97,10 +97,10 @@ export default function EditingSection() {
>
Background
</Button>
</div>
<div className="space-y-3 md:border-b-0">
</section>
<section className="space-y-3 md:border-b-0">
{tapName === "icon" ? <IconControlGroup /> : <BackgroundControlGroup />}
</div>
</section>
</aside>
);
}
Expand All @@ -127,7 +127,7 @@ function IconControlGroup() {

return (
<ControlGroup label="Icon Customization">
<div className="mt-2">
<section className="mt-2">
<IconsDialog />
<Button
onClick={() => inputRef.current?.click()}
Expand All @@ -144,7 +144,7 @@ function IconControlGroup() {
className="hidden"
style={{ display: "none" }}
/>
</div>
</section>
<ControlSlider
label="Icon Opacity"
min={0}
Expand All @@ -153,7 +153,7 @@ function IconControlGroup() {
value={[svgSettings.opacity]}
onValueChange={(value) => updateSvgSetting("opacity", value[0])}
/>
<div className="flex flex-col gap-[6px]">
<section className="flex flex-col gap-[6px]">
<ControlColor
label="Icon Color"
value={svgSettings.svgColor}
Expand All @@ -162,9 +162,8 @@ function IconControlGroup() {
<ColorPicker
onChange={(color) => updateSvgSetting("svgColor", color)}
value={svgSettings.svgColor}
displayColorOnly={true}
/>
</div>
</section>
<ControlSlider
label="Icon fill Opacity"
min={0}
Expand All @@ -173,7 +172,7 @@ function IconControlGroup() {
value={[svgSettings.fillOpacity]}
onValueChange={(value) => updateSvgSetting("fillOpacity", value[0])}
/>
<div className="flex flex-col gap-[6px]">
<section className="flex flex-col gap-[6px]">
<ControlColor
label="Icon Filling Color"
value={svgSettings.fillColor}
Expand All @@ -182,9 +181,8 @@ function IconControlGroup() {
<ColorPicker
onChange={(color) => updateSvgSetting("fillColor", color)}
value={svgSettings.fillColor}
displayColorOnly={true}
/>
</div>
</section>
<ControlSlider
label="Icon Border Width"
min={0.1}
Expand All @@ -210,7 +208,7 @@ function IconControlGroup() {
onValueChange={(value) => updateSvgSetting("iconBlur", value[0])}
/>
<ControlGroup label="Inner Shadow">
<div className="flex flex-col gap-[6px]">
<section className="flex flex-col gap-[6px]">
<ControlColor
label="Inner Shadow Color"
value={svgSettings.innerShadowColor}
Expand All @@ -219,9 +217,8 @@ function IconControlGroup() {
<ColorPicker
onChange={(color) => updateSvgSetting("innerShadowColor", color)}
value={svgSettings.innerShadowColor}
displayColorOnly={true}
/>
</div>
</section>
<ControlSlider
label="Inner Shadow Blur"
min={0}
Expand Down Expand Up @@ -330,7 +327,7 @@ function BackgroundControlGroup() {
const { svgSettings, updateSvgSetting } = useStore();
return (
<ControlGroup label="Background Customization">
<div className="flex flex-col gap-[6px]">
<section className="flex flex-col gap-[6px]">
<ControlColor
label="Background Color"
value={svgSettings.bgColor}
Expand All @@ -341,7 +338,7 @@ function BackgroundControlGroup() {
value={svgSettings.bgColor}
displayColorOnly={false}
/>
</div>
</section>
<ControlSlider
label="Border Radius"
min={0}
Expand All @@ -359,7 +356,7 @@ function BackgroundControlGroup() {
onValueChange={(value) => updateSvgSetting("backgroundBlur", value[0])}
/>
<ControlGroup label="Shadow">
<div className="flex flex-col gap-[6px]">
<section className="flex flex-col gap-[6px]">
<ControlColor
label="Background Shadow Color"
value={svgSettings.shadowColor}
Expand All @@ -368,9 +365,8 @@ function BackgroundControlGroup() {
<ColorPicker
onChange={(color) => updateSvgSetting("shadowColor", color)}
value={svgSettings.shadowColor}
displayColorOnly={true}
/>
</div>
</section>
<ControlSlider
label="Background Shadow Blur"
min={0}
Expand Down
4 changes: 2 additions & 2 deletions src/components/icons-dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export default function IconsDialog() {
Search for icons or select from the list below.
</DialogDescription>
</DialogHeader>
<div className="flex flex-col gap-4">
<section className="flex flex-col gap-4">
<div className="flex items-center">
<SearchIcon className="h-7 w-7 pl-2 text-gray-500" />
<Input
Expand Down Expand Up @@ -123,7 +123,7 @@ export default function IconsDialog() {
<svgs.ChevronRight />
</Button>
</div>
</div>
</section>
</DialogContent>
</Dialog>
);
Expand Down
4 changes: 2 additions & 2 deletions src/components/navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ const Navbar: React.FC = () => {
<span>Icon Editor</span>
</a>
</Tooltiper>
<div className="flex gap-1">
<section className="flex gap-1">
<Tooltiper message="Random Variation">
<button
className="mx-2 items-center justify-center rounded-lg"
Expand All @@ -157,7 +157,7 @@ const Navbar: React.FC = () => {
SvgComponent={SvgComponent}
/>
))}
</div>
</section>
<Tooltiper message="Download as PNG">
<Button aria-label="Download as PNG" onClick={handleDownload}>
<DownloadIcon className="h-6 w-6" />
Expand Down
2 changes: 2 additions & 0 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,10 +65,12 @@
}
}

/* React Colorful */
.react-colorful {
height: 140px !important;
width: 100% !important;
}

.react-colorful__pointer {
width: 23px !important;
height: 23px !important;
Expand Down
2 changes: 0 additions & 2 deletions src/lib/values.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,6 @@ export const gradients = [
"linear-gradient(to left top, rgb(255, 110, 127), rgb(191, 233, 255))",
"linear-gradient(to left top, rgb(229, 45, 39), rgb(179, 18, 23))",
"linear-gradient(to left top, rgb(96, 56, 19), rgb(178, 159, 148))",
"linear-gradient(to left top, rgb(22, 160, 133), rgb(244, 208, 63))",
"linear-gradient(to left top, rgb(211, 16, 39), rgb(234, 56, 77))",
"linear-gradient(to left top, rgb(237, 229, 116), rgb(225, 245, 196))",
"linear-gradient(to left top, rgb(2, 170, 176), rgb(0, 205, 172))",
Expand Down Expand Up @@ -528,7 +527,6 @@ export const gradients = [
"linear-gradient(to left top, rgb(237, 110, 160), rgb(236, 140, 105))",
"linear-gradient(to left top, rgb(255, 195, 160), rgb(255, 175, 189))",
"linear-gradient(to left top, rgb(204, 32, 142), rgb(103, 19, 210))",
"linear-gradient(to left top, rgb(179, 255, 171), rgb(18, 255, 247))",
"linear-gradient(to left top, rgb(213, 222, 231), rgb(232, 235, 242), rgb(226, 231, 237))",
"linear-gradient(to left top, rgb(101, 189, 96), rgb(90, 193, 168), rgb(62, 198, 237))",
"linear-gradient(to left top, rgb(36, 57, 73), rgb(81, 127, 164))",
Expand Down

0 comments on commit 9c5a565

Please sign in to comment.