- SVG Path Animation For
Developers & Designers
-
-
-
-
-
- Expand
-
-
- Click to Editor
-
-
-
-
+
- SVG Path Animation For
- -
- {!viewAll && (
-
- )}
-
- {(viewAll ? examplesSvgPath : examplesSvgPath.slice(0, 10)).map(
- (example, index) => (
-
-
-
- ),
- )}
- {
- setCurrentPath(example.path);
- setExampleViewBox(example.viewBox);
- setActivePresets(example.id);
- }}
- onKeyUp={() => {
- setCurrentPath(example.path);
- setExampleViewBox(example.viewBox);
- setActivePresets(example.id);
- }}
- onKeyDown={() => {
- setCurrentPath(example.path);
- setExampleViewBox(example.viewBox);
- setActivePresets(example.id);
- }}
- onKeyPress={() => {
- setCurrentPath(example.path);
- setExampleViewBox(example.viewBox);
- setActivePresets(example.id);
- }}
- >
-
-
- - {example.name} -
-
-
-
-
-
{/* Left Column - Examples and Animation Settings */}
@@ -437,8 +277,11 @@ function SVGLineDrawGenerator() {
Custom
*/}
-
-
+
+
{/* Preview Section */}
-
+
See your animation in action
)}
-
+
Date: Wed, 25 Feb 2026 02:56:20 +0600
Subject: [PATCH 03/24] fix: restore preset scrolling and stable canvas sizing
in svg playground
---
app/(tools)/layout.tsx | 2 +-
components/view/svg-line-draw/index.tsx | 407 ++++++++++++------------
2 files changed, 206 insertions(+), 203 deletions(-)
diff --git a/app/(tools)/layout.tsx b/app/(tools)/layout.tsx
index 4ac2fa7..0a71cc6 100644
--- a/app/(tools)/layout.tsx
+++ b/app/(tools)/layout.tsx
@@ -15,7 +15,7 @@ function Toolslayout({ children }: { children: React.ReactNode }) {
className={
isLineDraw
? "h-full overflow-hidden"
- : "h-full overflow-hidden px-3 pb-3 pt-20 xl:px-6"
+ : "h-full overflow-hidden px-3 pt-20 pb-3 xl:px-6"
}
>
{children}
diff --git a/components/view/svg-line-draw/index.tsx b/components/view/svg-line-draw/index.tsx
index 7bb51fd..7ddc593 100644
--- a/components/view/svg-line-draw/index.tsx
+++ b/components/view/svg-line-draw/index.tsx
@@ -18,6 +18,7 @@ import {
} from "@/components/ui/popover";
import { CustomSlider } from "@/components/ui/range-slider";
import { ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { ScrollArea } from "@/components/ui/scroll-area";
import {
Select,
SelectContent,
@@ -29,7 +30,6 @@ import { Switch } from "@/components/ui/switch";
import { Tabs, TabsContent, TabsList } from "@/components/ui/tabs";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";
-import { ScrollArea } from "@radix-ui/react-scroll-area";
import { TabsTrigger } from "@radix-ui/react-tabs";
import {
ChevronDown,
@@ -240,10 +240,10 @@ function SVGLineDrawGenerator() {
{/* Left Column - Examples and Animation Settings */}
-
+
*/}
-
-
+
+
-
+
{/* Animation Settings */}
-
-
+
+
-
+
-
*/}
-
- {
- setCurrentPath(path);
- updateSetting("viewBox", viewBox);
- setPreviewKey((prev) => prev + 1);
- }}
- />
+
+
+ {
+ setCurrentPath(path);
+ updateSetting("viewBox", viewBox);
+ setPreviewKey((prev) => prev + 1);
+ }}
+ />
+
-
- {
- setCurrentPath(path);
- updateSetting("viewBox", viewBox);
- setPreviewKey((prev) => prev + 1);
- }}
- />
+
+
+ {
+ setCurrentPath(path);
+ updateSetting("viewBox", viewBox);
+ setPreviewKey((prev) => prev + 1);
+ }}
+ />
+
@@ -516,8 +519,8 @@ function SVGLineDrawGenerator() {
)}
>
{/* Preview Section */}
-
-
- updateSetting("viewBox", e.target.value)}
- />
-
-
-
-
+
{/*
-
-
-
-
-
-
- updateSetting("strokeColor", color)
- }
- />
-
+
+
-
- updateSetting("strokeColor", e.target.value)
+
+
-
-
+
+
+
+
+ updateSetting("viewBox", e.target.value)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ updateSetting("strokeColor", color)
}
- className="flex-1"
/>
-
-
-
-
- updateSetting("strokeColor", e.target.value)
+
+
+ updateSetting("strokeColor", e.target.value)
+ }
+ className="flex-1"
+ />
+
+
+
+
+ updateSetting("strokeColor", e.target.value)
+ }
+ className="flex-1"
+ />
+
+
+
+ updateSetting("strokeWidth", value[0])
}
- className="flex-1"
/>
-
-
-
- updateSetting("strokeWidth", value[0])
- }
- />
-
-
-
-
-
-
-
-
-
- updateSetting("animationDuration", value[0])
- }
- />
-
-
-
-
-
- updateSetting("animationDelay", value[0])
- }
- />
-
-
-
-
-
- updateSetting("animationBounce", value[0])
- }
- />
-
-
-
-
- updateSetting("reverseAnimation", checked)
- }
- />
-
-
-
-
-
- updateSetting("enableHoverAnimation", checked)
- }
- />
-
-
-
- {settings.enableHoverAnimation && (
-
+
- )}
-
+
+
+ updateSetting("animationDuration", value[0])
+ }
+ />
+
+
+
+
+
+ updateSetting("animationDelay", value[0])
+ }
+ />
+
+
+
+
+
+ updateSetting("animationBounce", value[0])
+ }
+ />
+
+
+
+
+ updateSetting("reverseAnimation", checked)
+ }
+ />
+
+
+
+
+
+ updateSetting("enableHoverAnimation", checked)
+ }
+ />
+
+
+
+ {settings.enableHoverAnimation && (
+
+
+
+
+ )}
+
From a754227a42b7d81057a931ea405b919ee9b92766 Mon Sep 17 00:00:00 2001
From: Naymur Rahman <66328660+naymurdev@users.noreply.github.com>
Date: Wed, 25 Feb 2026 03:02:38 +0600
Subject: [PATCH 04/24] fix: keep svg drawing panel closed until explicitly
opened
---
components/view/svg-line-draw/index.tsx | 13 ++++++++-----
1 file changed, 8 insertions(+), 5 deletions(-)
diff --git a/components/view/svg-line-draw/index.tsx b/components/view/svg-line-draw/index.tsx
index 7ddc593..0916d2d 100644
--- a/components/view/svg-line-draw/index.tsx
+++ b/components/view/svg-line-draw/index.tsx
@@ -89,10 +89,7 @@ function SVGLineDrawGenerator() {
"editPath",
parseAsBoolean.withDefault(false),
);
- const [customDrawLine, setCustomDrawLine] = useQueryState(
- "customDrawLine",
- parseAsBoolean.withDefault(false),
- );
+ const [customDrawLine, setCustomDrawLine] = useState(false);
const [currentPath, setCurrentPath] = useState("");
const [savedPaths, _setSavedPaths] = useState([]);
const [previewKey, setPreviewKey] = useState(0);
@@ -280,7 +277,11 @@ function SVGLineDrawGenerator() {
{
+ setCurrentPath(path);
+ setCustomDrawLine(false);
+ setEditPath(false);
+ }}
// onEditPath={openEditorForExample}
setActivePresets={setActivePresets}
activePresets={activePresets}
@@ -490,6 +491,7 @@ function SVGLineDrawGenerator() {
setActivePresets={setActivePresets}
onSelectPath={(path, viewBox) => {
setCurrentPath(path);
+ setCustomDrawLine(false);
updateSetting("viewBox", viewBox);
setPreviewKey((prev) => prev + 1);
}}
@@ -503,6 +505,7 @@ function SVGLineDrawGenerator() {
setActivePresets={setActivePresets}
onSelectPath={(path, viewBox) => {
setCurrentPath(path);
+ setCustomDrawLine(false);
updateSetting("viewBox", viewBox);
setPreviewKey((prev) => prev + 1);
}}
From f5887e1996e8b5bde47e16ac2790a52c5c705624 Mon Sep 17 00:00:00 2001
From: Naymur Rahman <66328660+naymurdev@users.noreply.github.com>
Date: Wed, 25 Feb 2026 03:11:52 +0600
Subject: [PATCH 05/24] feat: add canva-style left nav rail to svg line draw
playground
---
components/view/svg-line-draw/index.tsx | 50 +++++++++++++++++++++++--
1 file changed, 47 insertions(+), 3 deletions(-)
diff --git a/components/view/svg-line-draw/index.tsx b/components/view/svg-line-draw/index.tsx
index 0916d2d..ca0b190 100644
--- a/components/view/svg-line-draw/index.tsx
+++ b/components/view/svg-line-draw/index.tsx
@@ -97,6 +97,9 @@ function SVGLineDrawGenerator() {
const [_editorViewBox, _setEditorViewBox] = useState("0 0 100 100");
const [strokeColorPickerOpen, setStrokeColorPickerOpen] = useState(false);
const [showSaveDialog, setShowSaveDialog] = useState(false);
+ const [activeSidebarTab, setActiveSidebarTab] = useState<
+ "presets" | "settings" | "edited" | "saved"
+ >("presets");
// Update the default smoothing value to be more appropriate
const [settings, setSettings] = useState({
width: "100%",
@@ -234,14 +237,55 @@ function SVGLineDrawGenerator() {
className="relative grid h-full min-h-0 grid-cols-12 gap-3"
id="editor"
>
+
+
+
{/* Left Column - Examples and Animation Settings */}
+ {[
+ { key: "presets", label: "P" },
+ { key: "settings", label: "S" },
+ { key: "edited", label: "E" },
+ { key: "saved", label: "V" },
+ ].map((item) => (
+
+ ))}
+
+
+
+
+
+
-
-
+
+ setActiveSidebarTab(
+ value as "presets" | "settings" | "edited" | "saved",
+ )
+ }
+ className="flex h-full min-h-0 flex-col"
+ >
+
Date: Wed, 25 Feb 2026 03:32:07 +0600
Subject: [PATCH 06/24] feat: make svg rail labels clear and add editor
switcher links
---
components/view/svg-line-draw/index.tsx | 34 +++++++++++++++++++------
1 file changed, 26 insertions(+), 8 deletions(-)
diff --git a/components/view/svg-line-draw/index.tsx b/components/view/svg-line-draw/index.tsx
index ca0b190..11aabdd 100644
--- a/components/view/svg-line-draw/index.tsx
+++ b/components/view/svg-line-draw/index.tsx
@@ -47,6 +47,7 @@ import {
X,
} from "lucide-react";
import { useTheme } from "next-themes";
+import Link from "next/link";
import { parseAsBoolean, parseAsIndex, useQueryState } from "nuqs";
import { useEffect, useState } from "react";
import { HexColorPicker } from "react-colorful";
@@ -240,10 +241,10 @@ function SVGLineDrawGenerator() {
({
width: "100%",
@@ -238,10 +244,15 @@ function SVGLineDrawGenerator() {
return (
{[
- { key: "presets", label: "P" },
- { key: "settings", label: "S" },
- { key: "edited", label: "E" },
- { key: "saved", label: "V" },
+ { key: "presets", label: "Presets" },
+ { key: "settings", label: "Settings" },
+ { key: "edited", label: "Edited" },
+ { key: "saved", label: "Saved" },
].map((item) => (
-
-
-
+
From 14cc59b0aed972ccee38e9acce62c88bed734bfa Mon Sep 17 00:00:00 2001
From: Naymur Rahman <66328660+naymurdev@users.noreply.github.com>
Date: Wed, 25 Feb 2026 03:49:55 +0600
Subject: [PATCH 07/24] feat: add rail icons and editor dropdown for svg
playground
---
components/view/svg-line-draw/index.tsx | 56 +++++++++++++------------
1 file changed, 29 insertions(+), 27 deletions(-)
diff --git a/components/view/svg-line-draw/index.tsx b/components/view/svg-line-draw/index.tsx
index 11aabdd..445b1c5 100644
--- a/components/view/svg-line-draw/index.tsx
+++ b/components/view/svg-line-draw/index.tsx
@@ -32,22 +32,25 @@ import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";
import { TabsTrigger } from "@radix-ui/react-tabs";
import {
+ Bookmark,
ChevronDown,
ChevronUp,
CodeIcon,
Copy,
Edit2,
GripVertical,
+ Layers,
Loader,
+ PanelsTopLeft,
PencilLine,
Play,
RefreshCcw,
Save,
+ Settings2,
Trash2,
X,
} from "lucide-react";
import { useTheme } from "next-themes";
-import Link from "next/link";
import { parseAsBoolean, parseAsIndex, useQueryState } from "nuqs";
import { useEffect, useState } from "react";
import { HexColorPicker } from "react-colorful";
@@ -241,10 +244,10 @@ function SVGLineDrawGenerator() {
+
+ Editors +
+ {[ + { href: "/svg-line-draw", label: "SVG" }, + { href: "/shadows", label: "Shadows" }, + { href: "/clip-paths", label: "Clip" }, + { href: "/mesh-gradients", label: "Mesh" }, + { href: "/background-snippets", label: "BG" }, + { href: "/color-lab", label: "Color" }, + ].map((tool) => ( + + {tool.label} + + ))}
{[
- { key: "presets", label: "Presets" },
- { key: "settings", label: "Settings" },
- { key: "edited", label: "Edited" },
- { key: "saved", label: "Saved" },
+ { key: "presets", label: "Presets", icon: PanelsTopLeft },
+ { key: "settings", label: "Settings", icon: Settings2 },
+ { key: "edited", label: "Edited", icon: Layers },
+ { key: "saved", label: "Saved", icon: Bookmark },
].map((item) => (
))}
-
-
From 5dfbb596b58cf0598be37aa0bace2298c9136218 Mon Sep 17 00:00:00 2001
From: Naymur Rahman <66328660+naymurdev@users.noreply.github.com>
Date: Wed, 25 Feb 2026 04:00:22 +0600
Subject: [PATCH 08/24] feat: add collapsible narrow rail and shadcn page
select
---
components/view/svg-line-draw/index.tsx | 81 ++++++++++++++++---------
1 file changed, 53 insertions(+), 28 deletions(-)
diff --git a/components/view/svg-line-draw/index.tsx b/components/view/svg-line-draw/index.tsx
index 445b1c5..c61da80 100644
--- a/components/view/svg-line-draw/index.tsx
+++ b/components/view/svg-line-draw/index.tsx
@@ -47,10 +47,13 @@ import {
RefreshCcw,
Save,
Settings2,
+ SidebarClose,
+ SidebarOpen,
Trash2,
X,
} from "lucide-react";
import { useTheme } from "next-themes";
+import { usePathname, useRouter } from "next/navigation";
import { parseAsBoolean, parseAsIndex, useQueryState } from "nuqs";
import { useEffect, useState } from "react";
import { HexColorPicker } from "react-colorful";
@@ -104,6 +107,9 @@ function SVGLineDrawGenerator() {
const [activeSidebarTab, setActiveSidebarTab] = useState<
"presets" | "settings" | "edited" | "saved"
>("presets");
+ const [isSidebarExpanded, setIsSidebarExpanded] = useState(true);
+ const pathname = usePathname();
+ const router = useRouter();
// Update the default smoothing value to be more appropriate
const [settings, setSettings] = useState- Editors -
- {[ - { href: "/svg-line-draw", label: "SVG" }, - { href: "/shadows", label: "Shadows" }, - { href: "/clip-paths", label: "Clip" }, - { href: "/mesh-gradients", label: "Mesh" }, - { href: "/background-snippets", label: "BG" }, - { href: "/color-lab", label: "Color" }, - ].map((tool) => ( - - {tool.label} - - ))} +
+
-
+
{/* Right Column - Preview and Drawing Canvas */}
-
{[
{ key: "presets", label: "Presets", icon: PanelsTopLeft },
@@ -252,11 +263,13 @@ function SVGLineDrawGenerator() {
))}
-
-
{/* Left Column - Examples and Animation Settings */}
+
{/* Preview Section */}
From 6cde849c398cf068ff5c8885e11f70bdaf7a6100 Mon Sep 17 00:00:00 2001
From: Naymur Rahman <66328660+naymurdev@users.noreply.github.com>
Date: Wed, 25 Feb 2026 04:21:56 +0600
Subject: [PATCH 09/24] feat: apply canva-like playground layout to shadows
editor
---
app/(tools)/layout.tsx | 7 +-
app/(tools)/shadows/page.tsx | 15 +---
components/view/shadow/index.tsx | 98 ++++++++++++++++++++--
components/view/shadow/shadow-controls.tsx | 2 +-
components/view/shadow/shadow-presets.tsx | 2 +-
components/view/shadow/shadow-preview.tsx | 2 +-
6 files changed, 98 insertions(+), 28 deletions(-)
diff --git a/app/(tools)/layout.tsx b/app/(tools)/layout.tsx
index 0a71cc6..208f734 100644
--- a/app/(tools)/layout.tsx
+++ b/app/(tools)/layout.tsx
@@ -6,14 +6,15 @@ import type React from "react";
function Toolslayout({ children }: { children: React.ReactNode }) {
const pathname = usePathname();
- const isLineDraw = pathname === "/svg-line-draw";
+ const isFullPlayground =
+ pathname === "/svg-line-draw" || pathname === "/shadows";
return (
- {!isLineDraw &&
-
- {savedShadows.length > 0 && (
+ {mode === "saved" && savedShadows.length > 0 && (
Please use a desktop/laptop to view the Editor. @@ -242,9 +259,72 @@ export default function ShadowGenerator() { )}
- {!isTab && (
+
+
diff --git a/components/view/shadow/shadow-presets.tsx b/components/view/shadow/shadow-presets.tsx
index 32bc1a5..40b9700 100644
--- a/components/view/shadow/shadow-presets.tsx
+++ b/components/view/shadow/shadow-presets.tsx
@@ -41,7 +41,7 @@ export default function ShadowPresets({
);
return (
-
+
{savedShadows.length > 0 && (
- {!isTab && activeSidebarTab === "settings" && isSidebarExpanded && (
-
);
diff --git a/components/view/shadow/shadow-presets.tsx b/components/view/shadow/shadow-presets.tsx
index 40b9700..29c7dca 100644
--- a/components/view/shadow/shadow-presets.tsx
+++ b/components/view/shadow/shadow-presets.tsx
@@ -12,6 +12,7 @@ import type React from "react";
import toast from "react-hot-toast";
interface ShadowPresetsProps {
+ mode: "presets" | "edited" | "saved";
activeShadow: ShadowPreset | null;
applyPreset: (preset: ShadowPreset) => void;
savedShadows: ShadowPreset[];
@@ -25,6 +26,7 @@ interface ShadowPresetsProps {
}
export default function ShadowPresets({
+ mode,
activeShadow,
applyPreset,
savedShadows,
@@ -42,7 +44,7 @@ export default function ShadowPresets({
return (
+
+
+ {!isTab && activeSidebarTab === "settings" && isSidebarExpanded && (
+ {[
+ { key: "presets", label: "Presets", icon: PanelsTopLeft },
+ { key: "settings", label: "Settings", icon: Settings2 },
+ { key: "edited", label: "Edited", icon: Layers },
+ { key: "saved", label: "Saved", icon: Bookmark },
+ ].map((item) => (
+
+ ))}
+
+
+
+
+
+ Shadow Controls
{savedShadows.map((shadow) => (
diff --git a/components/view/shadow/shadow-preview.tsx b/components/view/shadow/shadow-preview.tsx
index 6454356..4b67c8f 100644
--- a/components/view/shadow/shadow-preview.tsx
+++ b/components/view/shadow/shadow-preview.tsx
@@ -71,7 +71,7 @@ export default function ShadowPreview({
};
return (
-
+
Date: Wed, 25 Feb 2026 04:45:56 +0600
Subject: [PATCH 10/24] fix: keep shadows preview pinned and add background
switcher
---
components/view/shadow/index.tsx | 66 ++++++------
components/view/shadow/shadow-presets.tsx | 119 ++++++++++++----------
components/view/shadow/shadow-preview.tsx | 27 ++++-
3 files changed, 128 insertions(+), 84 deletions(-)
diff --git a/components/view/shadow/index.tsx b/components/view/shadow/index.tsx
index 8b2be20..b3923ca 100644
--- a/components/view/shadow/index.tsx
+++ b/components/view/shadow/index.tsx
@@ -106,6 +106,7 @@ export default function ShadowGenerator() {
"presets" | "settings" | "edited" | "saved"
>("settings");
const [isSidebarExpanded, setIsSidebarExpanded] = useState(true);
+ const [previewBackground, setPreviewBackground] = useState("#ECF0F3");
const pathname = usePathname();
const router = useRouter();
@@ -324,22 +325,38 @@ export default function ShadowGenerator() {
{savedShadows.map((shadow) => (
)}
- {favouriteShadows.length > 0 && (
+ {mode === "edited" && favouriteShadows.length > 0 && (
{favouriteShadows.map((shadow) => (
)}
- >;
saveCurrentShadow: () => void;
activeShadow: ShadowPreset | null;
+ previewBackground: string;
+ setPreviewBackground: React.Dispatch>;
}
export default function ShadowPreview({
@@ -50,6 +52,8 @@ export default function ShadowPreview({
setShadowName,
saveCurrentShadow,
activeShadow,
+ previewBackground,
+ setPreviewBackground,
}: ShadowPreviewProps) {
const [copiedTailwind, setCopiedTailwind] = useState(false);
const [copiedCss, setCopiedCss] = useState(false);
@@ -175,10 +179,31 @@ export default function ShadowPreview({
+
- {preBuiltShadows.map((shadow, index) => (
- applyPreset(shadow)}
- >
-
- {shadow.id === activeShadow?.id && (
-
-
+ ))}
+
+ )}
+
+ {mode === "saved" && savedShadows.length === 0 && (
+
- {shadow.name}
-
- + No saved shadows yet. +
+ )} + {mode === "edited" && favouriteShadows.length === 0 && ( ++ No edited/favorited shadows yet. +
+ )} ); } diff --git a/components/view/shadow/shadow-preview.tsx b/components/view/shadow/shadow-preview.tsx index 4b67c8f..3cbd6ad 100644 --- a/components/view/shadow/shadow-preview.tsx +++ b/components/view/shadow/shadow-preview.tsx @@ -38,6 +38,8 @@ interface ShadowPreviewProps { setShadowName: React.Dispatch
+ {["#ECF0F3", "#111827", "#fef3c7", "#dbeafe"].map((bg) => (
+
+
Date: Wed, 25 Feb 2026 05:03:32 +0600
Subject: [PATCH 11/24] fix: enlarge shadows presets panel and stabilize
collapsed preview layout
---
components/view/shadow/index.tsx | 2 +-
components/view/shadow/shadow-presets.tsx | 12 ++++++------
components/view/shadow/shadow-preview.tsx | 16 +++++++++++-----
3 files changed, 18 insertions(+), 12 deletions(-)
diff --git a/components/view/shadow/index.tsx b/components/view/shadow/index.tsx
index b3923ca..c912bbe 100644
--- a/components/view/shadow/index.tsx
+++ b/components/view/shadow/index.tsx
@@ -260,7 +260,7 @@ export default function ShadowGenerator() {
)}
diff --git a/components/view/shadow/shadow-presets.tsx b/components/view/shadow/shadow-presets.tsx
index 29c7dca..43136b3 100644
--- a/components/view/shadow/shadow-presets.tsx
+++ b/components/view/shadow/shadow-presets.tsx
@@ -45,7 +45,7 @@ export default function ShadowPresets({
return (
{mode === "saved" && savedShadows.length > 0 && (
-
+
{savedShadows.map((shadow) => (
0 && (
-
+
{favouriteShadows.map((shadow) => (
+
{preBuiltShadows.map((shadow, index) => (
-
+
-
+
@@ -201,7 +207,7 @@ export default function ShadowPreview({
@@ -214,7 +220,7 @@ export default function ShadowPreview({
}}
/>
-
+
-
+
How to use in your project
From 5f9cda42ea985c8909fe99e4e2dcc39732bf91a5 Mon Sep 17 00:00:00 2001
From: Naymur Rahman <66328660+naymurdev@users.noreply.github.com>
Date: Wed, 25 Feb 2026 05:16:45 +0600
Subject: [PATCH 12/24] fix: make shadows preview fill remaining width when
sidebar is collapsed
---
components/view/shadow/index.tsx | 34 +++++++++++++++++++-------------
1 file changed, 20 insertions(+), 14 deletions(-)
diff --git a/components/view/shadow/index.tsx b/components/view/shadow/index.tsx
index c912bbe..e7e7127 100644
--- a/components/view/shadow/index.tsx
+++ b/components/view/shadow/index.tsx
@@ -260,7 +260,11 @@ export default function ShadowGenerator() {
)}
Tailwind Class
@@ -256,7 +262,7 @@ export default function ShadowPreview({
How to use in your project
From 5f9cda42ea985c8909fe99e4e2dcc39732bf91a5 Mon Sep 17 00:00:00 2001
From: Naymur Rahman <66328660+naymurdev@users.noreply.github.com>
Date: Wed, 25 Feb 2026 05:16:45 +0600
Subject: [PATCH 12/24] fix: make shadows preview fill remaining width when
sidebar is collapsed
---
components/view/shadow/index.tsx | 34 +++++++++++++++++++-------------
1 file changed, 20 insertions(+), 14 deletions(-)
diff --git a/components/view/shadow/index.tsx b/components/view/shadow/index.tsx
index c912bbe..e7e7127 100644
--- a/components/view/shadow/index.tsx
+++ b/components/view/shadow/index.tsx
@@ -260,7 +260,11 @@ export default function ShadowGenerator() {
)}
@@ -358,19 +362,21 @@ export default function ShadowGenerator() {
/>
))}
- (null);
+ const [shadowMode, setShadowMode] = useState<"box" | "text">("box");
const {
savedShadows,
@@ -107,6 +111,9 @@ export default function ShadowGenerator() {
>("settings");
const [isSidebarExpanded, setIsSidebarExpanded] = useState(true);
const [previewBackground, setPreviewBackground] = useState("#ECF0F3");
+ const [textShadowValue, setTextShadowValue] = useState(
+ "0px 2px 8px rgba(0, 0, 0, 0.35)",
+ );
const pathname = usePathname();
const router = useRouter();
@@ -170,14 +177,12 @@ export default function ShadowGenerator() {
colorMap.set(color, (colorMap.get(color) || 0) + 1);
}
- const uniqueColorArray = Array.from(colorMap.entries()).map(
- ([color, count]) => ({
+ setUniqueColors(
+ Array.from(colorMap.entries()).map(([color, count]) => ({
color,
count,
- }),
+ })),
);
-
- setUniqueColors(uniqueColorArray);
}, [layers, activeShadow]);
useEffect(() => {
@@ -189,13 +194,11 @@ export default function ShadowGenerator() {
originalPreset: ShadowPreset,
) => {
if (!originalPreset) return false;
-
if (currentLayers.length !== originalPreset.layers.length) return true;
for (let i = 0; i < currentLayers.length; i++) {
const currentLayer = currentLayers[i];
const originalLayer = originalPreset.layers[i];
-
if (
currentLayer.offsetX !== originalLayer.offsetX ||
currentLayer.offsetY !== originalLayer.offsetY ||
@@ -219,6 +222,7 @@ export default function ShadowGenerator() {
} else {
setLayers([...preset.layers]);
}
+ setShadowMode("box");
setActiveLayerIndex(0);
setActiveShadow(preset);
setCurrentPresetId(preset.id || null);
@@ -240,7 +244,6 @@ export default function ShadowGenerator() {
if (currentPresetId && savedShadows.some((s) => s.id === currentPresetId)) {
updateShadow(currentPresetId, shadowToSave);
-
toast.success("Your custom shadow has been updated.!");
} else {
const newId = addShadow(shadowToSave);
@@ -329,43 +332,83 @@ export default function ShadowGenerator() {
- {!isTab &&
- isSidebarExpanded &&
- (activeSidebarTab === "settings" ? (
-
+
+ setTextShadowValue(e.target.value)}
+ />
+
+ Use presets or paste your own `text-shadow` value.
+
+
+ )
+ ) : (
+ void;
savedShadows: ShadowPreset[];
@@ -23,10 +24,13 @@ interface ShadowPresetsProps {
currentPresetId: string | null;
setCurrentPresetId: React.Dispatch>;
isDarkMode: boolean;
+ textShadowValue: string;
+ setTextShadowValue: React.Dispatch>;
}
export default function ShadowPresets({
mode,
+ shadowMode,
activeShadow,
applyPreset,
savedShadows,
@@ -37,21 +41,60 @@ export default function ShadowPresets({
currentPresetId,
setCurrentPresetId,
isDarkMode,
+ textShadowValue,
+ setTextShadowValue,
}: ShadowPresetsProps) {
const favouriteShadows = preBuiltShadows.filter((s) =>
favorites.includes(s.id),
);
+ if (shadowMode === "text") {
+ return (
+
+ {mode === "presets" ? (
+
+ {preBuiltTextShadows.map((preset) => (
+
+ ))}
+
+ ) : (
+
+ Text shadow presets are currently available under the Presets tab.
+
+ )}
+
+ );
+ }
+
return (
{mode === "saved" && savedShadows.length > 0 && (
-
+
{savedShadows.map((shadow) => (
{
- // Create a preset-like object from saved shadow
const savedPreset = {
id: shadow.id,
name: shadow.name,
@@ -80,9 +123,7 @@ export default function ShadowPresets({
)}
0 && (
-
+
{favouriteShadows.map((shadow) => (
@@ -169,7 +208,7 @@ export default function ShadowPresets({
)}
{mode === "presets" && (
-
+
{preBuiltShadows.map((shadow, index) => (
diff --git a/components/view/shadow/shadow-preview.tsx b/components/view/shadow/shadow-preview.tsx
index 4271026..624e678 100644
--- a/components/view/shadow/shadow-preview.tsx
+++ b/components/view/shadow/shadow-preview.tsx
@@ -29,8 +29,11 @@ import { useState } from "react";
import toast from "react-hot-toast";
interface ShadowPreviewProps {
+ shadowMode: "box" | "text";
cssValue: string;
tailwindClass: string;
+ textShadowValue: string;
+ setTextShadowValue: React.Dispatch>;
isRemoveShadow: boolean;
setIsRemoveShadow: React.Dispatch>;
isEdited: boolean;
@@ -43,8 +46,11 @@ interface ShadowPreviewProps {
}
export default function ShadowPreview({
+ shadowMode,
cssValue,
tailwindClass,
+ textShadowValue,
+ setTextShadowValue,
isRemoveShadow,
setIsRemoveShadow,
isEdited,
@@ -58,6 +64,13 @@ export default function ShadowPreview({
const [copiedTailwind, setCopiedTailwind] = useState(false);
const [copiedCss, setCopiedCss] = useState(false);
+ const twValue =
+ shadowMode === "text"
+ ? `[text-shadow:${textShadowValue.replaceAll(" ", "_")}]`
+ : tailwindClass;
+ const cssProperty = shadowMode === "text" ? "text-shadow" : "box-shadow";
+ const cssOutputValue = shadowMode === "text" ? textShadowValue : cssValue;
+
const copyToClipboard = (text: string, isTailwind = true) => {
navigator.clipboard.writeText(text);
@@ -114,6 +127,7 @@ export default function ShadowPreview({
onClick={() => {
setIsRemoveShadow(!isRemoveShadow);
}}
+ disabled={shadowMode === "text"}
>
-
+ {shadowMode === "text" ? (
+
+
+ Text Shadow
+
+
+ ) : (
+
+ )}
+ {shadowMode === "text" && (
+
+
+ setTextShadowValue(e.target.value)}
+ placeholder="0px 2px 10px rgba(0,0,0,0.25)"
+ />
+
+ )}
- Tailwind Class
+ Tailwind CSS v4 Class
- {tailwindClass}
+ {twValue}
Date: Wed, 25 Feb 2026 07:36:16 +0600
Subject: [PATCH 15/24] fix: simplify text-shadow presets UI and expand preset
library
---
components/view/shadow/shadow-presets.tsx | 3 ---
components/view/shadow/shadow-preview.tsx | 4 ++--
config/shadow-data.ts | 27 +++++++++++++++++++++++
3 files changed, 29 insertions(+), 5 deletions(-)
diff --git a/components/view/shadow/shadow-presets.tsx b/components/view/shadow/shadow-presets.tsx
index 62ed6a3..985adb2 100644
--- a/components/view/shadow/shadow-presets.tsx
+++ b/components/view/shadow/shadow-presets.tsx
@@ -71,9 +71,6 @@ export default function ShadowPresets({
>
Shadow
-
- {preset.tailwindV4}
-
))}
diff --git a/components/view/shadow/shadow-preview.tsx b/components/view/shadow/shadow-preview.tsx
index 2a5a442..6810a10 100644
--- a/components/view/shadow/shadow-preview.tsx
+++ b/components/view/shadow/shadow-preview.tsx
@@ -218,10 +218,10 @@ export default function ShadowPreview({
))}
@@ -425,7 +426,6 @@ export default function ShadowGenerator() {
cssValue={cssValue}
tailwindClass={tailwindClass}
textShadowValue={textShadowValue}
- setTextShadowValue={setTextShadowValue}
isRemoveShadow={isRemoveShadow}
setIsRemoveShadow={setIsRemoveShadow}
isEdited={isEdited}
@@ -435,6 +435,8 @@ export default function ShadowGenerator() {
activeShadow={activeShadow}
previewBackground={previewBackground}
setPreviewBackground={setPreviewBackground}
+ previewSurfaceColor={previewSurfaceColor}
+ setPreviewSurfaceColor={setPreviewSurfaceColor}
/>
diff --git a/components/view/shadow/shadow-presets.tsx b/components/view/shadow/shadow-presets.tsx
index 985adb2..339d150 100644
--- a/components/view/shadow/shadow-presets.tsx
+++ b/components/view/shadow/shadow-presets.tsx
@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { preBuiltShadows, preBuiltTextShadows } from "@/config/shadow-data";
import { cn } from "@/lib/utils";
-import type { ShadowPreset } from "@/types/shadow";
+import type { ShadowLayer, ShadowPreset } from "@/types/shadow";
import { Star, Trash } from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import type React from "react";
@@ -24,8 +24,8 @@ interface ShadowPresetsProps {
currentPresetId: string | null;
setCurrentPresetId: React.Dispatch>;
isDarkMode: boolean;
- textShadowValue: string;
- setTextShadowValue: React.Dispatch>;
+ setLayers: React.Dispatch>;
+ setActiveLayerIndex: React.Dispatch>;
}
export default function ShadowPresets({
@@ -41,13 +41,25 @@ export default function ShadowPresets({
currentPresetId,
setCurrentPresetId,
isDarkMode,
- textShadowValue,
- setTextShadowValue,
+ setLayers,
+ setActiveLayerIndex,
}: ShadowPresetsProps) {
const favouriteShadows = preBuiltShadows.filter((s) =>
favorites.includes(s.id),
);
+ const activeTextShadow = layersToTextShadow(activeShadow?.layers || []);
+
+ function layersToTextShadow(layers: readonly ShadowLayer[]) {
+ return layers
+ .filter((layer) => layer.isVisible !== false)
+ .map((layer) => {
+ const rgba = `rgba(${Number.parseInt(layer.color.slice(1, 3), 16)},${Number.parseInt(layer.color.slice(3, 5), 16)},${Number.parseInt(layer.color.slice(5, 7), 16)},${layer.opacity / 100})`;
+ return `${layer.offsetX}px ${layer.offsetY}px ${layer.blur}px ${rgba}`;
+ })
+ .join(", ");
+ }
+
if (shadowMode === "text") {
return (
@@ -57,10 +69,13 @@ export default function ShadowPresets({
{shadowMode === "text" ? (
-
+
) : (
)}
- {shadowMode === "text" && (
-
-
- setTextShadowValue(e.target.value)}
- placeholder="0px 2px 10px rgba(0,0,0,0.25)"
- />
-
- )}
+
Tailwind CSS v4 Class
@@ -336,7 +358,7 @@ export default function ShadowPreview({
{shadowMode === "text"
- ? `Text Shadow
`
+ ? `Text Shadow
`
: `Your content here`}
diff --git a/config/shadow-data.ts b/config/shadow-data.ts
index 5f31f96..e020d71 100644
--- a/config/shadow-data.ts
+++ b/config/shadow-data.ts
@@ -1542,6 +1542,16 @@ export const preBuiltTextShadows = [
name: "Soft Lift",
textShadow: "0px 2px 8px rgba(15, 23, 42, 0.25)",
tailwindV4: "[text-shadow:0px_2px_8px_rgba(15,23,42,0.25)]",
+ layers: [
+ {
+ offsetX: 0,
+ offsetY: 2,
+ blur: 8,
+ spread: 0,
+ color: "#0F172A",
+ opacity: 25,
+ },
+ ],
},
{
id: "text-2",
@@ -1550,6 +1560,24 @@ export const preBuiltTextShadows = [
"0px 0px 6px rgba(34,211,238,0.9), 0px 0px 18px rgba(14,165,233,0.65)",
tailwindV4:
"[text-shadow:0px_0px_6px_rgba(34,211,238,0.9),0px_0px_18px_rgba(14,165,233,0.65)]",
+ layers: [
+ {
+ offsetX: 0,
+ offsetY: 0,
+ blur: 6,
+ spread: 0,
+ color: "#22D3EE",
+ opacity: 90,
+ },
+ {
+ offsetX: 0,
+ offsetY: 0,
+ blur: 18,
+ spread: 0,
+ color: "#0EA5E9",
+ opacity: 65,
+ },
+ ],
},
{
id: "text-3",
@@ -1558,6 +1586,40 @@ export const preBuiltTextShadows = [
"1px 1px 0px rgba(0,0,0,0.8), -1px -1px 0px rgba(0,0,0,0.8), 1px -1px 0px rgba(0,0,0,0.8), -1px 1px 0px rgba(0,0,0,0.8)",
tailwindV4:
"[text-shadow:1px_1px_0px_rgba(0,0,0,0.8),-1px_-1px_0px_rgba(0,0,0,0.8),1px_-1px_0px_rgba(0,0,0,0.8),-1px_1px_0px_rgba(0,0,0,0.8)]",
+ layers: [
+ {
+ offsetX: 1,
+ offsetY: 1,
+ blur: 0,
+ spread: 0,
+ color: "#000000",
+ opacity: 80,
+ },
+ {
+ offsetX: -1,
+ offsetY: -1,
+ blur: 0,
+ spread: 0,
+ color: "#000000",
+ opacity: 80,
+ },
+ {
+ offsetX: 1,
+ offsetY: -1,
+ blur: 0,
+ spread: 0,
+ color: "#000000",
+ opacity: 80,
+ },
+ {
+ offsetX: -1,
+ offsetY: 1,
+ blur: 0,
+ spread: 0,
+ color: "#000000",
+ opacity: 80,
+ },
+ ],
},
{
id: "text-4",
@@ -1566,6 +1628,48 @@ export const preBuiltTextShadows = [
"1px 1px 0 rgba(0,0,0,0.15), 2px 2px 0 rgba(0,0,0,0.14), 3px 3px 0 rgba(0,0,0,0.13), 4px 4px 0 rgba(0,0,0,0.12), 5px 5px 0 rgba(0,0,0,0.11)",
tailwindV4:
"[text-shadow:1px_1px_0_rgba(0,0,0,0.15),2px_2px_0_rgba(0,0,0,0.14),3px_3px_0_rgba(0,0,0,0.13),4px_4px_0_rgba(0,0,0,0.12),5px_5px_0_rgba(0,0,0,0.11)]",
+ layers: [
+ {
+ offsetX: 1,
+ offsetY: 1,
+ blur: 0,
+ spread: 0,
+ color: "#000000",
+ opacity: 15,
+ },
+ {
+ offsetX: 2,
+ offsetY: 2,
+ blur: 0,
+ spread: 0,
+ color: "#000000",
+ opacity: 14,
+ },
+ {
+ offsetX: 3,
+ offsetY: 3,
+ blur: 0,
+ spread: 0,
+ color: "#000000",
+ opacity: 13,
+ },
+ {
+ offsetX: 4,
+ offsetY: 4,
+ blur: 0,
+ spread: 0,
+ color: "#000000",
+ opacity: 12,
+ },
+ {
+ offsetX: 5,
+ offsetY: 5,
+ blur: 0,
+ spread: 0,
+ color: "#000000",
+ opacity: 11,
+ },
+ ],
},
{
id: "text-5",
@@ -1573,6 +1677,24 @@ export const preBuiltTextShadows = [
textShadow: "1px 1px 0 rgba(255,255,255,0.6), -1px -1px 0 rgba(0,0,0,0.2)",
tailwindV4:
"[text-shadow:1px_1px_0_rgba(255,255,255,0.6),-1px_-1px_0_rgba(0,0,0,0.2)]",
+ layers: [
+ {
+ offsetX: 1,
+ offsetY: 1,
+ blur: 0,
+ spread: 0,
+ color: "#FFFFFF",
+ opacity: 60,
+ },
+ {
+ offsetX: -1,
+ offsetY: -1,
+ blur: 0,
+ spread: 0,
+ color: "#000000",
+ opacity: 20,
+ },
+ ],
},
{
id: "text-6",
@@ -1581,17 +1703,63 @@ export const preBuiltTextShadows = [
"0 0 4px rgba(255,255,255,0.85), 0 0 14px rgba(236,72,153,0.55), 0 0 28px rgba(236,72,153,0.35)",
tailwindV4:
"[text-shadow:0_0_4px_rgba(255,255,255,0.85),0_0_14px_rgba(236,72,153,0.55),0_0_28px_rgba(236,72,153,0.35)]",
+ layers: [
+ {
+ offsetX: 0,
+ offsetY: 0,
+ blur: 4,
+ spread: 0,
+ color: "#FFFFFF",
+ opacity: 85,
+ },
+ {
+ offsetX: 0,
+ offsetY: 0,
+ blur: 14,
+ spread: 0,
+ color: "#EC4899",
+ opacity: 55,
+ },
+ {
+ offsetX: 0,
+ offsetY: 0,
+ blur: 28,
+ spread: 0,
+ color: "#EC4899",
+ opacity: 35,
+ },
+ ],
},
{
id: "text-7",
name: "Crisp Offset",
textShadow: "2px 2px 0 rgba(17,24,39,0.35)",
tailwindV4: "[text-shadow:2px_2px_0_rgba(17,24,39,0.35)]",
+ layers: [
+ {
+ offsetX: 2,
+ offsetY: 2,
+ blur: 0,
+ spread: 0,
+ color: "#111827",
+ opacity: 35,
+ },
+ ],
},
{
id: "text-8",
name: "Soft Cloud",
textShadow: "0 8px 20px rgba(15,23,42,0.22)",
tailwindV4: "[text-shadow:0_8px_20px_rgba(15,23,42,0.22)]",
+ layers: [
+ {
+ offsetX: 0,
+ offsetY: 8,
+ blur: 20,
+ spread: 0,
+ color: "#0F172A",
+ opacity: 22,
+ },
+ ],
},
] as const;
diff --git a/types/shadow.ts b/types/shadow.ts
index 7a85e30..b68677b 100644
--- a/types/shadow.ts
+++ b/types/shadow.ts
@@ -29,6 +29,7 @@ export interface TextShadowPreset {
name: string;
textShadow: string;
tailwindV4: string;
+ layers: ShadowLayer[];
}
export interface ShadowStore {
From 3b0676d8b487ff285dba9f8f0e721e98333ad66d Mon Sep 17 00:00:00 2001
From: Naymur Rahman <66328660+naymurdev@users.noreply.github.com>
Date: Wed, 25 Feb 2026 08:20:05 +0600
Subject: [PATCH 18/24] fix: remove text-mode surface background controls in
shadows preview
---
components/view/shadow/shadow-preview.tsx | 51 +++++++++++------------
1 file changed, 25 insertions(+), 26 deletions(-)
diff --git a/components/view/shadow/shadow-preview.tsx b/components/view/shadow/shadow-preview.tsx
index 8271cd3..7bde201 100644
--- a/components/view/shadow/shadow-preview.tsx
+++ b/components/view/shadow/shadow-preview.tsx
@@ -239,27 +239,29 @@ export default function ShadowPreview({
className="sr-only"
/>
-
+ {shadowMode === "box" && (
+
+ )}
{shadowMode === "text" ? (
-
+
{shadowMode === "text"
- ? `Text Shadow
`
+ ? `Text Shadow
`
: `Your content here`}
From d92c50abe3836051da31fab05be488f611776fb4 Mon Sep 17 00:00:00 2001
From: Naymur Rahman <66328660+naymurdev@users.noreply.github.com>
Date: Wed, 25 Feb 2026 20:10:31 +0600
Subject: [PATCH 19/24] feat: migrate clip-paths to fullscreen playground
editor layout
---
app/(tools)/clip-paths/page.tsx | 16 +---
app/(tools)/layout.tsx | 4 +-
components/view/clip-path/index.tsx | 136 +++++-----------------------
3 files changed, 30 insertions(+), 126 deletions(-)
diff --git a/app/(tools)/clip-paths/page.tsx b/app/(tools)/clip-paths/page.tsx
index 79db408..99a8df1 100644
--- a/app/(tools)/clip-paths/page.tsx
+++ b/app/(tools)/clip-paths/page.tsx
@@ -2,7 +2,6 @@ import ClipPathGenerator from "@/components/view/clip-path";
import { siteConfig } from "@/lib/utils";
import type { Metadata } from "next";
import React from "react";
-import { ToolPlaygroundShell } from "@/components/common/tool-playground-shell";
export const metadata: Metadata = {
title: "SVG Clip-Path Generator",
description:
@@ -52,18 +51,7 @@ export const metadata: Metadata = {
};
function page() {
- return (
-
-
- );
+ return ([]);
const [editClipPathId, _setEditClipPathId] = useState("edit-clip-path");
@@ -232,84 +228,18 @@ export default function ClipPathGenerator() {
return (
<>
-
-
- SVG Clip-Paths for
Developers & Designers
-
-
-
-
- Expand
-
-
-
- {!viewAll && (
-
- )}
-
- {(viewAll ? INITIAL_CLIP_PATHS : INITIAL_CLIP_PATHS.slice(0, 10)).map(
- (shape) => (
- setSelectedShapeId(shape.id)}
- onKeyDown={(e) => {
- if (e.key === "Enter" || e.key === " ") {
- setSelectedShapeId(shape.id);
- }
- }}
- >
-
-
- ),
- )}
-
{isMobile && (
Please use a desktop/laptop to view the Editor.
)}
-
+
{/* Left column: Controls */}
{!isMobile && (
-
-
-
+
+
+
-
+
{editedShapes.length > 0 ? (
<>
@@ -405,7 +335,7 @@ export default function ClipPathGenerator() {
)}
- {/* Middle column: Preview */}
-
-
-
-
-
+
+
- {isTab && (
+
+
-
-
- {/* Right column: Code output */}
- {!isTab && (
-
-
-
-
-
-
- )}
+
);
From b98fe91e7eddcc2bc6c4825943c893f408eef443 Mon Sep 17 00:00:00 2001
From: Naymur Rahman <66328660+naymurdev@users.noreply.github.com>
Date: Wed, 25 Feb 2026 22:21:30 +0600
Subject: [PATCH 20/24] feat: add right-side export drawer for clip-path
component and svg code
---
components/view/clip-path/index.tsx | 37 +++++++++++++++++++++++------
1 file changed, 30 insertions(+), 7 deletions(-)
diff --git a/components/view/clip-path/index.tsx b/components/view/clip-path/index.tsx
index 075557c..a9e08fe 100644
--- a/components/view/clip-path/index.tsx
+++ b/components/view/clip-path/index.tsx
@@ -6,6 +6,13 @@ import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import CopyToClipboard from "@/components/ui/copy-to-clipboard";
import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+ Sheet,
+ SheetContent,
+ SheetHeader,
+ SheetTitle,
+ SheetTrigger,
+} from "@/components/ui/sheet";
import { Tabs, TabsContent, TabsList } from "@/components/ui/tabs";
import { useMediaQuery } from "@/components/ui/use-media-query";
import { cn } from "@/lib/utils";
@@ -62,6 +69,7 @@ export default function ClipPathGenerator() {
>([]);
const [historyIndex, setHistoryIndex] = useState(-1);
const [draggedPointIndex, setDraggedPointIndex] = useState(-1);
+ const [exportOpen, setExportOpen] = useState(false);
const editorRef = useRef(null);
@@ -431,13 +439,28 @@ export default function ClipPathGenerator() {
-
- Export clip-path code
+
+
+
+
+
+
+ Export
+
+
+
+
From 39884a75778f9fd576bd2439ca3ed0b75033eaa5 Mon Sep 17 00:00:00 2001
From: Naymur Rahman <66328660+naymurdev@users.noreply.github.com>
Date: Wed, 25 Feb 2026 22:39:41 +0600
Subject: [PATCH 21/24] feat: add svg/shadows-style sidebar rail to clip-path
editor
---
components/view/clip-path/index.tsx | 371 ++++++++++++++++------------
1 file changed, 210 insertions(+), 161 deletions(-)
diff --git a/components/view/clip-path/index.tsx b/components/view/clip-path/index.tsx
index a9e08fe..50e4c85 100644
--- a/components/view/clip-path/index.tsx
+++ b/components/view/clip-path/index.tsx
@@ -6,6 +6,13 @@ import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import CopyToClipboard from "@/components/ui/copy-to-clipboard";
import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
import {
Sheet,
SheetContent,
@@ -13,12 +20,22 @@ import {
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";
-import { Tabs, TabsContent, TabsList } from "@/components/ui/tabs";
import { useMediaQuery } from "@/components/ui/use-media-query";
import { cn } from "@/lib/utils";
import { parseSvgPath, pointsToSvgPath } from "@/lib/utils";
import { useClipPathStore } from "@/store/clipPath-storage";
-import { TabsTrigger } from "@radix-ui/react-tabs";
+import {
+ Bookmark,
+ Layers,
+ Moon,
+ PanelsTopLeft,
+ Settings2,
+ SidebarClose,
+ SidebarOpen,
+ Sun,
+} from "lucide-react";
+import { useTheme } from "next-themes";
+import { usePathname, useRouter } from "next/navigation";
import { useCallback, useEffect, useRef, useState } from "react";
import { CodeOutput } from "./code-output";
import { CustomShapeForm } from "./custom-shape-form";
@@ -36,6 +53,10 @@ const SAMPLE_IMAGES = [
];
export default function ClipPathGenerator() {
+ const { resolvedTheme, setTheme } = useTheme();
+ const pathname = usePathname();
+ const router = useRouter();
+ const isTab = useMediaQuery("(max-width:1024px)");
const isMobile = useMediaQuery("(max-width:768px)");
const {
@@ -70,6 +91,10 @@ export default function ClipPathGenerator() {
const [historyIndex, setHistoryIndex] = useState(-1);
const [draggedPointIndex, setDraggedPointIndex] = useState(-1);
const [exportOpen, setExportOpen] = useState(false);
+ const [activeSidebarTab, setActiveSidebarTab] = useState<
+ "presets" | "settings" | "edited" | "saved"
+ >("presets");
+ const [isSidebarExpanded, setIsSidebarExpanded] = useState(true);
const editorRef = useRef(null);
@@ -242,173 +267,197 @@ export default function ClipPathGenerator() {
)}
-
- {/* Left column: Controls */}
+
{!isMobile && (
-
-
-
-
-
- Shapes
-
-
- Edited
-
-
- Custom
-
-
-
-
-
-
-
- {!editMode && (
-
- )}
-
- {editMode && (
- exitEditMode(true)}
- onCancel={() => exitEditMode(false)}
- />
- )}
-
-
-
+
+ {[
+ { key: "presets", label: "Presets", icon: PanelsTopLeft },
+ { key: "settings", label: "Settings", icon: Settings2 },
+ { key: "edited", label: "Edited", icon: Layers },
+ { key: "saved", label: "Saved", icon: Bookmark },
+ ].map((item) => (
+
+ ))}
+
+
+
+
+
+
+
+ )}
- {/* Custom shapes list */}
- {customShapes.length > 0 && (
- <>
-
- Custom Shapes
-
-
- exitEditMode(true)}
- onCancel={() => exitEditMode(false)}
- />
- )}
-
- )}
-
-
-
-
-
+ {!isTab && isSidebarExpanded && (
+
+ {activeSidebarTab === "presets" && (
+
+
+
+ {!editMode ? (
+
+ ) : (
+ exitEditMode(true)}
+ onCancel={() => exitEditMode(false)}
+ />
+ )}
+
+ )}
+
+ {activeSidebarTab === "settings" && (
+
+
+
+ addCustomShape(customPath, customName)
+ }
+ disabled={editMode}
+ />
+
+
+ )}
+
+ {activeSidebarTab === "edited" && (
+
+ {editedShapes.length > 0 ? (
+
+ No Edited Shapes Found
+
+ )}
+
+ )}
+
+ {activeSidebarTab === "saved" && (
+
+ {customShapes.length > 0 ? (
+
+ No Custom/Saved Shapes Found
+
+ )}
+
+ )}
+
)}
-
Date: Wed, 25 Feb 2026 23:16:09 +0600
Subject: [PATCH 22/24] fix: prevent clip-path sidebar layout collapse in
fullscreen grid
---
components/view/clip-path/index.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/view/clip-path/index.tsx b/components/view/clip-path/index.tsx
index 50e4c85..bb43805 100644
--- a/components/view/clip-path/index.tsx
+++ b/components/view/clip-path/index.tsx
@@ -455,7 +455,7 @@ export default function ClipPathGenerator() {
)}
-
+
From 3b152b6c85eee9cafb117d5c2360cf7a2378b379 Mon Sep 17 00:00:00 2001
From: Naymur Rahman <66328660+naymurdev@users.noreply.github.com>
Date: Wed, 25 Feb 2026 23:16:15 +0600
Subject: [PATCH 23/24] feat: add top-right export button in clip-path
playground
---
components/view/clip-path/index.tsx | 7 ++++++-
1 file changed, 6 insertions(+), 1 deletion(-)
diff --git a/components/view/clip-path/index.tsx b/components/view/clip-path/index.tsx
index bb43805..b11b949 100644
--- a/components/view/clip-path/index.tsx
+++ b/components/view/clip-path/index.tsx
@@ -269,12 +269,17 @@ export default function ClipPathGenerator() {
+
+
+
{!isMobile && (
From 35fff547f0ee9c4f5c61348ca0e2771541e31892 Mon Sep 17 00:00:00 2001
From: naymurdev
Date: Tue, 31 Mar 2026 17:06:29 +0600
Subject: [PATCH 24/24] chore: update shapes and animate-svg
---
components/view/clip-path/index.tsx | 942 +++++-----
components/view/clip-path/shape-preview.tsx | 515 +++---
components/view/shadow/index.tsx | 787 +++++----
components/view/svg-line-draw/animate-svg.tsx | 627 +++----
.../view/svg-line-draw/example-paths.tsx | 215 ++-
components/view/svg-line-draw/index.tsx | 1514 +++++++++--------
6 files changed, 2274 insertions(+), 2326 deletions(-)
diff --git a/components/view/clip-path/index.tsx b/components/view/clip-path/index.tsx
index b11b949..4fa2da7 100644
--- a/components/view/clip-path/index.tsx
+++ b/components/view/clip-path/index.tsx
@@ -7,32 +7,32 @@ import { Card, CardContent } from "@/components/ui/card";
import CopyToClipboard from "@/components/ui/copy-to-clipboard";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
} from "@/components/ui/select";
import {
- Sheet,
- SheetContent,
- SheetHeader,
- SheetTitle,
- SheetTrigger,
+ Sheet,
+ SheetContent,
+ SheetHeader,
+ SheetTitle,
+ SheetTrigger,
} from "@/components/ui/sheet";
import { useMediaQuery } from "@/components/ui/use-media-query";
import { cn } from "@/lib/utils";
import { parseSvgPath, pointsToSvgPath } from "@/lib/utils";
import { useClipPathStore } from "@/store/clipPath-storage";
import {
- Bookmark,
- Layers,
- Moon,
- PanelsTopLeft,
- Settings2,
- SidebarClose,
- SidebarOpen,
- Sun,
+ Bookmark,
+ Layers,
+ Moon,
+ PanelsTopLeft,
+ Settings2,
+ SidebarClose,
+ SidebarOpen,
+ Sun,
} from "lucide-react";
import { useTheme } from "next-themes";
import { usePathname, useRouter } from "next/navigation";
@@ -44,482 +44,444 @@ import { EditControls } from "./edit-controls";
import { ImageSelector } from "./image-selector";
import { ShapeGrid } from "./shape-grid";
import { ShapePreview } from "./shape-preview";
+import ThemeSwitch from "@/components/theme-switcher";
// Sample images for preview
const SAMPLE_IMAGES = [
- "https://images.unsplash.com/photo-1635776062127-d379bfcba9f8?q=80&w=1932&auto=format&fit=crop",
- "https://images.unsplash.com/photo-1624115773145-9b77fe912897?q=80&w=2070&auto=format&fit=crop",
- "https://images.unsplash.com/photo-1600619030925-569b3b964418?q=80&w=2127&auto=format&fit=crop",
+ "https://images.unsplash.com/photo-1635776062127-d379bfcba9f8?q=80&w=1932&auto=format&fit=crop",
+ "https://images.unsplash.com/photo-1624115773145-9b77fe912897?q=80&w=2070&auto=format&fit=crop",
+ "https://images.unsplash.com/photo-1600619030925-569b3b964418?q=80&w=2127&auto=format&fit=crop",
];
export default function ClipPathGenerator() {
- const { resolvedTheme, setTheme } = useTheme();
- const pathname = usePathname();
- const router = useRouter();
- const isTab = useMediaQuery("(max-width:1024px)");
- const isMobile = useMediaQuery("(max-width:768px)");
-
- const {
- selectedShapeId,
- setSelectedShapeId,
- customPath,
- customName,
- addCustomShape,
- addEditedShape,
- deleteShape,
- setCustomPath,
- setCustomName,
- customShapes,
- editedShapes,
- } = useClipPathStore();
-
- const [selectedImage, setSelectedImage] = useState(SAMPLE_IMAGES[0]);
- const [uploadedImages, setUploadedImages] = useState([]);
- const [editClipPathId, _setEditClipPathId] = useState("edit-clip-path");
- const [editMode, setEditMode] = useState(false);
- const [controlPoints, setControlPoints] = useState<
- { x: number; y: number; command: string; isControl: boolean }[]
- >([]);
- const [_selectedPoint, setSelectedPoint] = useState(null);
- const [zoomLevel, setZoomLevel] = useState(0.8);
- const [previewOffset, setPreviewOffset] = useState({ x: 0, y: 0 });
- const [currentEditPath, setCurrentEditPath] = useState("");
- const [editingShapeKey, setEditingShapeKey] = useState(null);
- const [controlPointsHistory, setControlPointsHistory] = useState<
- { x: number; y: number; command: string; isControl: boolean }[][]
- >([]);
- const [historyIndex, setHistoryIndex] = useState(-1);
- const [draggedPointIndex, setDraggedPointIndex] = useState(-1);
- const [exportOpen, setExportOpen] = useState(false);
- const [activeSidebarTab, setActiveSidebarTab] = useState<
- "presets" | "settings" | "edited" | "saved"
- >("presets");
- const [isSidebarExpanded, setIsSidebarExpanded] = useState(true);
-
- const editorRef = useRef(null);
-
- const allShapes = [...INITIAL_CLIP_PATHS, ...editedShapes, ...customShapes];
- const selectedShape =
- allShapes.find((shape) => shape.id === selectedShapeId) ||
- INITIAL_CLIP_PATHS[0];
-
- useEffect(() => {
- if (INITIAL_CLIP_PATHS.length > 0 && !selectedShapeId) {
- setSelectedShapeId(INITIAL_CLIP_PATHS[0].id);
- }
- }, [selectedShapeId, setSelectedShapeId]);
-
- useEffect(() => {
- if (controlPoints.length > 0) {
- const path = pointsToSvgPath(controlPoints);
- setCurrentEditPath(path);
- }
- }, [controlPoints]);
-
- const handleImageUpload = (e: React.ChangeEvent) => {
- const files = e.target.files;
- if (files) {
- const newUploadedImages: string[] = []; // Ensure this is initialized outside the loop
-
- for (const file of Array.from(files)) {
- const reader = new FileReader();
- reader.onload = (event) => {
- const uploadedImage = event.target?.result as string;
- newUploadedImages.push(uploadedImage);
-
- setUploadedImages((prev) => [...prev, uploadedImage]);
- setSelectedImage(uploadedImage);
- };
- reader.readAsDataURL(file);
- }
- }
- };
-
- const enterEditMode = (shapeId?: string) => {
- const id = shapeId || selectedShapeId;
- if (!id) return;
-
- setEditingShapeKey(id);
-
- const shape = allShapes.find((s) => s.id === id);
- if (!shape) return;
-
- const pathData = shape.path;
-
- const points = parseSvgPath(pathData);
-
- setSelectedShapeId(id);
- setControlPoints(points);
- setCurrentEditPath(pathData);
- setEditMode(true);
-
- setControlPointsHistory([points]);
- setHistoryIndex(0);
- };
-
- const exitEditMode = (save = true) => {
- if (save && controlPoints.length > 0 && editingShapeKey) {
- const newPath = pointsToSvgPath(controlPoints);
- const shape = allShapes.find((s) => s.id === editingShapeKey);
- const className = shape?.className || "";
- addEditedShape(editingShapeKey, newPath, className);
- }
-
- setEditMode(false);
- setSelectedPoint(null);
- setEditingShapeKey(null);
- };
-
- const startDrag = (index: number) => {
- setDraggedPointIndex(index);
- };
-
- const handleMouseMove = (e: React.MouseEvent) => {
- if (draggedPointIndex === -1 || !editorRef.current) return;
-
- const svg = editorRef.current;
- const ctm = svg.getScreenCTM();
- if (!ctm) return;
-
- const newX = (e.clientX - ctm.e) / ctm.a;
- const newY = (e.clientY - ctm.f) / ctm.d;
-
- if (Number.isNaN(newX) || Number.isNaN(newY)) return;
-
- setControlPoints((prev) => {
- const newPoints = [...prev];
- if (newPoints[draggedPointIndex]) {
- newPoints[draggedPointIndex] = {
- ...newPoints[draggedPointIndex],
- x: newX,
- y: newY,
- };
- }
- return newPoints;
- });
- };
-
- const endDrag = () => {
- if (draggedPointIndex !== -1) {
- setControlPointsHistory((prev) => {
- const newHistory = prev.slice(0, historyIndex + 1);
- return [...newHistory, [...controlPoints]];
- });
- setHistoryIndex((prev) => prev + 1);
- }
- setDraggedPointIndex(-1);
- };
-
- const handleUndo = useCallback(() => {
- if (historyIndex > 0) {
- const newIndex = historyIndex - 1;
- setHistoryIndex(newIndex);
- setControlPoints(controlPointsHistory[newIndex]);
- }
- }, [historyIndex, controlPointsHistory]);
-
- useEffect(() => {
- const handleKeyDown = (e: KeyboardEvent) => {
- if (e.key === "+" || e.key === "=") {
- setZoomLevel((prev) => Math.min(5, prev + 0.25));
- } else if (e.key === "-" || e.key === "_") {
- setZoomLevel((prev) => Math.max(0.25, prev - 0.25));
- } else if (e.key === "0") {
- setZoomLevel(0.8);
- setPreviewOffset({ x: 0, y: 0 });
- } else if (e.key === "z" && (e.ctrlKey || e.metaKey) && editMode) {
- e.preventDefault();
- handleUndo(); // safely call the memoized function
- }
- };
-
- // Handle mouse wheel for zoom
- const handleWheel = (e: WheelEvent) => {
- if (e.ctrlKey || e.metaKey) {
- e.preventDefault();
-
- const delta = e.deltaY > 0 ? -0.1 : 0.1;
- setZoomLevel((prev) => Math.max(0.25, Math.min(5, prev + delta)));
- }
- };
-
- window.addEventListener("keydown", handleKeyDown);
- document.addEventListener("wheel", handleWheel, { passive: false });
-
- return () => {
- window.removeEventListener("keydown", handleKeyDown);
- document.removeEventListener("wheel", handleWheel);
- };
- }, [editMode, handleUndo]);
- if (allShapes.length === 0 || !selectedShape) {
- return (
-
- Loading shapes...
-
- );
- }
-
- return (
- <>
- {isMobile && (
-
- Please use a desktop/laptop to view the Editor.
-
- )}
-
-
-
-
-
- {!isMobile && (
-
-
- {[
- { key: "presets", label: "Presets", icon: PanelsTopLeft },
- { key: "settings", label: "Settings", icon: Settings2 },
- { key: "edited", label: "Edited", icon: Layers },
- { key: "saved", label: "Saved", icon: Bookmark },
- ].map((item) => (
-
- ))}
-
-
-
-
-
-
-
- )}
-
- {!isTab && isSidebarExpanded && (
-
- {activeSidebarTab === "presets" && (
-
-
-
- {!editMode ? (
-
- ) : (
- exitEditMode(true)}
- onCancel={() => exitEditMode(false)}
- />
- )}
-
- )}
-
- {activeSidebarTab === "settings" && (
-
-
-
- addCustomShape(customPath, customName)
- }
- disabled={editMode}
- />
-
-
- )}
-
- {activeSidebarTab === "edited" && (
-
- {editedShapes.length > 0 ? (
-
- No Edited Shapes Found
-
- )}
-
- )}
-
- {activeSidebarTab === "saved" && (
-
- {customShapes.length > 0 ? (
-
- No Custom/Saved Shapes Found
-
- )}
-
- )}
-
- )}
-
-
-
-
-
-
- Click and drag to pan the zoomed view
-
- )}
-
- Use mouse wheel + Ctrl to zoom in/out, or press + and - keys
-
-
-
-
- Export clip-path code
-
-
-
-
-
-
- Export
-
-
-
-
-
-
-
-
-
-
- );
+ const pathname = usePathname();
+ const router = useRouter();
+ const isTab = useMediaQuery("(max-width:1024px)");
+ const isMobile = useMediaQuery("(max-width:768px)");
+
+ const {
+ selectedShapeId,
+ setSelectedShapeId,
+ customPath,
+ customName,
+ addCustomShape,
+ addEditedShape,
+ deleteShape,
+ setCustomPath,
+ setCustomName,
+ customShapes,
+ editedShapes,
+ } = useClipPathStore();
+
+ const [selectedImage, setSelectedImage] = useState(SAMPLE_IMAGES[0]);
+ const [uploadedImages, setUploadedImages] = useState([]);
+ const [editClipPathId, _setEditClipPathId] = useState("edit-clip-path");
+ const [editMode, setEditMode] = useState(false);
+ const [controlPoints, setControlPoints] = useState<
+ { x: number; y: number; command: string; isControl: boolean }[]
+ >([]);
+ const [_selectedPoint, setSelectedPoint] = useState(null);
+ const [zoomLevel, setZoomLevel] = useState(0.8);
+ const [previewOffset, setPreviewOffset] = useState({ x: 0, y: 0 });
+ const [currentEditPath, setCurrentEditPath] = useState("");
+ const [editingShapeKey, setEditingShapeKey] = useState(null);
+ const [controlPointsHistory, setControlPointsHistory] = useState<
+ { x: number; y: number; command: string; isControl: boolean }[][]
+ >([]);
+ const [historyIndex, setHistoryIndex] = useState(-1);
+ const [draggedPointIndex, setDraggedPointIndex] = useState(-1);
+ const [activeSidebarTab, setActiveSidebarTab] = useState<
+ "presets" | "settings" | "edited" | "saved"
+ >("presets");
+ const [isSidebarExpanded, setIsSidebarExpanded] = useState(true);
+
+ const editorRef = useRef(null);
+
+ const allShapes = [...INITIAL_CLIP_PATHS, ...editedShapes, ...customShapes];
+ const selectedShape =
+ allShapes.find((shape) => shape.id === selectedShapeId) ||
+ INITIAL_CLIP_PATHS[0];
+
+ useEffect(() => {
+ if (INITIAL_CLIP_PATHS.length > 0 && !selectedShapeId) {
+ setSelectedShapeId(INITIAL_CLIP_PATHS[0].id);
+ }
+ }, [selectedShapeId, setSelectedShapeId]);
+
+ useEffect(() => {
+ if (controlPoints.length > 0) {
+ const path = pointsToSvgPath(controlPoints);
+ setCurrentEditPath(path);
+ }
+ }, [controlPoints]);
+
+ const handleImageUpload = (e: React.ChangeEvent) => {
+ const files = e.target.files;
+ if (files) {
+ const newUploadedImages: string[] = []; // Ensure this is initialized outside the loop
+
+ for (const file of Array.from(files)) {
+ const reader = new FileReader();
+ reader.onload = (event) => {
+ const uploadedImage = event.target?.result as string;
+ newUploadedImages.push(uploadedImage);
+
+ setUploadedImages((prev) => [...prev, uploadedImage]);
+ setSelectedImage(uploadedImage);
+ };
+ reader.readAsDataURL(file);
+ }
+ }
+ };
+
+ const enterEditMode = (shapeId?: string) => {
+ const id = shapeId || selectedShapeId;
+ if (!id) return;
+
+ setEditingShapeKey(id);
+
+ const shape = allShapes.find((s) => s.id === id);
+ if (!shape) return;
+
+ const pathData = shape.path;
+
+ const points = parseSvgPath(pathData);
+
+ setSelectedShapeId(id);
+ setControlPoints(points);
+ setCurrentEditPath(pathData);
+ setEditMode(true);
+
+ setControlPointsHistory([points]);
+ setHistoryIndex(0);
+ };
+
+ const exitEditMode = (save = true) => {
+ if (save && controlPoints.length > 0 && editingShapeKey) {
+ const newPath = pointsToSvgPath(controlPoints);
+ const shape = allShapes.find((s) => s.id === editingShapeKey);
+ const className = shape?.className || "";
+ addEditedShape(editingShapeKey, newPath, className);
+ }
+
+ setEditMode(false);
+ setSelectedPoint(null);
+ setEditingShapeKey(null);
+ };
+
+ const startDrag = (index: number) => {
+ setDraggedPointIndex(index);
+ };
+
+ const handleMouseMove = (e: React.MouseEvent) => {
+ if (draggedPointIndex === -1 || !editorRef.current) return;
+
+ const svg = editorRef.current;
+ const ctm = svg.getScreenCTM();
+ if (!ctm) return;
+
+ const newX = (e.clientX - ctm.e) / ctm.a;
+ const newY = (e.clientY - ctm.f) / ctm.d;
+
+ if (Number.isNaN(newX) || Number.isNaN(newY)) return;
+
+ setControlPoints((prev) => {
+ const newPoints = [...prev];
+ if (newPoints[draggedPointIndex]) {
+ newPoints[draggedPointIndex] = {
+ ...newPoints[draggedPointIndex],
+ x: newX,
+ y: newY,
+ };
+ }
+ return newPoints;
+ });
+ };
+
+ const endDrag = () => {
+ if (draggedPointIndex !== -1) {
+ setControlPointsHistory((prev) => {
+ const newHistory = prev.slice(0, historyIndex + 1);
+ return [...newHistory, [...controlPoints]];
+ });
+ setHistoryIndex((prev) => prev + 1);
+ }
+ setDraggedPointIndex(-1);
+ };
+
+ const handleUndo = useCallback(() => {
+ if (historyIndex > 0) {
+ const newIndex = historyIndex - 1;
+ setHistoryIndex(newIndex);
+ setControlPoints(controlPointsHistory[newIndex]);
+ }
+ }, [historyIndex, controlPointsHistory]);
+
+ useEffect(() => {
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === "+" || e.key === "=") {
+ setZoomLevel((prev) => Math.min(5, prev + 0.25));
+ } else if (e.key === "-" || e.key === "_") {
+ setZoomLevel((prev) => Math.max(0.25, prev - 0.25));
+ } else if (e.key === "0") {
+ setZoomLevel(0.8);
+ setPreviewOffset({ x: 0, y: 0 });
+ } else if (e.key === "z" && (e.ctrlKey || e.metaKey) && editMode) {
+ e.preventDefault();
+ handleUndo(); // safely call the memoized function
+ }
+ };
+
+ // Handle mouse wheel for zoom
+ const handleWheel = (e: WheelEvent) => {
+ if (e.ctrlKey || e.metaKey) {
+ e.preventDefault();
+
+ const delta = e.deltaY > 0 ? -0.1 : 0.1;
+ setZoomLevel((prev) => Math.max(0.25, Math.min(5, prev + delta)));
+ }
+ };
+
+ window.addEventListener("keydown", handleKeyDown);
+ document.addEventListener("wheel", handleWheel, { passive: false });
+
+ return () => {
+ window.removeEventListener("keydown", handleKeyDown);
+ document.removeEventListener("wheel", handleWheel);
+ };
+ }, [editMode, handleUndo]);
+ if (allShapes.length === 0 || !selectedShape) {
+ return (
+
+ Loading shapes...
+
+ );
+ }
+
+ return (
+ <>
+ {isMobile && (
+
+ Please use a desktop/laptop to view the Editor.
+
+ )}
+
+
+ {!isMobile && (
+
+
+ {[
+ { key: "presets", label: "Presets", icon: PanelsTopLeft },
+ { key: "settings", label: "Settings", icon: Settings2 },
+ { key: "edited", label: "Edited", icon: Layers },
+ { key: "saved", label: "Saved", icon: Bookmark },
+ ].map((item) => (
+
+ ))}
+
+
+
+
+ {!editMode ? (
+
+ ) : (
+ exitEditMode(true)}
+ onCancel={() => exitEditMode(false)}
+ />
+ )}
+
+ )}
+
+ {activeSidebarTab === "settings" && (
+
+
+
+ addCustomShape(customPath, customName)
+ }
+ disabled={editMode}
+ />
+
+
+ )}
+
+ {activeSidebarTab === "edited" && (
+
+ {editedShapes.length > 0 ? (
+
+ No Edited Shapes Found
+
+ )}
+
+ )}
+
+ {activeSidebarTab === "saved" && (
+
+ {customShapes.length > 0 ? (
+
+ No Custom/Saved Shapes Found
+
+ )}
+
+ )}
+
+ )}
+
+
+
+
+
+
+
+
+
+ Click and drag to pan the zoomed view
+
+ )}
+
+ Use mouse wheel + Ctrl to zoom in/out, or press + and - keys
+
+
+
+
+
+
+
+ );
}
diff --git a/components/view/clip-path/shape-preview.tsx b/components/view/clip-path/shape-preview.tsx
index 0bb9c8a..684e228 100644
--- a/components/view/clip-path/shape-preview.tsx
+++ b/components/view/clip-path/shape-preview.tsx
@@ -10,286 +10,283 @@ import { useRef, useState } from "react";
import type { ClipPathShape } from "./data";
interface ShapePreviewProps {
- selectedShape: ClipPathShape;
- selectedImage: string;
- editMode: boolean;
- editClipPathId: string;
- currentEditPath: string;
- controlPoints: Array<{
- x: number;
- y: number;
- command: string;
- isControl: boolean;
- }>;
- zoomLevel: number;
- setZoomLevel: (value: number) => void;
- previewOffset: { x: number; y: number };
- setPreviewOffset: (offset: { x: number; y: number }) => void;
- onMouseMove?: (e: React.MouseEvent) => void;
- onMouseUp?: () => void;
- onMouseLeave?: () => void;
- startDrag?: (index: number) => void;
- editorRef?: React.RefObject;
+ selectedShape: ClipPathShape;
+ selectedImage: string;
+ editMode: boolean;
+ editClipPathId: string;
+ currentEditPath: string;
+ controlPoints: Array<{
+ x: number;
+ y: number;
+ command: string;
+ isControl: boolean;
+ }>;
+ zoomLevel: number;
+ className?: string;
+ setZoomLevel: (value: number) => void;
+ previewOffset: { x: number; y: number };
+ setPreviewOffset: (offset: { x: number; y: number }) => void;
+ onMouseMove?: (e: React.MouseEvent) => void;
+ onMouseUp?: () => void;
+ onMouseLeave?: () => void;
+ startDrag?: (index: number) => void;
+ editorRef?: React.RefObject;
}
export function ShapePreview({
- selectedShape,
- selectedImage,
- editMode,
- editClipPathId,
- currentEditPath,
- controlPoints,
- zoomLevel,
- setZoomLevel,
- previewOffset,
- setPreviewOffset,
- onMouseMove,
- onMouseUp,
- onMouseLeave,
- startDrag,
- editorRef,
+ selectedShape,
+ selectedImage,
+ editMode,
+ className,
+ editClipPathId,
+ currentEditPath,
+ controlPoints,
+ zoomLevel,
+ setZoomLevel,
+ previewOffset,
+ setPreviewOffset,
+ onMouseMove,
+ onMouseUp,
+ onMouseLeave,
+ startDrag,
+ editorRef,
}: ShapePreviewProps) {
- const [isDraggingPreview, setIsDraggingPreview] = useState(false);
- const [startDragPos, setStartDragPos] = useState({ x: 0, y: 0 });
+ const [isDraggingPreview, setIsDraggingPreview] = useState(false);
+ const [startDragPos, setStartDragPos] = useState({ x: 0, y: 0 });
- const svgRef = useRef(null);
- const previewRef = useRef(null);
+ const svgRef = useRef(null);
+ const previewRef = useRef(null);
- const resetZoom = () => {
- setZoomLevel(0.8);
- setPreviewOffset({ x: 0, y: 0 });
- };
+ const resetZoom = () => {
+ setZoomLevel(0.8);
+ setPreviewOffset({ x: 0, y: 0 });
+ };
- const getViewBox = () => {
- const size = 1 / zoomLevel;
- const offset = (1 - size) / 2;
- return `${offset} ${offset} ${size} ${size}`;
- };
+ const getViewBox = () => {
+ const size = 1 / zoomLevel;
+ const offset = (1 - size) / 2;
+ return `${offset} ${offset} ${size} ${size}`;
+ };
- const startPreviewDrag = (e: React.MouseEvent) => {
- if (zoomLevel <= 1) return;
- setIsDraggingPreview(true);
- setStartDragPos({ x: e.clientX, y: e.clientY });
- };
+ const startPreviewDrag = (e: React.MouseEvent) => {
+ if (zoomLevel <= 1) return;
+ setIsDraggingPreview(true);
+ setStartDragPos({ x: e.clientX, y: e.clientY });
+ };
- const handlePreviewMouseMove = (e: React.MouseEvent) => {
- if (!isDraggingPreview || zoomLevel <= 1 || !previewRef.current) return;
+ const handlePreviewMouseMove = (e: React.MouseEvent) => {
+ if (!isDraggingPreview || zoomLevel <= 1 || !previewRef.current) return;
- const deltaX =
- (((e.clientX - startDragPos.x) / previewRef.current.clientWidth) * 100) /
- zoomLevel;
- const deltaY =
- (((e.clientY - startDragPos.y) / previewRef.current.clientHeight) * 100) /
- zoomLevel;
- // @ts-ignore
- setPreviewOffset((prev) => ({
- x: Math.min(50, Math.max(-50, prev.x - deltaX)),
- y: Math.min(50, Math.max(-50, prev.y - deltaY)),
- }));
+ const deltaX =
+ (((e.clientX - startDragPos.x) / previewRef.current.clientWidth) * 100) /
+ zoomLevel;
+ const deltaY =
+ (((e.clientY - startDragPos.y) / previewRef.current.clientHeight) * 100) /
+ zoomLevel;
+ // @ts-ignore
+ setPreviewOffset((prev) => ({
+ x: Math.min(50, Math.max(-50, prev.x - deltaX)),
+ y: Math.min(50, Math.max(-50, prev.y - deltaY)),
+ }));
- setStartDragPos({ x: e.clientX, y: e.clientY });
- };
+ setStartDragPos({ x: e.clientX, y: e.clientY });
+ };
- // End dragging the preview
- const endPreviewDrag = () => {
- setIsDraggingPreview(false);
- };
+ // End dragging the preview
+ const endPreviewDrag = () => {
+ setIsDraggingPreview(false);
+ };
- // Make sure we have a valid path
- const shapePath = selectedShape?.path || "";
- const editPath = currentEditPath || shapePath;
+ // Make sure we have a valid path
+ const shapePath = selectedShape?.path || "";
+ const editPath = currentEditPath || shapePath;
- return (
- 1
- ? "grab"
- : "default",
- }}
- >
-
+ return (
+ 1
+ ? "grab"
+ : "default",
+ }}
+ >
+
-
+ {editMode ? (
+
+
+ 
+
- {editMode ? (
-
-
-
-
+ {/* SVG editor overlay */}
+
+ ) : (
+
+
+
+ )}
- {/* Control points */}
- {controlPoints.map((point, index) => (
- {
- e.stopPropagation(); // Prevent event bubbling
- if (startDrag) startDrag(index);
- }}
- style={{ cursor: "move" }}
- />
- ))}
-
-
- ) : (
-
- {/* Figure with clip path */}
-
-
-
-
- )}
-
- {/* Zoom controls */}
-
- Zoom: {zoomLevel.toFixed(1)}x
- setZoomLevel(value[0])}
- />
-
-
-
- );
+ {/* Zoom controls */}
+
+ Zoom: {zoomLevel.toFixed(1)}x
+ setZoomLevel(value[0])}
+ />
+
+
+
+ );
}
diff --git a/components/view/shadow/index.tsx b/components/view/shadow/index.tsx
index 3c5e3c6..84b1963 100644
--- a/components/view/shadow/index.tsx
+++ b/components/view/shadow/index.tsx
@@ -3,25 +3,25 @@
import { Button } from "@/components/ui/button";
import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
} from "@/components/ui/select";
import { useMediaQuery } from "@/components/ui/use-media-query";
import { preBuiltShadows } from "@/config/shadow-data";
import { useShadowStore } from "@/store/useShadowStore";
import type { ShadowLayer, ShadowPreset } from "@/types/shadow";
import {
- Bookmark,
- Layers,
- Moon,
- PanelsTopLeft,
- Settings2,
- SidebarClose,
- SidebarOpen,
- Sun,
+ Bookmark,
+ Layers,
+ Moon,
+ PanelsTopLeft,
+ Settings2,
+ SidebarClose,
+ SidebarOpen,
+ Sun,
} from "lucide-react";
import { useTheme } from "next-themes";
import { usePathname, useRouter } from "next/navigation";
@@ -30,416 +30,403 @@ import toast from "react-hot-toast";
import ShadowControls from "./shadow-controls";
import ShadowPresets from "./shadow-presets";
import ShadowPreview from "./shadow-preview";
+import ThemeSwitch from "@/components/theme-switcher";
export default function ShadowGenerator() {
- const { resolvedTheme, setTheme, theme } = useTheme();
- const isTab = useMediaQuery("(max-width:1024px)");
- const isMobile = useMediaQuery("(max-width:768px)");
- const [shadowName, setShadowName] = useState("");
- const [isEdited, setIsEdited] = useState(false);
- const [currentPresetId, setCurrentPresetId] = useState(null);
- const [shadowMode, setShadowMode] = useState<"box" | "text">("box");
+ const { theme } = useTheme();
+ const isTab = useMediaQuery("(max-width:1024px)");
+ const isMobile = useMediaQuery("(max-width:768px)");
+ const [shadowName, setShadowName] = useState("");
+ const [isEdited, setIsEdited] = useState(false);
+ const [currentPresetId, setCurrentPresetId] = useState(null);
+ const [shadowMode, setShadowMode] = useState<"box" | "text">("box");
- const {
- savedShadows,
- favorites,
- addShadow,
- updateShadow,
- deleteShadow,
- toggleFavorite,
- isFavorite,
- } = useShadowStore();
+ const {
+ savedShadows,
+ favorites,
+ addShadow,
+ updateShadow,
+ deleteShadow,
+ toggleFavorite,
+ isFavorite,
+ } = useShadowStore();
- const [isDarkMode, setIsDarkMode] = useState(false);
- const [isRemoveShadow, setIsRemoveShadow] = useState(false);
- const [layers, setLayers] = useState([
- {
- offsetX: 0,
- offsetY: 0,
- blur: 0,
- spread: 1,
- color: "#000000",
- opacity: 4,
- isVisible: true,
- },
- {
- offsetX: 0,
- offsetY: 1,
- blur: 0,
- spread: 0,
- color: "#000000",
- opacity: 5,
- isVisible: true,
- },
- {
- offsetX: 0,
- offsetY: 2,
- blur: 2,
- spread: 0,
- color: "#000000",
- opacity: 5,
- isVisible: true,
- },
- {
- offsetX: 0,
- offsetY: 2,
- blur: 4,
- spread: 0,
- color: "#000000",
- opacity: 5,
- isVisible: true,
- },
- ]);
- const [activeShadow, setActiveShadow] = useState(
- preBuiltShadows[0],
- );
- const [activeLayerIndex, setActiveLayerIndex] = useState(0);
- const [tailwindClass, setTailwindClass] = useState("");
- const [cssValue, setCssValue] = useState("");
- const [_uniqueColors, setUniqueColors] = useState<
- { color: string; count: number }[]
- >([]);
+ const [isDarkMode, setIsDarkMode] = useState(false);
+ const [isRemoveShadow, setIsRemoveShadow] = useState(false);
+ const [layers, setLayers] = useState([
+ {
+ offsetX: 0,
+ offsetY: 0,
+ blur: 0,
+ spread: 1,
+ color: "#000000",
+ opacity: 4,
+ isVisible: true,
+ },
+ {
+ offsetX: 0,
+ offsetY: 1,
+ blur: 0,
+ spread: 0,
+ color: "#000000",
+ opacity: 5,
+ isVisible: true,
+ },
+ {
+ offsetX: 0,
+ offsetY: 2,
+ blur: 2,
+ spread: 0,
+ color: "#000000",
+ opacity: 5,
+ isVisible: true,
+ },
+ {
+ offsetX: 0,
+ offsetY: 2,
+ blur: 4,
+ spread: 0,
+ color: "#000000",
+ opacity: 5,
+ isVisible: true,
+ },
+ ]);
+ const [activeShadow, setActiveShadow] = useState(
+ preBuiltShadows[0],
+ );
+ const [activeLayerIndex, setActiveLayerIndex] = useState(0);
+ const [tailwindClass, setTailwindClass] = useState("");
+ const [cssValue, setCssValue] = useState("");
+ const [_uniqueColors, setUniqueColors] = useState<
+ { color: string; count: number }[]
+ >([]);
- const [globalPositionMode, setGlobalPositionMode] = useState(false);
- const [globalShadowTypeMode, setGlobalShadowTypeMode] = useState(false);
- const [globalBlurMode, setGlobalBlurMode] = useState(false);
- const [globalSpreadMode, setGlobalSpreadMode] = useState(false);
- const [globalOpacityMode, setGlobalOpacityMode] = useState(false);
- const [globalMasterMode, setGlobalMasterMode] = useState(false);
- const [activeSidebarTab, setActiveSidebarTab] = useState<
- "presets" | "settings" | "edited" | "saved"
- >("settings");
- const [isSidebarExpanded, setIsSidebarExpanded] = useState(true);
- const [previewBackground, setPreviewBackground] = useState("#ECF0F3");
- const [previewSurfaceColor, setPreviewSurfaceColor] = useState("#FFFFFF");
- const pathname = usePathname();
- const router = useRouter();
+ const [globalPositionMode, setGlobalPositionMode] = useState(false);
+ const [globalShadowTypeMode, setGlobalShadowTypeMode] = useState(false);
+ const [globalBlurMode, setGlobalBlurMode] = useState(false);
+ const [globalSpreadMode, setGlobalSpreadMode] = useState(false);
+ const [globalOpacityMode, setGlobalOpacityMode] = useState(false);
+ const [globalMasterMode, setGlobalMasterMode] = useState(false);
+ const [activeSidebarTab, setActiveSidebarTab] = useState<
+ "presets" | "settings" | "edited" | "saved"
+ >("settings");
+ const [isSidebarExpanded, setIsSidebarExpanded] = useState(true);
+ const [previewBackground, setPreviewBackground] = useState("#ECF0F3");
+ const [previewSurfaceColor, setPreviewSurfaceColor] = useState("#FFFFFF");
+ const pathname = usePathname();
+ const router = useRouter();
- const toggleGlobalMasterMode = (enabled: boolean) => {
- setGlobalMasterMode(enabled);
- setGlobalPositionMode(enabled);
- setGlobalBlurMode(enabled);
- setGlobalSpreadMode(enabled);
- setGlobalOpacityMode(enabled);
- setGlobalShadowTypeMode(enabled);
- };
+ const toggleGlobalMasterMode = (enabled: boolean) => {
+ setGlobalMasterMode(enabled);
+ setGlobalPositionMode(enabled);
+ setGlobalBlurMode(enabled);
+ setGlobalSpreadMode(enabled);
+ setGlobalOpacityMode(enabled);
+ setGlobalShadowTypeMode(enabled);
+ };
- useEffect(() => {
- if (activeShadow) {
- setIsEdited(checkIfEdited(layers, activeShadow));
- }
- const shadowString = layers
- .filter((layer) => layer.isVisible !== false)
- .map((layer) => {
- const { offsetX, offsetY, blur, spread, color, opacity, isInner } =
- layer;
- const rgba = `rgba(${Number.parseInt(
- color.slice(1, 3),
- 16,
- )}, ${Number.parseInt(color.slice(3, 5), 16)}, ${Number.parseInt(
- color.slice(5, 7),
- 16,
- )}, ${opacity / 100})`;
- return `${
- isInner ? "inset " : ""
- }${offsetX}px ${offsetY}px ${blur}px ${spread}px ${rgba}`;
- })
- .join(", ");
+ useEffect(() => {
+ if (activeShadow) {
+ setIsEdited(checkIfEdited(layers, activeShadow));
+ }
+ const shadowString = layers
+ .filter((layer) => layer.isVisible !== false)
+ .map((layer) => {
+ const { offsetX, offsetY, blur, spread, color, opacity, isInner } =
+ layer;
+ const rgba = `rgba(${Number.parseInt(
+ color.slice(1, 3),
+ 16,
+ )}, ${Number.parseInt(color.slice(3, 5), 16)}, ${Number.parseInt(
+ color.slice(5, 7),
+ 16,
+ )}, ${opacity / 100})`;
+ return `${
+ isInner ? "inset " : ""
+ }${offsetX}px ${offsetY}px ${blur}px ${spread}px ${rgba}`;
+ })
+ .join(", ");
- setCssValue(shadowString);
+ setCssValue(shadowString);
- const tailwindShadow = `shadow-[${layers
- .filter((layer) => layer.isVisible !== false)
- .map((layer) => {
- const { offsetX, offsetY, blur, spread, color, opacity, isInner } =
- layer;
- const rgba =
- opacity === 100
- ? color
- : `rgba(${Number.parseInt(color.slice(1, 3), 16)},${Number.parseInt(
- color.slice(3, 5),
- 16,
- )},${Number.parseInt(color.slice(5, 7), 16)},${opacity / 100})`;
- return `${
- isInner ? "inset_" : ""
- }${offsetX}px_${offsetY}px_${blur}px_${spread}px_${rgba}`;
- })
- .join(",")}]`;
+ const tailwindShadow = `shadow-[${layers
+ .filter((layer) => layer.isVisible !== false)
+ .map((layer) => {
+ const { offsetX, offsetY, blur, spread, color, opacity, isInner } =
+ layer;
+ const rgba =
+ opacity === 100
+ ? color
+ : `rgba(${Number.parseInt(color.slice(1, 3), 16)},${Number.parseInt(
+ color.slice(3, 5),
+ 16,
+ )},${Number.parseInt(color.slice(5, 7), 16)},${opacity / 100})`;
+ return `${
+ isInner ? "inset_" : ""
+ }${offsetX}px_${offsetY}px_${blur}px_${spread}px_${rgba}`;
+ })
+ .join(",")}]`;
- setTailwindClass(tailwindShadow);
+ setTailwindClass(tailwindShadow);
- const colorMap = new Map();
+ const colorMap = new Map();
- for (const layer of layers) {
- const color = layer.color.toUpperCase();
- colorMap.set(color, (colorMap.get(color) || 0) + 1);
- }
+ for (const layer of layers) {
+ const color = layer.color.toUpperCase();
+ colorMap.set(color, (colorMap.get(color) || 0) + 1);
+ }
- setUniqueColors(
- Array.from(colorMap.entries()).map(([color, count]) => ({
- color,
- count,
- })),
- );
- }, [layers, activeShadow]);
+ setUniqueColors(
+ Array.from(colorMap.entries()).map(([color, count]) => ({
+ color,
+ count,
+ })),
+ );
+ }, [layers, activeShadow]);
- useEffect(() => {
- setIsDarkMode(theme === "dark");
- }, [theme]);
+ useEffect(() => {
+ setIsDarkMode(theme === "dark");
+ }, [theme]);
- const checkIfEdited = (
- currentLayers: ShadowLayer[],
- originalPreset: ShadowPreset,
- ) => {
- if (!originalPreset) return false;
- if (currentLayers.length !== originalPreset.layers.length) return true;
+ const checkIfEdited = (
+ currentLayers: ShadowLayer[],
+ originalPreset: ShadowPreset,
+ ) => {
+ if (!originalPreset) return false;
+ if (currentLayers.length !== originalPreset.layers.length) return true;
- for (let i = 0; i < currentLayers.length; i++) {
- const currentLayer = currentLayers[i];
- const originalLayer = originalPreset.layers[i];
- if (
- currentLayer.offsetX !== originalLayer.offsetX ||
- currentLayer.offsetY !== originalLayer.offsetY ||
- currentLayer.blur !== originalLayer.blur ||
- currentLayer.spread !== originalLayer.spread ||
- currentLayer.color !== originalLayer.color ||
- currentLayer.opacity !== originalLayer.opacity ||
- currentLayer.isInner !== originalLayer.isInner ||
- currentLayer.isVisible !== originalLayer.isVisible
- ) {
- return true;
- }
- }
+ for (let i = 0; i < currentLayers.length; i++) {
+ const currentLayer = currentLayers[i];
+ const originalLayer = originalPreset.layers[i];
+ if (
+ currentLayer.offsetX !== originalLayer.offsetX ||
+ currentLayer.offsetY !== originalLayer.offsetY ||
+ currentLayer.blur !== originalLayer.blur ||
+ currentLayer.spread !== originalLayer.spread ||
+ currentLayer.color !== originalLayer.color ||
+ currentLayer.opacity !== originalLayer.opacity ||
+ currentLayer.isInner !== originalLayer.isInner ||
+ currentLayer.isVisible !== originalLayer.isVisible
+ ) {
+ return true;
+ }
+ }
- return false;
- };
+ return false;
+ };
- const applyPreset = (preset: ShadowPreset) => {
- if (isDarkMode && preset.darkLayers) {
- setLayers([...preset.darkLayers]);
- } else {
- setLayers([...preset.layers]);
- }
- setShadowMode("box");
- setActiveLayerIndex(0);
- setActiveShadow(preset);
- setCurrentPresetId(preset.id || null);
- setIsEdited(false);
- setShadowName(preset.name || "");
- };
+ const applyPreset = (preset: ShadowPreset) => {
+ if (isDarkMode && preset.darkLayers) {
+ setLayers([...preset.darkLayers]);
+ } else {
+ setLayers([...preset.layers]);
+ }
+ setShadowMode("box");
+ setActiveLayerIndex(0);
+ setActiveShadow(preset);
+ setCurrentPresetId(preset.id || null);
+ setIsEdited(false);
+ setShadowName(preset.name || "");
+ };
- const saveCurrentShadow = () => {
- const shadowToSave = {
- name: shadowName || "Custom Shadow",
- tailwind: tailwindClass,
- css: cssValue,
- darkTailwind: isDarkMode ? tailwindClass : undefined,
- darkCss: isDarkMode ? cssValue : undefined,
- layers: [...layers],
- darkLayers: isDarkMode ? [...layers] : undefined,
- isCustom: true,
- };
+ const saveCurrentShadow = () => {
+ const shadowToSave = {
+ name: shadowName || "Custom Shadow",
+ tailwind: tailwindClass,
+ css: cssValue,
+ darkTailwind: isDarkMode ? tailwindClass : undefined,
+ darkCss: isDarkMode ? cssValue : undefined,
+ layers: [...layers],
+ darkLayers: isDarkMode ? [...layers] : undefined,
+ isCustom: true,
+ };
- if (currentPresetId && savedShadows.some((s) => s.id === currentPresetId)) {
- updateShadow(currentPresetId, shadowToSave);
- toast.success("Your custom shadow has been updated.!");
- } else {
- const newId = addShadow(shadowToSave);
- setCurrentPresetId(newId);
- toast.success("Your custom shadow has been saved.");
- }
+ if (currentPresetId && savedShadows.some((s) => s.id === currentPresetId)) {
+ updateShadow(currentPresetId, shadowToSave);
+ toast.success("Your custom shadow has been updated.!");
+ } else {
+ const newId = addShadow(shadowToSave);
+ setCurrentPresetId(newId);
+ toast.success("Your custom shadow has been saved.");
+ }
- setIsEdited(false);
- };
+ setIsEdited(false);
+ };
- const textShadowValue = layers
- .filter((layer) => layer.isVisible !== false)
- .map((layer) => {
- const rgba = `rgba(${Number.parseInt(layer.color.slice(1, 3), 16)}, ${Number.parseInt(layer.color.slice(3, 5), 16)}, ${Number.parseInt(layer.color.slice(5, 7), 16)}, ${layer.opacity / 100})`;
- return `${layer.offsetX}px ${layer.offsetY}px ${layer.blur}px ${rgba}`;
- })
- .join(", ");
+ const textShadowValue = layers
+ .filter((layer) => layer.isVisible !== false)
+ .map((layer) => {
+ const rgba = `rgba(${Number.parseInt(layer.color.slice(1, 3), 16)}, ${Number.parseInt(layer.color.slice(3, 5), 16)}, ${Number.parseInt(layer.color.slice(5, 7), 16)}, ${layer.opacity / 100})`;
+ return `${layer.offsetX}px ${layer.offsetY}px ${layer.blur}px ${rgba}`;
+ })
+ .join(", ");
- return (
- <>
- {isMobile && (
-
- Please use a desktop/laptop to view the Editor.
-
- )}
-
-
-
- {[
- { key: "presets", label: "Presets", icon: PanelsTopLeft },
- { key: "settings", label: "Settings", icon: Settings2 },
- { key: "edited", label: "Edited", icon: Layers },
- { key: "saved", label: "Saved", icon: Bookmark },
- ].map((item) => (
-
- ))}
-
-
-
-
-
-
-
+ return (
+ <>
+ {isMobile && (
+
+ Please use a desktop/laptop to view the Editor.
+
+ )}
+
+
+
+ {[
+ { key: "presets", label: "Presets", icon: PanelsTopLeft },
+ { key: "settings", label: "Settings", icon: Settings2 },
+ { key: "edited", label: "Edited", icon: Layers },
+ { key: "saved", label: "Saved", icon: Bookmark },
+ ].map((item) => (
+
+ ))}
+
+
+
- Using the same layer controls as box shadow. For
- text-shadow, spread/inset are ignored in output.
-
- )}
-
-
+ Using the same layer controls as box shadow. For
+ text-shadow, spread/inset are ignored in output.
+
+ )}
+
+ = ({
- width,
- height,
- viewBox,
- className = "flex justify-center w-full h-full",
- path,
- paths = [],
- strokeColor = "#cecece",
- strokeWidth = 3,
- strokeLinecap = "round",
- animationDuration = 1.5,
- animationDelay = 0,
- animationBounce = 0.3,
- staggerDelay = 0.2,
- reverseAnimation = false,
- enableHoverAnimation = false,
- hoverAnimationType = "redraw",
- hoverStrokeColor = "#4f46e5",
- initialAnimation = true,
+ width,
+ height,
+ viewBox,
+ className = "flex justify-center w-full h-full",
+ path,
+ paths = [],
+ strokeColor = "text-primary", // Default to CSS class
+ strokeWidth = 3,
+ strokeLinecap = "round",
+ animationDuration = 1.5,
+ animationDelay = 0,
+ animationBounce = 0.3,
+ staggerDelay = 0.2,
+ reverseAnimation = false,
+ enableHoverAnimation = false,
+ hoverAnimationType = "redraw",
+ hoverStrokeColor = "#4f46e5",
+ initialAnimation = true,
}) => {
- const [isHovering, setIsHovering] = useState(false);
+ const [isHovering, setIsHovering] = useState(false);
- const normalizedPaths: PathData[] = React.useMemo(() => {
- if (paths.length > 0) return paths;
- if (path) {
- // Parse the path to normalize coordinates if needed
- let normalizedPath = path;
+ const normalizedPaths: PathData[] = React.useMemo(() => {
+ if (paths.length > 0) return paths;
+ if (path) {
+ // Parse the path to normalize coordinates if needed
+ let normalizedPath = path;
- // If the path is a complex path with large starting coordinates, try to normalize it
- if (path.startsWith("M") && path.includes(",")) {
- try {
- // Extract all coordinates from the path
- const allCoords: number[] = [];
- const regex = /[-+]?[0-9]*\.?[0-9]+/g;
- // biome-ignore lint/suspicious/noImplicitAnyLet:
- let match;
- // biome-ignore lint/suspicious/noAssignInExpressions:
- while ((match = regex.exec(path)) !== null) {
- allCoords.push(Number.parseFloat(match[0]));
- }
+ // If the path is a complex path with large starting coordinates, try to normalize it
+ if (path.startsWith("M") && path.includes(",")) {
+ try {
+ // Extract all coordinates from the path
+ const allCoords: number[] = [];
+ const regex = /[-+]?[0-9]*\.?[0-9]+/g;
+ // biome-ignore lint/suspicious/noImplicitAnyLet:
+ let match;
+ // biome-ignore lint/suspicious/noAssignInExpressions:
+ while ((match = regex.exec(path)) !== null) {
+ allCoords.push(Number.parseFloat(match[0]));
+ }
- // Find min and max x and y to normalize
- if (allCoords.length >= 2) {
- let minX = Number.POSITIVE_INFINITY;
- let minY = Number.POSITIVE_INFINITY;
- let maxX = Number.NEGATIVE_INFINITY;
- let maxY = Number.NEGATIVE_INFINITY;
+ // Find min and max x and y to normalize
+ if (allCoords.length >= 2) {
+ let minX = Number.POSITIVE_INFINITY;
+ let minY = Number.POSITIVE_INFINITY;
+ let maxX = Number.NEGATIVE_INFINITY;
+ let maxY = Number.NEGATIVE_INFINITY;
- for (let i = 0; i < allCoords.length; i += 2) {
- if (i + 1 < allCoords.length) {
- minX = Math.min(minX, allCoords[i]);
- minY = Math.min(minY, allCoords[i + 1]);
- maxX = Math.max(maxX, allCoords[i]);
- maxY = Math.max(maxY, allCoords[i + 1]);
- }
- }
+ for (let i = 0; i < allCoords.length; i += 2) {
+ if (i + 1 < allCoords.length) {
+ minX = Math.min(minX, allCoords[i]);
+ minY = Math.min(minY, allCoords[i + 1]);
+ maxX = Math.max(maxX, allCoords[i]);
+ maxY = Math.max(maxY, allCoords[i + 1]);
+ }
+ }
- // Calculate the path width and height
- const pathWidth = maxX - minX;
- const pathHeight = maxY - minY;
+ // Calculate the path width and height
+ const pathWidth = maxX - minX;
+ const pathHeight = maxY - minY;
- // Parse the viewBox to get its dimensions
- const viewBoxDims = viewBox.split(" ").map(Number);
- const viewBoxWidth = viewBoxDims.length >= 3 ? viewBoxDims[2] : 100;
- const viewBoxHeight =
- viewBoxDims.length >= 4 ? viewBoxDims[3] : 100;
+ // Parse the viewBox to get its dimensions
+ const viewBoxDims = viewBox.split(" ").map(Number);
+ const viewBoxWidth = viewBoxDims.length >= 3 ? viewBoxDims[2] : 100;
+ const viewBoxHeight =
+ viewBoxDims.length >= 4 ? viewBoxDims[3] : 100;
- // Calculate padding (10% of viewBox width)
- const paddingX = viewBoxWidth * 0.1;
- const paddingY = viewBoxHeight * 0.1;
+ // Calculate padding (10% of viewBox width)
+ const paddingX = viewBoxWidth * 0.1;
+ const paddingY = viewBoxHeight * 0.1;
- // Calculate scale to fit the path within the viewBox with padding
- const scaleX = (viewBoxWidth - 2 * paddingX) / pathWidth;
- const scaleY = (viewBoxHeight - 2 * paddingY) / pathHeight;
- const scale = Math.min(scaleX, scaleY);
+ // Calculate scale to fit the path within the viewBox with padding
+ const scaleX = (viewBoxWidth - 2 * paddingX) / pathWidth;
+ const scaleY = (viewBoxHeight - 2 * paddingY) / pathHeight;
+ const scale = Math.min(scaleX, scaleY);
- // Adjust all coordinates to start from the left with padding and proper scaling
- let adjustedPath = path;
- let index = 0;
- adjustedPath = adjustedPath.replace(
- /[-+]?[0-9]*\.?[0-9]+/g,
- (match) => {
- const val = Number.parseFloat(match);
- const isX = index % 2 === 0;
- index++;
+ // Adjust all coordinates to start from the left with padding and proper scaling
+ let adjustedPath = path;
+ let index = 0;
+ adjustedPath = adjustedPath.replace(
+ /[-+]?[0-9]*\.?[0-9]+/g,
+ (match) => {
+ const val = Number.parseFloat(match);
+ const isX = index % 2 === 0;
+ index++;
- if (isX) {
- // X coordinate - shift to start from left with padding
- return ((val - minX) * scale + paddingX).toFixed(2);
- }
- // Y coordinate - center vertically
- return ((val - minY) * scale + paddingY).toFixed(2);
- },
- );
- normalizedPath = adjustedPath;
- }
- } catch (e) {
- // If parsing fails, use the original path
- console.error("Failed to normalize path:", e);
- }
- }
+ if (isX) {
+ // X coordinate - shift to start from left with padding
+ return ((val - minX) * scale + paddingX).toFixed(2);
+ }
+ // Y coordinate - center vertically
+ return ((val - minY) * scale + paddingY).toFixed(2);
+ },
+ );
+ normalizedPath = adjustedPath;
+ }
+ } catch (e) {
+ // If parsing fails, use the original path
+ console.error("Failed to normalize path:", e);
+ }
+ }
- return [
- {
- d: normalizedPath,
- stroke: strokeColor,
- strokeWidth,
- strokeLinecap,
- },
- ];
- }
- return [];
- }, [paths, path, strokeColor, strokeWidth, strokeLinecap, viewBox]);
+ return [
+ {
+ d: normalizedPath,
+ stroke: strokeColor,
+ strokeWidth,
+ strokeLinecap,
+ },
+ ];
+ }
+ return [];
+ }, [paths, path, strokeColor, strokeWidth, strokeLinecap, viewBox]);
- // Initial animation variants
- const getPathVariants = (index: number): Variants => ({
- hidden: {
- pathLength: 0,
- opacity: 0,
- pathOffset: reverseAnimation ? 1 : 0,
- },
- visible: {
- pathLength: 1,
- opacity: 1,
- pathOffset: reverseAnimation ? 0 : 0,
- transition: {
- pathLength: {
- type: "spring",
- duration: animationDuration,
- bounce: animationBounce,
- delay: animationDelay + index * staggerDelay,
- },
- pathOffset: {
- duration: animationDuration,
- delay: animationDelay + index * staggerDelay,
- },
- opacity: {
- duration: animationDuration / 4,
- delay: animationDelay + index * staggerDelay,
- },
- },
- },
- });
+ // Initial animation variants
+ const getPathVariants = (index: number): Variants => ({
+ hidden: {
+ pathLength: 0,
+ opacity: 0,
+ pathOffset: reverseAnimation ? 1 : 0,
+ },
+ visible: {
+ pathLength: 1,
+ opacity: 1,
+ pathOffset: reverseAnimation ? 0 : 0,
+ transition: {
+ pathLength: {
+ type: "spring",
+ duration: animationDuration,
+ bounce: animationBounce,
+ delay: animationDelay + index * staggerDelay,
+ },
+ pathOffset: {
+ duration: animationDuration,
+ delay: animationDelay + index * staggerDelay,
+ },
+ opacity: {
+ duration: animationDuration / 4,
+ delay: animationDelay + index * staggerDelay,
+ },
+ },
+ },
+ });
- if (normalizedPaths.length === 0) return null;
+ if (normalizedPaths.length === 0) return null;
- return (
- setIsHovering(true)}
- onHoverEnd={() => setIsHovering(false)}
- whileHover={
- enableHoverAnimation && hoverAnimationType !== "redraw"
- ? { scale: 1.05 }
- : {}
- }
- preserveAspectRatio="xMidYMid meet"
- style={{ maxWidth: "100%", maxHeight: "100%", display: "block" }}
- >
- animate svg
- {normalizedPaths.map((pathData, index) => (
-
- );
+ return (
+ setIsHovering(true)}
+ onHoverEnd={() => setIsHovering(false)}
+ whileHover={
+ enableHoverAnimation && hoverAnimationType !== "redraw"
+ ? { scale: 1.05 }
+ : {}
+ }
+ preserveAspectRatio="xMidYMid meet"
+ style={{ maxWidth: "100%", maxHeight: "100%", display: "block" }}
+ >
+ animate svg
+ {normalizedPaths.map((pathData, index) => (
+
+ );
};
interface AnimatedPathProps {
- pathData: PathData;
- index: number;
- strokeColor: string;
- strokeWidth: number;
- strokeLinecap: "butt" | "round" | "square";
- initialAnimation: boolean;
- pathVariants: Variants;
- isHovering: boolean;
- hoverAnimationType: HoverAnimationType;
- hoverStrokeColor: string | null;
- totalPaths: number;
+ pathData: PathData;
+ index: number;
+ strokeColor: string;
+ strokeWidth: number;
+ strokeLinecap: "butt" | "round" | "square";
+ initialAnimation: boolean;
+ pathVariants: Variants;
+ isHovering: boolean;
+ hoverAnimationType: HoverAnimationType;
+ hoverStrokeColor: string | null;
+ totalPaths: number;
}
const AnimatedPath: React.FC = ({
- pathData,
- index,
- strokeColor,
- strokeWidth,
- strokeLinecap,
- initialAnimation,
- pathVariants,
- isHovering,
- hoverAnimationType,
- hoverStrokeColor,
- totalPaths,
+ pathData,
+ index,
+ strokeColor,
+ strokeWidth,
+ strokeLinecap,
+ initialAnimation,
+ pathVariants,
+ isHovering,
+ hoverAnimationType,
+ hoverStrokeColor,
+ totalPaths,
}) => {
- const controls = useAnimationControls();
- const originalColor = pathData.stroke || strokeColor;
+ const controls = useAnimationControls();
+ const originalColor = pathData.stroke || strokeColor;
- // Handle hover animations
- React.useEffect(() => {
- if (!isHovering) {
- controls.stop();
- if (initialAnimation) {
- controls.start("visible");
- }
- return;
- }
+ // Handle hover animations
+ React.useEffect(() => {
+ if (!isHovering) {
+ controls.stop();
+ if (initialAnimation) {
+ controls.start("visible");
+ }
+ return;
+ }
- switch (hoverAnimationType) {
- case "redraw":
- controls.start({
- pathLength: [1, 0, 1],
- transition: {
- pathLength: {
- repeat: Number.POSITIVE_INFINITY,
- duration: 3,
- ease: "easeInOut",
- },
- },
- });
- break;
+ switch (hoverAnimationType) {
+ case "redraw":
+ controls.start({
+ pathLength: [1, 0, 1],
+ transition: {
+ pathLength: {
+ repeat: Number.POSITIVE_INFINITY,
+ duration: 3,
+ ease: "easeInOut",
+ },
+ },
+ });
+ break;
- case "float":
- controls.start({
- y: [0, -2, 0],
- transition: {
- y: {
- repeat: Number.POSITIVE_INFINITY,
- duration: 1.5,
- ease: "easeInOut",
- },
- },
- });
- break;
+ case "float":
+ controls.start({
+ y: [0, -2, 0],
+ transition: {
+ y: {
+ repeat: Number.POSITIVE_INFINITY,
+ duration: 1.5,
+ ease: "easeInOut",
+ },
+ },
+ });
+ break;
- case "pulse":
- controls.start({
- scale: [1, 1.03, 1],
- transition: {
- scale: {
- repeat: Number.POSITIVE_INFINITY,
- duration: 1.3,
- ease: "easeInOut",
- },
- },
- });
- break;
+ case "pulse":
+ controls.start({
+ scale: [1, 1.03, 1],
+ transition: {
+ scale: {
+ repeat: Number.POSITIVE_INFINITY,
+ duration: 1.3,
+ ease: "easeInOut",
+ },
+ },
+ });
+ break;
- case "color":
- controls.start({
- stroke: [
- originalColor,
- hoverStrokeColor || strokeColor,
- originalColor,
- ],
- transition: {
- stroke: {
- repeat: Number.POSITIVE_INFINITY,
- duration: 2,
- ease: "easeInOut",
- },
- },
- });
- break;
+ case "color":
+ controls.start({
+ stroke: [
+ originalColor,
+ hoverStrokeColor || strokeColor,
+ originalColor,
+ ],
+ transition: {
+ stroke: {
+ repeat: Number.POSITIVE_INFINITY,
+ duration: 2,
+ ease: "easeInOut",
+ },
+ },
+ });
+ break;
- case "sequential":
- controls.start({
- pathLength: [1, 0, 1],
- transition: {
- pathLength: {
- repeat: Number.POSITIVE_INFINITY,
- duration: 2,
- delay: (index / Math.max(totalPaths, 1)) * 2,
- ease: "easeInOut",
- },
- },
- });
- break;
- }
- }, [
- isHovering,
- hoverAnimationType,
- controls,
- originalColor,
- hoverStrokeColor,
- strokeColor,
- index,
- totalPaths,
- initialAnimation,
- ]);
+ case "sequential":
+ controls.start({
+ pathLength: [1, 0, 1],
+ transition: {
+ pathLength: {
+ repeat: Number.POSITIVE_INFINITY,
+ duration: 2,
+ delay: (index / Math.max(totalPaths, 1)) * 2,
+ ease: "easeInOut",
+ },
+ },
+ });
+ break;
+ }
+ }, [
+ isHovering,
+ hoverAnimationType,
+ controls,
+ originalColor,
+ hoverStrokeColor,
+ strokeColor,
+ index,
+ totalPaths,
+ initialAnimation,
+ ]);
- return (
- >(
- {},
- );
- const [copiedIndex, setCopiedIndex] = useState(null);
+ const { theme } = useTheme();
+ const [_exampleViewBox, setExampleViewBox] = useQueryState("viewBox", {
+ defaultValue: "0 0 250 100",
+ });
+ const [animationKeys, setAnimationKeys] = useState>(
+ {},
+ );
+ const [copiedIndex, setCopiedIndex] = useState(null);
- // Reload animation for a specific example
- const reloadAnimation = (index: number) => {
- setAnimationKeys((prev) => ({
- ...prev,
- [index]: (prev[index] || 0) + 1,
- }));
- };
+ // Reload animation for a specific example
+ const reloadAnimation = (index: number) => {
+ setAnimationKeys((prev) => ({
+ ...prev,
+ [index]: (prev[index] || 0) + 1,
+ }));
+ };
- // Copy component code to clipboard
- const copyComponentCode = (index: number) => {
- const example = examplesSvgPath[index];
+ // Copy component code to clipboard
+ const copyComponentCode = (index: number) => {
+ const example = examplesSvgPath[index];
- // Generate the full component code
- const code = `
- {example.name}
-
-
+ return (
+
+ {examplesSvgPath.map((example, index) => (
+
+ {
+ onSelectPath(example.path);
+ setExampleViewBox(example.viewBox);
+ setActivePresets(example.id);
+ }}
+ onKeyDown={(e) => {
+ e.preventDefault();
+ onSelectPath(example.path);
+ setExampleViewBox(example.viewBox);
+ setActivePresets(example.id);
+ }}
+ >
+
+ {example.name}
+
+
-
-
-
-
-
- ))}
-
- );
+
+
+
+
+
+ ))}
+
+ );
}
diff --git a/components/view/svg-line-draw/index.tsx b/components/view/svg-line-draw/index.tsx
index c61da80..5d62c13 100644
--- a/components/view/svg-line-draw/index.tsx
+++ b/components/view/svg-line-draw/index.tsx
@@ -2,29 +2,29 @@
import { Button } from "@/components/ui/button";
import {
- Card,
- CardContent,
- CardDescription,
- CardHeader,
- CardTitle,
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
} from "@/components/ui/card";
import CopyToClipboard from "@/components/ui/copy-to-clipboard";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
- Popover,
- PopoverContent,
- PopoverTrigger,
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
} from "@/components/ui/popover";
import { CustomSlider } from "@/components/ui/range-slider";
import { ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { Tabs, TabsContent, TabsList } from "@/components/ui/tabs";
@@ -32,25 +32,25 @@ import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";
import { TabsTrigger } from "@radix-ui/react-tabs";
import {
- Bookmark,
- ChevronDown,
- ChevronUp,
- CodeIcon,
- Copy,
- Edit2,
- GripVertical,
- Layers,
- Loader,
- PanelsTopLeft,
- PencilLine,
- Play,
- RefreshCcw,
- Save,
- Settings2,
- SidebarClose,
- SidebarOpen,
- Trash2,
- X,
+ Bookmark,
+ ChevronDown,
+ ChevronUp,
+ CodeIcon,
+ Copy,
+ Edit2,
+ GripVertical,
+ Layers,
+ Loader,
+ PanelsTopLeft,
+ PencilLine,
+ Play,
+ RefreshCcw,
+ Save,
+ Settings2,
+ SidebarClose,
+ SidebarOpen,
+ Trash2,
+ X,
} from "lucide-react";
import { useTheme } from "next-themes";
import { usePathname, useRouter } from "next/navigation";
@@ -70,139 +70,140 @@ import { ExamplePaths } from "./example-paths";
import { SavePathDialog } from "./save-path-dialog";
import { SavedPathsTab } from "./saved-draw-paths";
import { SvgEditor } from "./svg-editor";
+import ThemeSwitch from "@/components/theme-switcher";
type AnimationSettings = {
- width: string;
- height: string;
- viewBox: string;
- strokeColor: string;
- strokeWidth: number;
- strokeLinecap: "butt" | "round" | "square";
- animationDuration: number;
- animationDelay: number;
- animationBounce: number;
- reverseAnimation: boolean;
- enableHoverAnimation: boolean;
- hoverAnimationType: "float" | "pulse" | "redraw" | "color" | "sequential";
+ width: string;
+ height: string;
+ viewBox: string;
+ strokeColor: string;
+ strokeWidth: number;
+ strokeLinecap: "butt" | "round" | "square";
+ animationDuration: number;
+ animationDelay: number;
+ animationBounce: number;
+ reverseAnimation: boolean;
+ enableHoverAnimation: boolean;
+ hoverAnimationType: "float" | "pulse" | "redraw" | "color" | "sequential";
};
function SVGLineDrawGenerator() {
- const { theme } = useTheme();
- const [activePresets, setActivePresets] = useQueryState("presets");
- const [exampleViewBox, _setExampleViewBox] = useQueryState("viewBox", {
- defaultValue: "0 0 250 100",
- });
- const [editPath, setEditPath] = useQueryState(
- "editPath",
- parseAsBoolean.withDefault(false),
- );
- const [customDrawLine, setCustomDrawLine] = useState(false);
- const [currentPath, setCurrentPath] = useState("");
- const [savedPaths, _setSavedPaths] = useState([]);
- const [previewKey, setPreviewKey] = useState(0);
- const [_showEditor, setShowEditor] = useState(false);
- const [_editorViewBox, _setEditorViewBox] = useState("0 0 100 100");
- const [strokeColorPickerOpen, setStrokeColorPickerOpen] = useState(false);
- const [showSaveDialog, setShowSaveDialog] = useState(false);
- const [activeSidebarTab, setActiveSidebarTab] = useState<
- "presets" | "settings" | "edited" | "saved"
- >("presets");
- const [isSidebarExpanded, setIsSidebarExpanded] = useState(true);
- const pathname = usePathname();
- const router = useRouter();
- // Update the default smoothing value to be more appropriate
- const [settings, setSettings] = useState({
- width: "100%",
- height: "100%",
- viewBox: "0 0 250 100",
- strokeColor: "#000000",
- strokeWidth: 2,
- strokeLinecap: "round",
- animationDuration: 1.5,
- animationDelay: 0,
- animationBounce: 0.3,
- reverseAnimation: false,
- enableHoverAnimation: false,
- hoverAnimationType: "redraw",
- });
-
- useEffect(() => {
- setSettings((prev) => ({
- ...prev,
- viewBox: exampleViewBox,
- strokeColor: theme === "dark" ? "#ffffff" : "#000000",
- }));
- }, [theme, exampleViewBox]);
- // Update settings
- const updateSetting = (
- key: K,
- value: AnimationSettings[K],
- ) => {
- setSettings((prev) => ({ ...prev, [key]: value }));
- setPreviewKey((prev) => prev + 1);
- };
-
- // Save current path
- const savePath = () => {
- if (!currentPath) {
- toast.success("No path to save", {
- description: "Draw something first before saving",
- });
- return;
- }
- setShowSaveDialog(true);
- console.log(currentPath);
-
- // setSavedPaths((prev) => [...prev, currentPath]);
- // toast.success("Path saved", {
- // description: "Your path has been added to the collection",
- // });
- };
-
- // Clear current path
- const _clearPath = () => {
- setCurrentPath("");
- };
-
- // Copy generated code
- const copyCode = () => {
- const code = generateCode();
- navigator.clipboard.writeText(code);
- toast.success("code copied", {
- description: "The code has been copied to your clipboard",
- });
- };
-
- // Open the SVG editor for the current path
- const _openEditor = () => {
- if (!currentPath) {
- toast("No path to edit", {
- description: "Draw something first before editing",
- });
- return;
- }
- setShowEditor(true);
- };
-
- // Open the SVG editor for an example path
- // const openEditorForExample = (path: string, viewBox: string) => {
- // setCurrentPath(path);
- // setEditorViewBox(viewBox);
- // setSettings((prev) => ({
- // ...prev,
- // viewBox: viewBox,
- // }));
- // setShowEditor(true);
- // };
-
- // Generate code for the current animation
- const generateCode = () => {
- const pathsCode =
- savedPaths.length > 0
- ? `paths={[${savedPaths.map((p) => `{ d: "${p}" }`).join(", ")}]}`
- : `path="${currentPath}"`;
-
- return `("");
+ const [savedPaths, _setSavedPaths] = useState([]);
+ const [previewKey, setPreviewKey] = useState(0);
+ const [_showEditor, setShowEditor] = useState(false);
+ const [_editorViewBox, _setEditorViewBox] = useState("0 0 100 100");
+ const [strokeColorPickerOpen, setStrokeColorPickerOpen] = useState(false);
+ const [showSaveDialog, setShowSaveDialog] = useState(false);
+ const [activeSidebarTab, setActiveSidebarTab] = useState<
+ "presets" | "settings" | "edited" | "saved"
+ >("presets");
+ const [isSidebarExpanded, setIsSidebarExpanded] = useState(true);
+ const pathname = usePathname();
+ const router = useRouter();
+ // Update the default smoothing value to be more appropriate
+ const [settings, setSettings] = useState({
+ width: "100%",
+ height: "100%",
+ viewBox: "0 0 250 100",
+ strokeColor: "#000000",
+ strokeWidth: 2,
+ strokeLinecap: "round",
+ animationDuration: 1.5,
+ animationDelay: 0,
+ animationBounce: 0.3,
+ reverseAnimation: false,
+ enableHoverAnimation: false,
+ hoverAnimationType: "redraw",
+ });
+
+ useEffect(() => {
+ setSettings((prev) => ({
+ ...prev,
+ viewBox: exampleViewBox,
+ strokeColor: theme === "dark" ? "#ffffff" : "#000000",
+ }));
+ }, [theme, exampleViewBox]);
+ // Update settings
+ const updateSetting = (
+ key: K,
+ value: AnimationSettings[K],
+ ) => {
+ setSettings((prev) => ({ ...prev, [key]: value }));
+ setPreviewKey((prev) => prev + 1);
+ };
+
+ // Save current path
+ const savePath = () => {
+ if (!currentPath) {
+ toast.success("No path to save", {
+ description: "Draw something first before saving",
+ });
+ return;
+ }
+ setShowSaveDialog(true);
+ console.log(currentPath);
+
+ // setSavedPaths((prev) => [...prev, currentPath]);
+ // toast.success("Path saved", {
+ // description: "Your path has been added to the collection",
+ // });
+ };
+
+ // Clear current path
+ const _clearPath = () => {
+ setCurrentPath("");
+ };
+
+ // Copy generated code
+ const copyCode = () => {
+ const code = generateCode();
+ navigator.clipboard.writeText(code);
+ toast.success("code copied", {
+ description: "The code has been copied to your clipboard",
+ });
+ };
+
+ // Open the SVG editor for the current path
+ const _openEditor = () => {
+ if (!currentPath) {
+ toast("No path to edit", {
+ description: "Draw something first before editing",
+ });
+ return;
+ }
+ setShowEditor(true);
+ };
+
+ // Open the SVG editor for an example path
+ // const openEditorForExample = (path: string, viewBox: string) => {
+ // setCurrentPath(path);
+ // setEditorViewBox(viewBox);
+ // setSettings((prev) => ({
+ // ...prev,
+ // viewBox: viewBox,
+ // }));
+ // setShowEditor(true);
+ // };
+
+ // Generate code for the current animation
+ const generateCode = () => {
+ const pathsCode =
+ savedPaths.length > 0
+ ? `paths={[${savedPaths.map((p) => `{ d: "${p}" }`).join(", ")}]}`
+ : `path="${currentPath}"`;
+
+ return `
- setActiveSidebarTab(
- value as "presets" | "settings" | "edited" | "saved",
- )
- }
- className="flex h-full min-h-0 flex-col"
- >
-
-
- Presets
-
-
- Settings
-
-
- Edited
-
-
- Saved
-
-
- {/* {
+ if (activePresets) {
+ setActivePresets(null);
+ setEditPath(false);
+ setCustomDrawLine(true);
+ } else {
+ setCustomDrawLine(!customDrawLine);
+ }
+ };
+ const handleEditPath = () => {
+ if (activePresets) {
+ setEditPath(!editPath);
+ } else {
+ setEditPath(!editPath);
+ }
+ };
+
+ return (
+
+
+
+
+ {[
+ { key: "presets", label: "Presets", icon: PanelsTopLeft },
+ { key: "settings", label: "Settings", icon: Settings2 },
+ { key: "edited", label: "Edited", icon: Layers },
+ { key: "saved", label: "Saved", icon: Bookmark },
+ ].map((item) => (
+
+ ))}
+
+
+
+ setActiveSidebarTab(
+ value as "presets" | "settings" | "edited" | "saved",
+ )
+ }
+ className="flex h-full min-h-0 flex-col"
+ >
+
+
+ Presets
+
+
+ Settings
+
+
+ Edited
+
+
+ Saved
+
+
+ {/*
Custom
*/}
-
-
-
- {
- setCurrentPath(path);
- setCustomDrawLine(false);
- setEditPath(false);
- }}
- // onEditPath={openEditorForExample}
- setActivePresets={setActivePresets}
- activePresets={activePresets}
- />
-
-
-
- {/* Animation Settings */}
-
-
-
-
- updateSetting("viewBox", e.target.value)}
- />
-
-
-
-
-
-
-
-
-
-
- updateSetting("strokeColor", color)
- }
- />
-
-
- updateSetting("strokeColor", e.target.value)
- }
- className="flex-1"
- />
-
-
-
-
- updateSetting("strokeColor", e.target.value)
- }
- className="flex-1"
- />
-
-
-
-
-
-
- updateSetting("strokeWidth", value[0])
- }
- />
-
-
-
-
-
-
-
-
-
-
- updateSetting("animationDuration", value[0])
- }
- />
-
-
-
-
-
- updateSetting("animationDelay", value[0])
- }
- />
-
-
-
-
-
- updateSetting("animationBounce", value[0])
- }
- />
-
-
-
-
- updateSetting("reverseAnimation", checked)
- }
- />
-
-
-
-
-
- updateSetting("enableHoverAnimation", checked)
- }
- />
-
-
-
- {settings.enableHoverAnimation && (
-
-
-
-
- )}
-
-
-
- {/*
+
+
+
+ {
+ setCurrentPath(path);
+ setCustomDrawLine(false);
+ setEditPath(false);
+ }}
+ // onEditPath={openEditorForExample}
+ setActivePresets={setActivePresets}
+ activePresets={activePresets}
+ />
+
+
+
+ {/* Animation Settings */}
+
+
+
+
+ updateSetting("viewBox", e.target.value)}
+ />
+
+
+
+
+
+
+
+
+
+
+ updateSetting("strokeColor", color)
+ }
+ />
+
+
+ updateSetting("strokeColor", e.target.value)
+ }
+ className="flex-1"
+ />
+
+
+
+
+ updateSetting("strokeColor", e.target.value)
+ }
+ className="flex-1"
+ />
+
+
+
+
+
+
+ updateSetting("strokeWidth", value[0])
+ }
+ />
+
+
+
+
+
+
+
+
+
+
+ updateSetting("animationDuration", value[0])
+ }
+ />
+
+
+
+
+
+ updateSetting("animationDelay", value[0])
+ }
+ />
+
+
+
+
+
+ updateSetting("animationBounce", value[0])
+ }
+ />
+
+
+
+
+ updateSetting("reverseAnimation", checked)
+ }
+ />
+
+
+
+
+
+ updateSetting("enableHoverAnimation", checked)
+ }
+ />
+
+
+
+ {settings.enableHoverAnimation && (
+
+
+
+
+ )}
+
+
+
+ {/*
*/}
-
-
- {
- setCurrentPath(path);
- setCustomDrawLine(false);
- updateSetting("viewBox", viewBox);
- setPreviewKey((prev) => prev + 1);
- }}
- />
-
-
-
-
- {
- setCurrentPath(path);
- setCustomDrawLine(false);
- updateSetting("viewBox", viewBox);
- setPreviewKey((prev) => prev + 1);
- }}
- />
-
-
-
-
-
- {/* Right Column - Preview and Drawing Canvas */}
-
- {/* Preview Section */}
-
-
-
-
- {customDrawLine
- ? "Drawing"
- : editPath
- ? "Editing"
- : "Preview"}
-
-
-
-
-
-
-
-
- Component Code
-
- {/* See your animation in action
- )}
-
-
-
-
-
- {/* SVG Editor Modal */}
- {editPath ? (
- <>
-
-
-
-
-
-
-
-
-
- {
- setCurrentPath(newPath);
- // setPreviewKey((prev) => prev + 1);
- }}
- onClose={() => setEditPath(false)}
- strokeColor={settings.strokeColor}
- strokeWidth={settings.strokeWidth}
- />
-
-
-
- ) : (
- <>
-
-
- {currentPath || savedPaths.length > 0 ? (
-
- {/* {savedPaths.length > 0 ? (
+
+
+ {
+ setCurrentPath(path);
+ setCustomDrawLine(false);
+ updateSetting("viewBox", viewBox);
+ setPreviewKey((prev) => prev + 1);
+ }}
+ />
+
+
+
+
+ {
+ setCurrentPath(path);
+ setCustomDrawLine(false);
+ updateSetting("viewBox", viewBox);
+ setPreviewKey((prev) => prev + 1);
+ }}
+ />
+
+
+
+
+
+ {/* Right Column - Preview and Drawing Canvas */}
+
+ {/* Preview Section */}
+
+
+
+
+ {customDrawLine
+ ? "Drawing"
+ : editPath
+ ? "Editing"
+ : "Preview"}
+
+
+
+
+
+
+
+
+ Component Code
+
+ {/* See your animation in action
+ )}
+
+
+
+
+
+ {/* SVG Editor Modal */}
+ {editPath ? (
+ <>
+
+
+
+
+
+
+
+
+
+ {
+ setCurrentPath(newPath);
+ // setPreviewKey((prev) => prev + 1);
+ }}
+ onClose={() => setEditPath(false)}
+ strokeColor={settings.strokeColor}
+ strokeWidth={settings.strokeWidth}
+ />
+
+
+
+ ) : (
+ <>
+
+
+ {currentPath || savedPaths.length > 0 ? (
+
+ {/* {savedPaths.length > 0 ? (
Draw or select a path to preview
-
- )}
-
- )}
-
-
- {customDrawLine && (
- <>
-
-
-
-
-
-
- )}
-
-
-
-
- {/* Save Path Dialog */}
- {showSaveDialog && (
- setShowSaveDialog(false)}
- />
- )}
-
- {/*
-
-
- );
+ Draw or select a path to preview
+
+ )}
+
+ )}
+
+
+ {customDrawLine && (
+ <>
+
+
+
+
+
+
+ )}
+
+
+
+
+ {/* Save Path Dialog */}
+ {showSaveDialog && (
+ setShowSaveDialog(false)}
+ />
+ )}
+
+ {/*
+
+
+ );
}
export default SVGLineDrawGenerator;
@@ -358,19 +362,21 @@ export default function ShadowGenerator() {
/>
))}
-
);
From d72e44bb16e639b17ea7545b7434cfa2092e6933 Mon Sep 17 00:00:00 2001
From: Naymur Rahman <66328660+naymurdev@users.noreply.github.com>
Date: Wed, 25 Feb 2026 06:11:47 +0600
Subject: [PATCH 13/24] feat: add text shadow presets and tailwind v4 output to
shadows
---
components/view/shadow/index.tsx | 123 ++++++++++------
components/view/shadow/shadow-presets.tsx | 69 ++++++---
components/view/shadow/shadow-preview.tsx | 165 ++++++++++------------
config/shadow-data.ts | 33 +++++
types/shadow.ts | 7 +
5 files changed, 247 insertions(+), 150 deletions(-)
diff --git a/components/view/shadow/index.tsx b/components/view/shadow/index.tsx
index e7e7127..35208d2 100644
--- a/components/view/shadow/index.tsx
+++ b/components/view/shadow/index.tsx
@@ -1,6 +1,9 @@
"use client";
import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
@@ -35,6 +38,7 @@ export default function ShadowGenerator() {
const [shadowName, setShadowName] = useState("");
const [isEdited, setIsEdited] = useState(false);
const [currentPresetId, setCurrentPresetId] = useState
+
+
+
+
+ {activeSidebarTab === "settings" ? (
+ shadowMode === "box" ? (
+ + Use presets or paste your own `text-shadow` value. +
+
+ {preBuiltTextShadows.map((preset) => (
+
+ ))}
+
+ ) : (
+ + Text shadow presets are currently available under the Presets tab. +
+ )} +
+
{savedShadows.map((shadow) => (
{
- // Create a preset-like object from saved shadow
const savedPreset = {
id: shadow.id,
name: shadow.name,
@@ -80,9 +123,7 @@ export default function ShadowPresets({
)}
0 && (
-
{shadowMode === "text" ? (
-
+ >;
isDarkMode: boolean;
- textShadowValue: string;
- setTextShadowValue: React.Dispatch>;
+ setLayers: React.Dispatch>;
+ setActiveLayerIndex: React.Dispatch>;
}
export default function ShadowPresets({
@@ -41,13 +41,25 @@ export default function ShadowPresets({
currentPresetId,
setCurrentPresetId,
isDarkMode,
- textShadowValue,
- setTextShadowValue,
+ setLayers,
+ setActiveLayerIndex,
}: ShadowPresetsProps) {
const favouriteShadows = preBuiltShadows.filter((s) =>
favorites.includes(s.id),
);
+ const activeTextShadow = layersToTextShadow(activeShadow?.layers || []);
+
+ function layersToTextShadow(layers: readonly ShadowLayer[]) {
+ return layers
+ .filter((layer) => layer.isVisible !== false)
+ .map((layer) => {
+ const rgba = `rgba(${Number.parseInt(layer.color.slice(1, 3), 16)},${Number.parseInt(layer.color.slice(3, 5), 16)},${Number.parseInt(layer.color.slice(5, 7), 16)},${layer.opacity / 100})`;
+ return `${layer.offsetX}px ${layer.offsetY}px ${layer.blur}px ${rgba}`;
+ })
+ .join(", ");
+ }
+
if (shadowMode === "text") {
return (
@@ -57,10 +69,13 @@ export default function ShadowPresets({
{favouriteShadows.map((shadow) => (
diff --git a/components/view/shadow/shadow-presets.tsx b/components/view/shadow/shadow-presets.tsx
index 985adb2..339d150 100644
--- a/components/view/shadow/shadow-presets.tsx
+++ b/components/view/shadow/shadow-presets.tsx
@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { preBuiltShadows, preBuiltTextShadows } from "@/config/shadow-data";
import { cn } from "@/lib/utils";
-import type { ShadowPreset } from "@/types/shadow";
+import type { ShadowLayer, ShadowPreset } from "@/types/shadow";
import { Star, Trash } from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import type React from "react";
@@ -24,8 +24,8 @@ interface ShadowPresetsProps {
currentPresetId: string | null;
setCurrentPresetId: React.Dispatch
@@ -169,7 +208,7 @@ export default function ShadowPresets({
)}
{mode === "presets" && (
-
+
@@ -425,7 +426,6 @@ export default function ShadowGenerator() {
cssValue={cssValue}
tailwindClass={tailwindClass}
textShadowValue={textShadowValue}
- setTextShadowValue={setTextShadowValue}
isRemoveShadow={isRemoveShadow}
setIsRemoveShadow={setIsRemoveShadow}
isEdited={isEdited}
@@ -435,6 +435,8 @@ export default function ShadowGenerator() {
activeShadow={activeShadow}
previewBackground={previewBackground}
setPreviewBackground={setPreviewBackground}
+ previewSurfaceColor={previewSurfaceColor}
+ setPreviewSurfaceColor={setPreviewSurfaceColor}
/>
{preBuiltShadows.map((shadow, index) => (
-
+ {shadowMode === "text" ? (
+
+ {shadowMode === "text" && (
+
+
+ setTextShadowValue(e.target.value)}
+ placeholder="0px 2px 10px rgba(0,0,0,0.25)"
+ />
+
+ )}
-
Date: Wed, 25 Feb 2026 07:36:16 +0600
Subject: [PATCH 15/24] fix: simplify text-shadow presets UI and expand preset
library
---
components/view/shadow/shadow-presets.tsx | 3 ---
components/view/shadow/shadow-preview.tsx | 4 ++--
config/shadow-data.ts | 27 +++++++++++++++++++++++
3 files changed, 29 insertions(+), 5 deletions(-)
diff --git a/components/view/shadow/shadow-presets.tsx b/components/view/shadow/shadow-presets.tsx
index 62ed6a3..985adb2 100644
--- a/components/view/shadow/shadow-presets.tsx
+++ b/components/view/shadow/shadow-presets.tsx
@@ -71,9 +71,6 @@ export default function ShadowPresets({
>
Shadow
-
diff --git a/components/view/shadow/shadow-preview.tsx b/components/view/shadow/shadow-preview.tsx
index 2a5a442..6810a10 100644
--- a/components/view/shadow/shadow-preview.tsx
+++ b/components/view/shadow/shadow-preview.tsx
@@ -218,10 +218,10 @@ export default function ShadowPreview({
))}
diff --git a/components/view/shadow/shadow-preview.tsx b/components/view/shadow/shadow-preview.tsx
index 4271026..624e678 100644
--- a/components/view/shadow/shadow-preview.tsx
+++ b/components/view/shadow/shadow-preview.tsx
@@ -29,8 +29,11 @@ import { useState } from "react";
import toast from "react-hot-toast";
interface ShadowPreviewProps {
+ shadowMode: "box" | "text";
cssValue: string;
tailwindClass: string;
+ textShadowValue: string;
+ setTextShadowValue: React.Dispatch>;
isRemoveShadow: boolean;
setIsRemoveShadow: React.Dispatch>;
isEdited: boolean;
@@ -43,8 +46,11 @@ interface ShadowPreviewProps {
}
export default function ShadowPreview({
+ shadowMode,
cssValue,
tailwindClass,
+ textShadowValue,
+ setTextShadowValue,
isRemoveShadow,
setIsRemoveShadow,
isEdited,
@@ -58,6 +64,13 @@ export default function ShadowPreview({
const [copiedTailwind, setCopiedTailwind] = useState(false);
const [copiedCss, setCopiedCss] = useState(false);
+ const twValue =
+ shadowMode === "text"
+ ? `[text-shadow:${textShadowValue.replaceAll(" ", "_")}]`
+ : tailwindClass;
+ const cssProperty = shadowMode === "text" ? "text-shadow" : "box-shadow";
+ const cssOutputValue = shadowMode === "text" ? textShadowValue : cssValue;
+
const copyToClipboard = (text: string, isTailwind = true) => {
navigator.clipboard.writeText(text);
@@ -114,6 +127,7 @@ export default function ShadowPreview({
onClick={() => {
setIsRemoveShadow(!isRemoveShadow);
}}
+ disabled={shadowMode === "text"}
>
+
+ ) : (
+
+ )}
+ Text Shadow +
+Tailwind Class
+Tailwind CSS v4 Class
- {tailwindClass}
+ {twValue}
- {preset.tailwindV4}
-
))}
+
-
- setTextShadowValue(e.target.value)}
- placeholder="0px 2px 10px rgba(0,0,0,0.25)"
- />
-
- )}
+
{shadowMode === "text" ? (
-
) : (
)} - {shadowMode === "text" && ( -Tailwind CSS v4 Class
@@ -336,7 +358,7 @@ export default function ShadowPreview({
diff --git a/config/shadow-data.ts b/config/shadow-data.ts
index 5f31f96..e020d71 100644
--- a/config/shadow-data.ts
+++ b/config/shadow-data.ts
@@ -1542,6 +1542,16 @@ export const preBuiltTextShadows = [
name: "Soft Lift",
textShadow: "0px 2px 8px rgba(15, 23, 42, 0.25)",
tailwindV4: "[text-shadow:0px_2px_8px_rgba(15,23,42,0.25)]",
+ layers: [
+ {
+ offsetX: 0,
+ offsetY: 2,
+ blur: 8,
+ spread: 0,
+ color: "#0F172A",
+ opacity: 25,
+ },
+ ],
},
{
id: "text-2",
@@ -1550,6 +1560,24 @@ export const preBuiltTextShadows = [
"0px 0px 6px rgba(34,211,238,0.9), 0px 0px 18px rgba(14,165,233,0.65)",
tailwindV4:
"[text-shadow:0px_0px_6px_rgba(34,211,238,0.9),0px_0px_18px_rgba(14,165,233,0.65)]",
+ layers: [
+ {
+ offsetX: 0,
+ offsetY: 0,
+ blur: 6,
+ spread: 0,
+ color: "#22D3EE",
+ opacity: 90,
+ },
+ {
+ offsetX: 0,
+ offsetY: 0,
+ blur: 18,
+ spread: 0,
+ color: "#0EA5E9",
+ opacity: 65,
+ },
+ ],
},
{
id: "text-3",
@@ -1558,6 +1586,40 @@ export const preBuiltTextShadows = [
"1px 1px 0px rgba(0,0,0,0.8), -1px -1px 0px rgba(0,0,0,0.8), 1px -1px 0px rgba(0,0,0,0.8), -1px 1px 0px rgba(0,0,0,0.8)",
tailwindV4:
"[text-shadow:1px_1px_0px_rgba(0,0,0,0.8),-1px_-1px_0px_rgba(0,0,0,0.8),1px_-1px_0px_rgba(0,0,0,0.8),-1px_1px_0px_rgba(0,0,0,0.8)]",
+ layers: [
+ {
+ offsetX: 1,
+ offsetY: 1,
+ blur: 0,
+ spread: 0,
+ color: "#000000",
+ opacity: 80,
+ },
+ {
+ offsetX: -1,
+ offsetY: -1,
+ blur: 0,
+ spread: 0,
+ color: "#000000",
+ opacity: 80,
+ },
+ {
+ offsetX: 1,
+ offsetY: -1,
+ blur: 0,
+ spread: 0,
+ color: "#000000",
+ opacity: 80,
+ },
+ {
+ offsetX: -1,
+ offsetY: 1,
+ blur: 0,
+ spread: 0,
+ color: "#000000",
+ opacity: 80,
+ },
+ ],
},
{
id: "text-4",
@@ -1566,6 +1628,48 @@ export const preBuiltTextShadows = [
"1px 1px 0 rgba(0,0,0,0.15), 2px 2px 0 rgba(0,0,0,0.14), 3px 3px 0 rgba(0,0,0,0.13), 4px 4px 0 rgba(0,0,0,0.12), 5px 5px 0 rgba(0,0,0,0.11)",
tailwindV4:
"[text-shadow:1px_1px_0_rgba(0,0,0,0.15),2px_2px_0_rgba(0,0,0,0.14),3px_3px_0_rgba(0,0,0,0.13),4px_4px_0_rgba(0,0,0,0.12),5px_5px_0_rgba(0,0,0,0.11)]",
+ layers: [
+ {
+ offsetX: 1,
+ offsetY: 1,
+ blur: 0,
+ spread: 0,
+ color: "#000000",
+ opacity: 15,
+ },
+ {
+ offsetX: 2,
+ offsetY: 2,
+ blur: 0,
+ spread: 0,
+ color: "#000000",
+ opacity: 14,
+ },
+ {
+ offsetX: 3,
+ offsetY: 3,
+ blur: 0,
+ spread: 0,
+ color: "#000000",
+ opacity: 13,
+ },
+ {
+ offsetX: 4,
+ offsetY: 4,
+ blur: 0,
+ spread: 0,
+ color: "#000000",
+ opacity: 12,
+ },
+ {
+ offsetX: 5,
+ offsetY: 5,
+ blur: 0,
+ spread: 0,
+ color: "#000000",
+ opacity: 11,
+ },
+ ],
},
{
id: "text-5",
@@ -1573,6 +1677,24 @@ export const preBuiltTextShadows = [
textShadow: "1px 1px 0 rgba(255,255,255,0.6), -1px -1px 0 rgba(0,0,0,0.2)",
tailwindV4:
"[text-shadow:1px_1px_0_rgba(255,255,255,0.6),-1px_-1px_0_rgba(0,0,0,0.2)]",
+ layers: [
+ {
+ offsetX: 1,
+ offsetY: 1,
+ blur: 0,
+ spread: 0,
+ color: "#FFFFFF",
+ opacity: 60,
+ },
+ {
+ offsetX: -1,
+ offsetY: -1,
+ blur: 0,
+ spread: 0,
+ color: "#000000",
+ opacity: 20,
+ },
+ ],
},
{
id: "text-6",
@@ -1581,17 +1703,63 @@ export const preBuiltTextShadows = [
"0 0 4px rgba(255,255,255,0.85), 0 0 14px rgba(236,72,153,0.55), 0 0 28px rgba(236,72,153,0.35)",
tailwindV4:
"[text-shadow:0_0_4px_rgba(255,255,255,0.85),0_0_14px_rgba(236,72,153,0.55),0_0_28px_rgba(236,72,153,0.35)]",
+ layers: [
+ {
+ offsetX: 0,
+ offsetY: 0,
+ blur: 4,
+ spread: 0,
+ color: "#FFFFFF",
+ opacity: 85,
+ },
+ {
+ offsetX: 0,
+ offsetY: 0,
+ blur: 14,
+ spread: 0,
+ color: "#EC4899",
+ opacity: 55,
+ },
+ {
+ offsetX: 0,
+ offsetY: 0,
+ blur: 28,
+ spread: 0,
+ color: "#EC4899",
+ opacity: 35,
+ },
+ ],
},
{
id: "text-7",
name: "Crisp Offset",
textShadow: "2px 2px 0 rgba(17,24,39,0.35)",
tailwindV4: "[text-shadow:2px_2px_0_rgba(17,24,39,0.35)]",
+ layers: [
+ {
+ offsetX: 2,
+ offsetY: 2,
+ blur: 0,
+ spread: 0,
+ color: "#111827",
+ opacity: 35,
+ },
+ ],
},
{
id: "text-8",
name: "Soft Cloud",
textShadow: "0 8px 20px rgba(15,23,42,0.22)",
tailwindV4: "[text-shadow:0_8px_20px_rgba(15,23,42,0.22)]",
+ layers: [
+ {
+ offsetX: 0,
+ offsetY: 8,
+ blur: 20,
+ spread: 0,
+ color: "#0F172A",
+ opacity: 22,
+ },
+ ],
},
] as const;
diff --git a/types/shadow.ts b/types/shadow.ts
index 7a85e30..b68677b 100644
--- a/types/shadow.ts
+++ b/types/shadow.ts
@@ -29,6 +29,7 @@ export interface TextShadowPreset {
name: string;
textShadow: string;
tailwindV4: string;
+ layers: ShadowLayer[];
}
export interface ShadowStore {
From 3b0676d8b487ff285dba9f8f0e721e98333ad66d Mon Sep 17 00:00:00 2001
From: Naymur Rahman <66328660+naymurdev@users.noreply.github.com>
Date: Wed, 25 Feb 2026 08:20:05 +0600
Subject: [PATCH 18/24] fix: remove text-mode surface background controls in
shadows preview
---
components/view/shadow/shadow-preview.tsx | 51 +++++++++++------------
1 file changed, 25 insertions(+), 26 deletions(-)
diff --git a/components/view/shadow/shadow-preview.tsx b/components/view/shadow/shadow-preview.tsx
index 8271cd3..7bde201 100644
--- a/components/view/shadow/shadow-preview.tsx
+++ b/components/view/shadow/shadow-preview.tsx
@@ -239,27 +239,29 @@ export default function ShadowPreview({
className="sr-only"
/>
-
+ {shadowMode === "box" && (
+
+ )}
{shadowMode === "text"
- ? `Text Shadow
`
+ ? `Text Shadow
`
: `Your content here`}
+
From d92c50abe3836051da31fab05be488f611776fb4 Mon Sep 17 00:00:00 2001
From: Naymur Rahman <66328660+naymurdev@users.noreply.github.com>
Date: Wed, 25 Feb 2026 20:10:31 +0600
Subject: [PATCH 19/24] feat: migrate clip-paths to fullscreen playground
editor layout
---
app/(tools)/clip-paths/page.tsx | 16 +---
app/(tools)/layout.tsx | 4 +-
components/view/clip-path/index.tsx | 136 +++++-----------------------
3 files changed, 30 insertions(+), 126 deletions(-)
diff --git a/app/(tools)/clip-paths/page.tsx b/app/(tools)/clip-paths/page.tsx
index 79db408..99a8df1 100644
--- a/app/(tools)/clip-paths/page.tsx
+++ b/app/(tools)/clip-paths/page.tsx
@@ -2,7 +2,6 @@ import ClipPathGenerator from "@/components/view/clip-path";
import { siteConfig } from "@/lib/utils";
import type { Metadata } from "next";
import React from "react";
-import { ToolPlaygroundShell } from "@/components/common/tool-playground-shell";
export const metadata: Metadata = {
title: "SVG Clip-Path Generator",
description:
@@ -52,18 +51,7 @@ export const metadata: Metadata = {
};
function page() {
- return (
-
-
- );
+ return
{shadowMode === "text"
- ? `Text Shadow
`
+ ? `Text Shadow
`
: `Your content here`}
diff --git a/components/view/clip-path/index.tsx b/components/view/clip-path/index.tsx
index 195e302..075557c 100644
--- a/components/view/clip-path/index.tsx
+++ b/components/view/clip-path/index.tsx
@@ -6,14 +6,12 @@ import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import CopyToClipboard from "@/components/ui/copy-to-clipboard";
import { ScrollArea } from "@/components/ui/scroll-area";
-import { Switch } from "@/components/ui/switch";
import { Tabs, TabsContent, TabsList } from "@/components/ui/tabs";
import { useMediaQuery } from "@/components/ui/use-media-query";
import { cn } from "@/lib/utils";
import { parseSvgPath, pointsToSvgPath } from "@/lib/utils";
import { useClipPathStore } from "@/store/clipPath-storage";
import { TabsTrigger } from "@radix-ui/react-tabs";
-import { ChevronsDown } from "lucide-react";
import { useCallback, useEffect, useRef, useState } from "react";
import { CodeOutput } from "./code-output";
import { CustomShapeForm } from "./custom-shape-form";
@@ -31,7 +29,6 @@ const SAMPLE_IMAGES = [
];
export default function ClipPathGenerator() {
- const isTab = useMediaQuery("(max-width:1024px)");
const isMobile = useMediaQuery("(max-width:768px)");
const {
@@ -48,7 +45,6 @@ export default function ClipPathGenerator() {
editedShapes,
} = useClipPathStore();
- const [viewAll, setViewAll] = useState(false);
const [selectedImage, setSelectedImage] = useState(SAMPLE_IMAGES[0]);
const [uploadedImages, setUploadedImages] = useState([]);
const [editClipPathId, _setEditClipPathId] = useState("edit-clip-path");
@@ -232,84 +228,18 @@ export default function ClipPathGenerator() {
return (
<>
-
-
- SVG Clip-Paths for
-
-
-
-
- SVG Clip-Paths for
Developers & Designers
-
-
-
-
-
- Expand
-
-
- Click to Editor
-
- {!viewAll && (
-
- )}
-
- {(viewAll ? INITIAL_CLIP_PATHS : INITIAL_CLIP_PATHS.slice(0, 10)).map(
- (shape) => (
-
{isMobile && (
setSelectedShapeId(shape.id)}
- onKeyDown={(e) => {
- if (e.key === "Enter" || e.key === " ") {
- setSelectedShapeId(shape.id);
- }
- }}
- >
-
-
- ),
- )}
- Please use a desktop/laptop to view the Editor.
)} -
+
{/* Left column: Controls */}
{!isMobile && (
-
-
-
+
+
+
-
+
{editedShapes.length > 0 ? (
<>
@@ -405,7 +335,7 @@ export default function ClipPathGenerator() {
)}
- {/* Middle column: Preview */}
-
-
-
- (null);
@@ -431,13 +439,28 @@ export default function ClipPathGenerator() {
-
-
);
From b98fe91e7eddcc2bc6c4825943c893f408eef443 Mon Sep 17 00:00:00 2001
From: Naymur Rahman <66328660+naymurdev@users.noreply.github.com>
Date: Wed, 25 Feb 2026 22:21:30 +0600
Subject: [PATCH 20/24] feat: add right-side export drawer for clip-path
component and svg code
---
components/view/clip-path/index.tsx | 37 +++++++++++++++++++++++------
1 file changed, 30 insertions(+), 7 deletions(-)
diff --git a/components/view/clip-path/index.tsx b/components/view/clip-path/index.tsx
index 075557c..a9e08fe 100644
--- a/components/view/clip-path/index.tsx
+++ b/components/view/clip-path/index.tsx
@@ -6,6 +6,13 @@ import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import CopyToClipboard from "@/components/ui/copy-to-clipboard";
import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+ Sheet,
+ SheetContent,
+ SheetHeader,
+ SheetTitle,
+ SheetTrigger,
+} from "@/components/ui/sheet";
import { Tabs, TabsContent, TabsList } from "@/components/ui/tabs";
import { useMediaQuery } from "@/components/ui/use-media-query";
import { cn } from "@/lib/utils";
@@ -62,6 +69,7 @@ export default function ClipPathGenerator() {
>([]);
const [historyIndex, setHistoryIndex] = useState(-1);
const [draggedPointIndex, setDraggedPointIndex] = useState(-1);
+ const [exportOpen, setExportOpen] = useState(false);
const editorRef = useRef
+
+
+
- {isTab && (
+
+
-
-
- {/* Right column: Code output */}
- {!isTab && (
-
-
-
-
-
-
- )}
+
- (null);
@@ -242,173 +267,197 @@ export default function ClipPathGenerator() {
)}
-
+
+
+
+
+
+
+ Export
+
+
+
From 39884a75778f9fd576bd2439ca3ed0b75033eaa5 Mon Sep 17 00:00:00 2001
From: Naymur Rahman <66328660+naymurdev@users.noreply.github.com>
Date: Wed, 25 Feb 2026 22:39:41 +0600
Subject: [PATCH 21/24] feat: add svg/shadows-style sidebar rail to clip-path
editor
---
components/view/clip-path/index.tsx | 371 ++++++++++++++++------------
1 file changed, 210 insertions(+), 161 deletions(-)
diff --git a/components/view/clip-path/index.tsx b/components/view/clip-path/index.tsx
index a9e08fe..50e4c85 100644
--- a/components/view/clip-path/index.tsx
+++ b/components/view/clip-path/index.tsx
@@ -6,6 +6,13 @@ import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import CopyToClipboard from "@/components/ui/copy-to-clipboard";
import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
import {
Sheet,
SheetContent,
@@ -13,12 +20,22 @@ import {
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";
-import { Tabs, TabsContent, TabsList } from "@/components/ui/tabs";
import { useMediaQuery } from "@/components/ui/use-media-query";
import { cn } from "@/lib/utils";
import { parseSvgPath, pointsToSvgPath } from "@/lib/utils";
import { useClipPathStore } from "@/store/clipPath-storage";
-import { TabsTrigger } from "@radix-ui/react-tabs";
+import {
+ Bookmark,
+ Layers,
+ Moon,
+ PanelsTopLeft,
+ Settings2,
+ SidebarClose,
+ SidebarOpen,
+ Sun,
+} from "lucide-react";
+import { useTheme } from "next-themes";
+import { usePathname, useRouter } from "next/navigation";
import { useCallback, useEffect, useRef, useState } from "react";
import { CodeOutput } from "./code-output";
import { CustomShapeForm } from "./custom-shape-form";
@@ -36,6 +53,10 @@ const SAMPLE_IMAGES = [
];
export default function ClipPathGenerator() {
+ const { resolvedTheme, setTheme } = useTheme();
+ const pathname = usePathname();
+ const router = useRouter();
+ const isTab = useMediaQuery("(max-width:1024px)");
const isMobile = useMediaQuery("(max-width:768px)");
const {
@@ -70,6 +91,10 @@ export default function ClipPathGenerator() {
const [historyIndex, setHistoryIndex] = useState(-1);
const [draggedPointIndex, setDraggedPointIndex] = useState(-1);
const [exportOpen, setExportOpen] = useState(false);
+ const [activeSidebarTab, setActiveSidebarTab] = useState<
+ "presets" | "settings" | "edited" | "saved"
+ >("presets");
+ const [isSidebarExpanded, setIsSidebarExpanded] = useState(true);
const editorRef = useRefExport clip-path code
+
+
+
- {/* Left column: Controls */}
+ exitEditMode(true)}
- onCancel={() => exitEditMode(false)}
- />
- )}
-
- )}
-
-
-
-
-
+ {!isTab && isSidebarExpanded && (
+
-
Date: Wed, 25 Feb 2026 23:16:09 +0600
Subject: [PATCH 22/24] fix: prevent clip-path sidebar layout collapse in
fullscreen grid
---
components/view/clip-path/index.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/view/clip-path/index.tsx b/components/view/clip-path/index.tsx
index 50e4c85..bb43805 100644
--- a/components/view/clip-path/index.tsx
+++ b/components/view/clip-path/index.tsx
@@ -455,7 +455,7 @@ export default function ClipPathGenerator() {
)}
-
{!isMobile && (
-
-
-
-
-
- Shapes
-
-
- Edited
-
-
- Custom
-
-
-
-
-
-
-
- {!editMode && (
-
- )}
-
- {editMode && (
- exitEditMode(true)}
- onCancel={() => exitEditMode(false)}
- />
- )}
-
-
-
+
+ )}
- {/* Custom shapes list */}
- {customShapes.length > 0 && (
- <>
-
+ {[
+ { key: "presets", label: "Presets", icon: PanelsTopLeft },
+ { key: "settings", label: "Settings", icon: Settings2 },
+ { key: "edited", label: "Edited", icon: Layers },
+ { key: "saved", label: "Saved", icon: Bookmark },
+ ].map((item) => (
+
+ ))}
+
+
+
+
+
+
+ - Custom Shapes -
- -
+ {activeSidebarTab === "presets" && (
+
+
+ )}
+
+ {activeSidebarTab === "edited" && (
+
+ {editedShapes.length > 0 ? (
+
+ )}
+
+ {activeSidebarTab === "saved" && (
+
+ {customShapes.length > 0 ? (
+
+ )}
+
)}
+
+
+ {!editMode ? (
+
+ ) : (
+ exitEditMode(true)}
+ onCancel={() => exitEditMode(false)}
+ />
+ )}
+
+ )}
+
+ {activeSidebarTab === "settings" && (
+
+
+ addCustomShape(customPath, customName)
+ }
+ disabled={editMode}
+ />
+
+ + No Edited Shapes Found +
+ )} ++ No Custom/Saved Shapes Found +
+ )} +
+
From 3b152b6c85eee9cafb117d5c2360cf7a2378b379 Mon Sep 17 00:00:00 2001
From: Naymur Rahman <66328660+naymurdev@users.noreply.github.com>
Date: Wed, 25 Feb 2026 23:16:15 +0600
Subject: [PATCH 23/24] feat: add top-right export button in clip-path
playground
---
components/view/clip-path/index.tsx | 7 ++++++-
1 file changed, 6 insertions(+), 1 deletion(-)
diff --git a/components/view/clip-path/index.tsx b/components/view/clip-path/index.tsx
index bb43805..b11b949 100644
--- a/components/view/clip-path/index.tsx
+++ b/components/view/clip-path/index.tsx
@@ -269,12 +269,17 @@ export default function ClipPathGenerator() {
+
+
+
{!isMobile && (
From 35fff547f0ee9c4f5c61348ca0e2771541e31892 Mon Sep 17 00:00:00 2001
From: naymurdev
Date: Tue, 31 Mar 2026 17:06:29 +0600
Subject: [PATCH 24/24] chore: update shapes and animate-svg
---
components/view/clip-path/index.tsx | 942 +++++-----
components/view/clip-path/shape-preview.tsx | 515 +++---
components/view/shadow/index.tsx | 787 +++++----
components/view/svg-line-draw/animate-svg.tsx | 627 +++----
.../view/svg-line-draw/example-paths.tsx | 215 ++-
components/view/svg-line-draw/index.tsx | 1514 +++++++++--------
6 files changed, 2274 insertions(+), 2326 deletions(-)
diff --git a/components/view/clip-path/index.tsx b/components/view/clip-path/index.tsx
index b11b949..4fa2da7 100644
--- a/components/view/clip-path/index.tsx
+++ b/components/view/clip-path/index.tsx
@@ -7,32 +7,32 @@ import { Card, CardContent } from "@/components/ui/card";
import CopyToClipboard from "@/components/ui/copy-to-clipboard";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
} from "@/components/ui/select";
import {
- Sheet,
- SheetContent,
- SheetHeader,
- SheetTitle,
- SheetTrigger,
+ Sheet,
+ SheetContent,
+ SheetHeader,
+ SheetTitle,
+ SheetTrigger,
} from "@/components/ui/sheet";
import { useMediaQuery } from "@/components/ui/use-media-query";
import { cn } from "@/lib/utils";
import { parseSvgPath, pointsToSvgPath } from "@/lib/utils";
import { useClipPathStore } from "@/store/clipPath-storage";
import {
- Bookmark,
- Layers,
- Moon,
- PanelsTopLeft,
- Settings2,
- SidebarClose,
- SidebarOpen,
- Sun,
+ Bookmark,
+ Layers,
+ Moon,
+ PanelsTopLeft,
+ Settings2,
+ SidebarClose,
+ SidebarOpen,
+ Sun,
} from "lucide-react";
import { useTheme } from "next-themes";
import { usePathname, useRouter } from "next/navigation";
@@ -44,482 +44,444 @@ import { EditControls } from "./edit-controls";
import { ImageSelector } from "./image-selector";
import { ShapeGrid } from "./shape-grid";
import { ShapePreview } from "./shape-preview";
+import ThemeSwitch from "@/components/theme-switcher";
// Sample images for preview
const SAMPLE_IMAGES = [
- "https://images.unsplash.com/photo-1635776062127-d379bfcba9f8?q=80&w=1932&auto=format&fit=crop",
- "https://images.unsplash.com/photo-1624115773145-9b77fe912897?q=80&w=2070&auto=format&fit=crop",
- "https://images.unsplash.com/photo-1600619030925-569b3b964418?q=80&w=2127&auto=format&fit=crop",
+ "https://images.unsplash.com/photo-1635776062127-d379bfcba9f8?q=80&w=1932&auto=format&fit=crop",
+ "https://images.unsplash.com/photo-1624115773145-9b77fe912897?q=80&w=2070&auto=format&fit=crop",
+ "https://images.unsplash.com/photo-1600619030925-569b3b964418?q=80&w=2127&auto=format&fit=crop",
];
export default function ClipPathGenerator() {
- const { resolvedTheme, setTheme } = useTheme();
- const pathname = usePathname();
- const router = useRouter();
- const isTab = useMediaQuery("(max-width:1024px)");
- const isMobile = useMediaQuery("(max-width:768px)");
-
- const {
- selectedShapeId,
- setSelectedShapeId,
- customPath,
- customName,
- addCustomShape,
- addEditedShape,
- deleteShape,
- setCustomPath,
- setCustomName,
- customShapes,
- editedShapes,
- } = useClipPathStore();
-
- const [selectedImage, setSelectedImage] = useState(SAMPLE_IMAGES[0]);
- const [uploadedImages, setUploadedImages] = useState([]);
- const [editClipPathId, _setEditClipPathId] = useState("edit-clip-path");
- const [editMode, setEditMode] = useState(false);
- const [controlPoints, setControlPoints] = useState<
- { x: number; y: number; command: string; isControl: boolean }[]
- >([]);
- const [_selectedPoint, setSelectedPoint] = useState(null);
- const [zoomLevel, setZoomLevel] = useState(0.8);
- const [previewOffset, setPreviewOffset] = useState({ x: 0, y: 0 });
- const [currentEditPath, setCurrentEditPath] = useState("");
- const [editingShapeKey, setEditingShapeKey] = useState(null);
- const [controlPointsHistory, setControlPointsHistory] = useState<
- { x: number; y: number; command: string; isControl: boolean }[][]
- >([]);
- const [historyIndex, setHistoryIndex] = useState(-1);
- const [draggedPointIndex, setDraggedPointIndex] = useState(-1);
- const [exportOpen, setExportOpen] = useState(false);
- const [activeSidebarTab, setActiveSidebarTab] = useState<
- "presets" | "settings" | "edited" | "saved"
- >("presets");
- const [isSidebarExpanded, setIsSidebarExpanded] = useState(true);
-
- const editorRef = useRef(null);
-
- const allShapes = [...INITIAL_CLIP_PATHS, ...editedShapes, ...customShapes];
- const selectedShape =
- allShapes.find((shape) => shape.id === selectedShapeId) ||
- INITIAL_CLIP_PATHS[0];
-
- useEffect(() => {
- if (INITIAL_CLIP_PATHS.length > 0 && !selectedShapeId) {
- setSelectedShapeId(INITIAL_CLIP_PATHS[0].id);
- }
- }, [selectedShapeId, setSelectedShapeId]);
-
- useEffect(() => {
- if (controlPoints.length > 0) {
- const path = pointsToSvgPath(controlPoints);
- setCurrentEditPath(path);
- }
- }, [controlPoints]);
-
- const handleImageUpload = (e: React.ChangeEvent) => {
- const files = e.target.files;
- if (files) {
- const newUploadedImages: string[] = []; // Ensure this is initialized outside the loop
-
- for (const file of Array.from(files)) {
- const reader = new FileReader();
- reader.onload = (event) => {
- const uploadedImage = event.target?.result as string;
- newUploadedImages.push(uploadedImage);
-
- setUploadedImages((prev) => [...prev, uploadedImage]);
- setSelectedImage(uploadedImage);
- };
- reader.readAsDataURL(file);
- }
- }
- };
-
- const enterEditMode = (shapeId?: string) => {
- const id = shapeId || selectedShapeId;
- if (!id) return;
-
- setEditingShapeKey(id);
-
- const shape = allShapes.find((s) => s.id === id);
- if (!shape) return;
-
- const pathData = shape.path;
-
- const points = parseSvgPath(pathData);
-
- setSelectedShapeId(id);
- setControlPoints(points);
- setCurrentEditPath(pathData);
- setEditMode(true);
-
- setControlPointsHistory([points]);
- setHistoryIndex(0);
- };
-
- const exitEditMode = (save = true) => {
- if (save && controlPoints.length > 0 && editingShapeKey) {
- const newPath = pointsToSvgPath(controlPoints);
- const shape = allShapes.find((s) => s.id === editingShapeKey);
- const className = shape?.className || "";
- addEditedShape(editingShapeKey, newPath, className);
- }
-
- setEditMode(false);
- setSelectedPoint(null);
- setEditingShapeKey(null);
- };
-
- const startDrag = (index: number) => {
- setDraggedPointIndex(index);
- };
-
- const handleMouseMove = (e: React.MouseEvent) => {
- if (draggedPointIndex === -1 || !editorRef.current) return;
-
- const svg = editorRef.current;
- const ctm = svg.getScreenCTM();
- if (!ctm) return;
-
- const newX = (e.clientX - ctm.e) / ctm.a;
- const newY = (e.clientY - ctm.f) / ctm.d;
-
- if (Number.isNaN(newX) || Number.isNaN(newY)) return;
-
- setControlPoints((prev) => {
- const newPoints = [...prev];
- if (newPoints[draggedPointIndex]) {
- newPoints[draggedPointIndex] = {
- ...newPoints[draggedPointIndex],
- x: newX,
- y: newY,
- };
- }
- return newPoints;
- });
- };
-
- const endDrag = () => {
- if (draggedPointIndex !== -1) {
- setControlPointsHistory((prev) => {
- const newHistory = prev.slice(0, historyIndex + 1);
- return [...newHistory, [...controlPoints]];
- });
- setHistoryIndex((prev) => prev + 1);
- }
- setDraggedPointIndex(-1);
- };
-
- const handleUndo = useCallback(() => {
- if (historyIndex > 0) {
- const newIndex = historyIndex - 1;
- setHistoryIndex(newIndex);
- setControlPoints(controlPointsHistory[newIndex]);
- }
- }, [historyIndex, controlPointsHistory]);
-
- useEffect(() => {
- const handleKeyDown = (e: KeyboardEvent) => {
- if (e.key === "+" || e.key === "=") {
- setZoomLevel((prev) => Math.min(5, prev + 0.25));
- } else if (e.key === "-" || e.key === "_") {
- setZoomLevel((prev) => Math.max(0.25, prev - 0.25));
- } else if (e.key === "0") {
- setZoomLevel(0.8);
- setPreviewOffset({ x: 0, y: 0 });
- } else if (e.key === "z" && (e.ctrlKey || e.metaKey) && editMode) {
- e.preventDefault();
- handleUndo(); // safely call the memoized function
- }
- };
-
- // Handle mouse wheel for zoom
- const handleWheel = (e: WheelEvent) => {
- if (e.ctrlKey || e.metaKey) {
- e.preventDefault();
-
- const delta = e.deltaY > 0 ? -0.1 : 0.1;
- setZoomLevel((prev) => Math.max(0.25, Math.min(5, prev + delta)));
- }
- };
-
- window.addEventListener("keydown", handleKeyDown);
- document.addEventListener("wheel", handleWheel, { passive: false });
-
- return () => {
- window.removeEventListener("keydown", handleKeyDown);
- document.removeEventListener("wheel", handleWheel);
- };
- }, [editMode, handleUndo]);
- if (allShapes.length === 0 || !selectedShape) {
- return (
- ([]);
+ const [editClipPathId, _setEditClipPathId] = useState("edit-clip-path");
+ const [editMode, setEditMode] = useState(false);
+ const [controlPoints, setControlPoints] = useState<
+ { x: number; y: number; command: string; isControl: boolean }[]
+ >([]);
+ const [_selectedPoint, setSelectedPoint] = useState(null);
+ const [zoomLevel, setZoomLevel] = useState(0.8);
+ const [previewOffset, setPreviewOffset] = useState({ x: 0, y: 0 });
+ const [currentEditPath, setCurrentEditPath] = useState("");
+ const [editingShapeKey, setEditingShapeKey] = useState(null);
+ const [controlPointsHistory, setControlPointsHistory] = useState<
+ { x: number; y: number; command: string; isControl: boolean }[][]
+ >([]);
+ const [historyIndex, setHistoryIndex] = useState(-1);
+ const [draggedPointIndex, setDraggedPointIndex] = useState(-1);
+ const [activeSidebarTab, setActiveSidebarTab] = useState<
+ "presets" | "settings" | "edited" | "saved"
+ >("presets");
+ const [isSidebarExpanded, setIsSidebarExpanded] = useState(true);
+
+ const editorRef = useRef(null);
+
+ const allShapes = [...INITIAL_CLIP_PATHS, ...editedShapes, ...customShapes];
+ const selectedShape =
+ allShapes.find((shape) => shape.id === selectedShapeId) ||
+ INITIAL_CLIP_PATHS[0];
+
+ useEffect(() => {
+ if (INITIAL_CLIP_PATHS.length > 0 && !selectedShapeId) {
+ setSelectedShapeId(INITIAL_CLIP_PATHS[0].id);
+ }
+ }, [selectedShapeId, setSelectedShapeId]);
+
+ useEffect(() => {
+ if (controlPoints.length > 0) {
+ const path = pointsToSvgPath(controlPoints);
+ setCurrentEditPath(path);
+ }
+ }, [controlPoints]);
+
+ const handleImageUpload = (e: React.ChangeEvent) => {
+ const files = e.target.files;
+ if (files) {
+ const newUploadedImages: string[] = []; // Ensure this is initialized outside the loop
+
+ for (const file of Array.from(files)) {
+ const reader = new FileReader();
+ reader.onload = (event) => {
+ const uploadedImage = event.target?.result as string;
+ newUploadedImages.push(uploadedImage);
+
+ setUploadedImages((prev) => [...prev, uploadedImage]);
+ setSelectedImage(uploadedImage);
+ };
+ reader.readAsDataURL(file);
+ }
+ }
+ };
+
+ const enterEditMode = (shapeId?: string) => {
+ const id = shapeId || selectedShapeId;
+ if (!id) return;
+
+ setEditingShapeKey(id);
+
+ const shape = allShapes.find((s) => s.id === id);
+ if (!shape) return;
+
+ const pathData = shape.path;
+
+ const points = parseSvgPath(pathData);
+
+ setSelectedShapeId(id);
+ setControlPoints(points);
+ setCurrentEditPath(pathData);
+ setEditMode(true);
+
+ setControlPointsHistory([points]);
+ setHistoryIndex(0);
+ };
+
+ const exitEditMode = (save = true) => {
+ if (save && controlPoints.length > 0 && editingShapeKey) {
+ const newPath = pointsToSvgPath(controlPoints);
+ const shape = allShapes.find((s) => s.id === editingShapeKey);
+ const className = shape?.className || "";
+ addEditedShape(editingShapeKey, newPath, className);
+ }
+
+ setEditMode(false);
+ setSelectedPoint(null);
+ setEditingShapeKey(null);
+ };
+
+ const startDrag = (index: number) => {
+ setDraggedPointIndex(index);
+ };
+
+ const handleMouseMove = (e: React.MouseEvent) => {
+ if (draggedPointIndex === -1 || !editorRef.current) return;
+
+ const svg = editorRef.current;
+ const ctm = svg.getScreenCTM();
+ if (!ctm) return;
+
+ const newX = (e.clientX - ctm.e) / ctm.a;
+ const newY = (e.clientY - ctm.f) / ctm.d;
+
+ if (Number.isNaN(newX) || Number.isNaN(newY)) return;
+
+ setControlPoints((prev) => {
+ const newPoints = [...prev];
+ if (newPoints[draggedPointIndex]) {
+ newPoints[draggedPointIndex] = {
+ ...newPoints[draggedPointIndex],
+ x: newX,
+ y: newY,
+ };
+ }
+ return newPoints;
+ });
+ };
+
+ const endDrag = () => {
+ if (draggedPointIndex !== -1) {
+ setControlPointsHistory((prev) => {
+ const newHistory = prev.slice(0, historyIndex + 1);
+ return [...newHistory, [...controlPoints]];
+ });
+ setHistoryIndex((prev) => prev + 1);
+ }
+ setDraggedPointIndex(-1);
+ };
+
+ const handleUndo = useCallback(() => {
+ if (historyIndex > 0) {
+ const newIndex = historyIndex - 1;
+ setHistoryIndex(newIndex);
+ setControlPoints(controlPointsHistory[newIndex]);
+ }
+ }, [historyIndex, controlPointsHistory]);
+
+ useEffect(() => {
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === "+" || e.key === "=") {
+ setZoomLevel((prev) => Math.min(5, prev + 0.25));
+ } else if (e.key === "-" || e.key === "_") {
+ setZoomLevel((prev) => Math.max(0.25, prev - 0.25));
+ } else if (e.key === "0") {
+ setZoomLevel(0.8);
+ setPreviewOffset({ x: 0, y: 0 });
+ } else if (e.key === "z" && (e.ctrlKey || e.metaKey) && editMode) {
+ e.preventDefault();
+ handleUndo(); // safely call the memoized function
+ }
+ };
+
+ // Handle mouse wheel for zoom
+ const handleWheel = (e: WheelEvent) => {
+ if (e.ctrlKey || e.metaKey) {
+ e.preventDefault();
+
+ const delta = e.deltaY > 0 ? -0.1 : 0.1;
+ setZoomLevel((prev) => Math.max(0.25, Math.min(5, prev + delta)));
+ }
+ };
+
+ window.addEventListener("keydown", handleKeyDown);
+ document.addEventListener("wheel", handleWheel, { passive: false });
+
+ return () => {
+ window.removeEventListener("keydown", handleKeyDown);
+ document.removeEventListener("wheel", handleWheel);
+ };
+ }, [editMode, handleUndo]);
+ if (allShapes.length === 0 || !selectedShape) {
+ return (
+ ) => void;
- onMouseUp?: () => void;
- onMouseLeave?: () => void;
- startDrag?: (index: number) => void;
- editorRef?: React.RefObject;
+ selectedShape: ClipPathShape;
+ selectedImage: string;
+ editMode: boolean;
+ editClipPathId: string;
+ currentEditPath: string;
+ controlPoints: Array<{
+ x: number;
+ y: number;
+ command: string;
+ isControl: boolean;
+ }>;
+ zoomLevel: number;
+ className?: string;
+ setZoomLevel: (value: number) => void;
+ previewOffset: { x: number; y: number };
+ setPreviewOffset: (offset: { x: number; y: number }) => void;
+ onMouseMove?: (e: React.MouseEvent) => void;
+ onMouseUp?: () => void;
+ onMouseLeave?: () => void;
+ startDrag?: (index: number) => void;
+ editorRef?: React.RefObject;
}
export function ShapePreview({
- selectedShape,
- selectedImage,
- editMode,
- editClipPathId,
- currentEditPath,
- controlPoints,
- zoomLevel,
- setZoomLevel,
- previewOffset,
- setPreviewOffset,
- onMouseMove,
- onMouseUp,
- onMouseLeave,
- startDrag,
- editorRef,
+ selectedShape,
+ selectedImage,
+ editMode,
+ className,
+ editClipPathId,
+ currentEditPath,
+ controlPoints,
+ zoomLevel,
+ setZoomLevel,
+ previewOffset,
+ setPreviewOffset,
+ onMouseMove,
+ onMouseUp,
+ onMouseLeave,
+ startDrag,
+ editorRef,
}: ShapePreviewProps) {
- const [isDraggingPreview, setIsDraggingPreview] = useState(false);
- const [startDragPos, setStartDragPos] = useState({ x: 0, y: 0 });
+ const [isDraggingPreview, setIsDraggingPreview] = useState(false);
+ const [startDragPos, setStartDragPos] = useState({ x: 0, y: 0 });
- const svgRef = useRef(null);
- const previewRef = useRef(null);
+ const svgRef = useRef(null);
+ const previewRef = useRef(null);
- const resetZoom = () => {
- setZoomLevel(0.8);
- setPreviewOffset({ x: 0, y: 0 });
- };
+ const resetZoom = () => {
+ setZoomLevel(0.8);
+ setPreviewOffset({ x: 0, y: 0 });
+ };
- const getViewBox = () => {
- const size = 1 / zoomLevel;
- const offset = (1 - size) / 2;
- return `${offset} ${offset} ${size} ${size}`;
- };
+ const getViewBox = () => {
+ const size = 1 / zoomLevel;
+ const offset = (1 - size) / 2;
+ return `${offset} ${offset} ${size} ${size}`;
+ };
- const startPreviewDrag = (e: React.MouseEvent) => {
- if (zoomLevel <= 1) return;
- setIsDraggingPreview(true);
- setStartDragPos({ x: e.clientX, y: e.clientY });
- };
+ const startPreviewDrag = (e: React.MouseEvent) => {
+ if (zoomLevel <= 1) return;
+ setIsDraggingPreview(true);
+ setStartDragPos({ x: e.clientX, y: e.clientY });
+ };
- const handlePreviewMouseMove = (e: React.MouseEvent) => {
- if (!isDraggingPreview || zoomLevel <= 1 || !previewRef.current) return;
+ const handlePreviewMouseMove = (e: React.MouseEvent) => {
+ if (!isDraggingPreview || zoomLevel <= 1 || !previewRef.current) return;
- const deltaX =
- (((e.clientX - startDragPos.x) / previewRef.current.clientWidth) * 100) /
- zoomLevel;
- const deltaY =
- (((e.clientY - startDragPos.y) / previewRef.current.clientHeight) * 100) /
- zoomLevel;
- // @ts-ignore
- setPreviewOffset((prev) => ({
- x: Math.min(50, Math.max(-50, prev.x - deltaX)),
- y: Math.min(50, Math.max(-50, prev.y - deltaY)),
- }));
+ const deltaX =
+ (((e.clientX - startDragPos.x) / previewRef.current.clientWidth) * 100) /
+ zoomLevel;
+ const deltaY =
+ (((e.clientY - startDragPos.y) / previewRef.current.clientHeight) * 100) /
+ zoomLevel;
+ // @ts-ignore
+ setPreviewOffset((prev) => ({
+ x: Math.min(50, Math.max(-50, prev.x - deltaX)),
+ y: Math.min(50, Math.max(-50, prev.y - deltaY)),
+ }));
- setStartDragPos({ x: e.clientX, y: e.clientY });
- };
+ setStartDragPos({ x: e.clientX, y: e.clientY });
+ };
- // End dragging the preview
- const endPreviewDrag = () => {
- setIsDraggingPreview(false);
- };
+ // End dragging the preview
+ const endPreviewDrag = () => {
+ setIsDraggingPreview(false);
+ };
- // Make sure we have a valid path
- const shapePath = selectedShape?.path || "";
- const editPath = currentEditPath || shapePath;
+ // Make sure we have a valid path
+ const shapePath = selectedShape?.path || "";
+ const editPath = currentEditPath || shapePath;
- return (
- (null);
- const [shadowMode, setShadowMode] = useState<"box" | "text">("box");
+ const { theme } = useTheme();
+ const isTab = useMediaQuery("(max-width:1024px)");
+ const isMobile = useMediaQuery("(max-width:768px)");
+ const [shadowName, setShadowName] = useState("");
+ const [isEdited, setIsEdited] = useState(false);
+ const [currentPresetId, setCurrentPresetId] = useState(null);
+ const [shadowMode, setShadowMode] = useState<"box" | "text">("box");
- const {
- savedShadows,
- favorites,
- addShadow,
- updateShadow,
- deleteShadow,
- toggleFavorite,
- isFavorite,
- } = useShadowStore();
+ const {
+ savedShadows,
+ favorites,
+ addShadow,
+ updateShadow,
+ deleteShadow,
+ toggleFavorite,
+ isFavorite,
+ } = useShadowStore();
- const [isDarkMode, setIsDarkMode] = useState(false);
- const [isRemoveShadow, setIsRemoveShadow] = useState(false);
- const [layers, setLayers] = useState([
- {
- offsetX: 0,
- offsetY: 0,
- blur: 0,
- spread: 1,
- color: "#000000",
- opacity: 4,
- isVisible: true,
- },
- {
- offsetX: 0,
- offsetY: 1,
- blur: 0,
- spread: 0,
- color: "#000000",
- opacity: 5,
- isVisible: true,
- },
- {
- offsetX: 0,
- offsetY: 2,
- blur: 2,
- spread: 0,
- color: "#000000",
- opacity: 5,
- isVisible: true,
- },
- {
- offsetX: 0,
- offsetY: 2,
- blur: 4,
- spread: 0,
- color: "#000000",
- opacity: 5,
- isVisible: true,
- },
- ]);
- const [activeShadow, setActiveShadow] = useState(
- preBuiltShadows[0],
- );
- const [activeLayerIndex, setActiveLayerIndex] = useState(0);
- const [tailwindClass, setTailwindClass] = useState("");
- const [cssValue, setCssValue] = useState("");
- const [_uniqueColors, setUniqueColors] = useState<
- { color: string; count: number }[]
- >([]);
+ const [isDarkMode, setIsDarkMode] = useState(false);
+ const [isRemoveShadow, setIsRemoveShadow] = useState(false);
+ const [layers, setLayers] = useState([
+ {
+ offsetX: 0,
+ offsetY: 0,
+ blur: 0,
+ spread: 1,
+ color: "#000000",
+ opacity: 4,
+ isVisible: true,
+ },
+ {
+ offsetX: 0,
+ offsetY: 1,
+ blur: 0,
+ spread: 0,
+ color: "#000000",
+ opacity: 5,
+ isVisible: true,
+ },
+ {
+ offsetX: 0,
+ offsetY: 2,
+ blur: 2,
+ spread: 0,
+ color: "#000000",
+ opacity: 5,
+ isVisible: true,
+ },
+ {
+ offsetX: 0,
+ offsetY: 2,
+ blur: 4,
+ spread: 0,
+ color: "#000000",
+ opacity: 5,
+ isVisible: true,
+ },
+ ]);
+ const [activeShadow, setActiveShadow] = useState(
+ preBuiltShadows[0],
+ );
+ const [activeLayerIndex, setActiveLayerIndex] = useState(0);
+ const [tailwindClass, setTailwindClass] = useState("");
+ const [cssValue, setCssValue] = useState("");
+ const [_uniqueColors, setUniqueColors] = useState<
+ { color: string; count: number }[]
+ >([]);
- const [globalPositionMode, setGlobalPositionMode] = useState(false);
- const [globalShadowTypeMode, setGlobalShadowTypeMode] = useState(false);
- const [globalBlurMode, setGlobalBlurMode] = useState(false);
- const [globalSpreadMode, setGlobalSpreadMode] = useState(false);
- const [globalOpacityMode, setGlobalOpacityMode] = useState(false);
- const [globalMasterMode, setGlobalMasterMode] = useState(false);
- const [activeSidebarTab, setActiveSidebarTab] = useState<
- "presets" | "settings" | "edited" | "saved"
- >("settings");
- const [isSidebarExpanded, setIsSidebarExpanded] = useState(true);
- const [previewBackground, setPreviewBackground] = useState("#ECF0F3");
- const [previewSurfaceColor, setPreviewSurfaceColor] = useState("#FFFFFF");
- const pathname = usePathname();
- const router = useRouter();
+ const [globalPositionMode, setGlobalPositionMode] = useState(false);
+ const [globalShadowTypeMode, setGlobalShadowTypeMode] = useState(false);
+ const [globalBlurMode, setGlobalBlurMode] = useState(false);
+ const [globalSpreadMode, setGlobalSpreadMode] = useState(false);
+ const [globalOpacityMode, setGlobalOpacityMode] = useState(false);
+ const [globalMasterMode, setGlobalMasterMode] = useState(false);
+ const [activeSidebarTab, setActiveSidebarTab] = useState<
+ "presets" | "settings" | "edited" | "saved"
+ >("settings");
+ const [isSidebarExpanded, setIsSidebarExpanded] = useState(true);
+ const [previewBackground, setPreviewBackground] = useState("#ECF0F3");
+ const [previewSurfaceColor, setPreviewSurfaceColor] = useState("#FFFFFF");
+ const pathname = usePathname();
+ const router = useRouter();
- const toggleGlobalMasterMode = (enabled: boolean) => {
- setGlobalMasterMode(enabled);
- setGlobalPositionMode(enabled);
- setGlobalBlurMode(enabled);
- setGlobalSpreadMode(enabled);
- setGlobalOpacityMode(enabled);
- setGlobalShadowTypeMode(enabled);
- };
+ const toggleGlobalMasterMode = (enabled: boolean) => {
+ setGlobalMasterMode(enabled);
+ setGlobalPositionMode(enabled);
+ setGlobalBlurMode(enabled);
+ setGlobalSpreadMode(enabled);
+ setGlobalOpacityMode(enabled);
+ setGlobalShadowTypeMode(enabled);
+ };
- useEffect(() => {
- if (activeShadow) {
- setIsEdited(checkIfEdited(layers, activeShadow));
- }
- const shadowString = layers
- .filter((layer) => layer.isVisible !== false)
- .map((layer) => {
- const { offsetX, offsetY, blur, spread, color, opacity, isInner } =
- layer;
- const rgba = `rgba(${Number.parseInt(
- color.slice(1, 3),
- 16,
- )}, ${Number.parseInt(color.slice(3, 5), 16)}, ${Number.parseInt(
- color.slice(5, 7),
- 16,
- )}, ${opacity / 100})`;
- return `${
- isInner ? "inset " : ""
- }${offsetX}px ${offsetY}px ${blur}px ${spread}px ${rgba}`;
- })
- .join(", ");
+ useEffect(() => {
+ if (activeShadow) {
+ setIsEdited(checkIfEdited(layers, activeShadow));
+ }
+ const shadowString = layers
+ .filter((layer) => layer.isVisible !== false)
+ .map((layer) => {
+ const { offsetX, offsetY, blur, spread, color, opacity, isInner } =
+ layer;
+ const rgba = `rgba(${Number.parseInt(
+ color.slice(1, 3),
+ 16,
+ )}, ${Number.parseInt(color.slice(3, 5), 16)}, ${Number.parseInt(
+ color.slice(5, 7),
+ 16,
+ )}, ${opacity / 100})`;
+ return `${
+ isInner ? "inset " : ""
+ }${offsetX}px ${offsetY}px ${blur}px ${spread}px ${rgba}`;
+ })
+ .join(", ");
- setCssValue(shadowString);
+ setCssValue(shadowString);
- const tailwindShadow = `shadow-[${layers
- .filter((layer) => layer.isVisible !== false)
- .map((layer) => {
- const { offsetX, offsetY, blur, spread, color, opacity, isInner } =
- layer;
- const rgba =
- opacity === 100
- ? color
- : `rgba(${Number.parseInt(color.slice(1, 3), 16)},${Number.parseInt(
- color.slice(3, 5),
- 16,
- )},${Number.parseInt(color.slice(5, 7), 16)},${opacity / 100})`;
- return `${
- isInner ? "inset_" : ""
- }${offsetX}px_${offsetY}px_${blur}px_${spread}px_${rgba}`;
- })
- .join(",")}]`;
+ const tailwindShadow = `shadow-[${layers
+ .filter((layer) => layer.isVisible !== false)
+ .map((layer) => {
+ const { offsetX, offsetY, blur, spread, color, opacity, isInner } =
+ layer;
+ const rgba =
+ opacity === 100
+ ? color
+ : `rgba(${Number.parseInt(color.slice(1, 3), 16)},${Number.parseInt(
+ color.slice(3, 5),
+ 16,
+ )},${Number.parseInt(color.slice(5, 7), 16)},${opacity / 100})`;
+ return `${
+ isInner ? "inset_" : ""
+ }${offsetX}px_${offsetY}px_${blur}px_${spread}px_${rgba}`;
+ })
+ .join(",")}]`;
- setTailwindClass(tailwindShadow);
+ setTailwindClass(tailwindShadow);
- const colorMap = new Map();
+ const colorMap = new Map();
- for (const layer of layers) {
- const color = layer.color.toUpperCase();
- colorMap.set(color, (colorMap.get(color) || 0) + 1);
- }
+ for (const layer of layers) {
+ const color = layer.color.toUpperCase();
+ colorMap.set(color, (colorMap.get(color) || 0) + 1);
+ }
- setUniqueColors(
- Array.from(colorMap.entries()).map(([color, count]) => ({
- color,
- count,
- })),
- );
- }, [layers, activeShadow]);
+ setUniqueColors(
+ Array.from(colorMap.entries()).map(([color, count]) => ({
+ color,
+ count,
+ })),
+ );
+ }, [layers, activeShadow]);
- useEffect(() => {
- setIsDarkMode(theme === "dark");
- }, [theme]);
+ useEffect(() => {
+ setIsDarkMode(theme === "dark");
+ }, [theme]);
- const checkIfEdited = (
- currentLayers: ShadowLayer[],
- originalPreset: ShadowPreset,
- ) => {
- if (!originalPreset) return false;
- if (currentLayers.length !== originalPreset.layers.length) return true;
+ const checkIfEdited = (
+ currentLayers: ShadowLayer[],
+ originalPreset: ShadowPreset,
+ ) => {
+ if (!originalPreset) return false;
+ if (currentLayers.length !== originalPreset.layers.length) return true;
- for (let i = 0; i < currentLayers.length; i++) {
- const currentLayer = currentLayers[i];
- const originalLayer = originalPreset.layers[i];
- if (
- currentLayer.offsetX !== originalLayer.offsetX ||
- currentLayer.offsetY !== originalLayer.offsetY ||
- currentLayer.blur !== originalLayer.blur ||
- currentLayer.spread !== originalLayer.spread ||
- currentLayer.color !== originalLayer.color ||
- currentLayer.opacity !== originalLayer.opacity ||
- currentLayer.isInner !== originalLayer.isInner ||
- currentLayer.isVisible !== originalLayer.isVisible
- ) {
- return true;
- }
- }
+ for (let i = 0; i < currentLayers.length; i++) {
+ const currentLayer = currentLayers[i];
+ const originalLayer = originalPreset.layers[i];
+ if (
+ currentLayer.offsetX !== originalLayer.offsetX ||
+ currentLayer.offsetY !== originalLayer.offsetY ||
+ currentLayer.blur !== originalLayer.blur ||
+ currentLayer.spread !== originalLayer.spread ||
+ currentLayer.color !== originalLayer.color ||
+ currentLayer.opacity !== originalLayer.opacity ||
+ currentLayer.isInner !== originalLayer.isInner ||
+ currentLayer.isVisible !== originalLayer.isVisible
+ ) {
+ return true;
+ }
+ }
- return false;
- };
+ return false;
+ };
- const applyPreset = (preset: ShadowPreset) => {
- if (isDarkMode && preset.darkLayers) {
- setLayers([...preset.darkLayers]);
- } else {
- setLayers([...preset.layers]);
- }
- setShadowMode("box");
- setActiveLayerIndex(0);
- setActiveShadow(preset);
- setCurrentPresetId(preset.id || null);
- setIsEdited(false);
- setShadowName(preset.name || "");
- };
+ const applyPreset = (preset: ShadowPreset) => {
+ if (isDarkMode && preset.darkLayers) {
+ setLayers([...preset.darkLayers]);
+ } else {
+ setLayers([...preset.layers]);
+ }
+ setShadowMode("box");
+ setActiveLayerIndex(0);
+ setActiveShadow(preset);
+ setCurrentPresetId(preset.id || null);
+ setIsEdited(false);
+ setShadowName(preset.name || "");
+ };
- const saveCurrentShadow = () => {
- const shadowToSave = {
- name: shadowName || "Custom Shadow",
- tailwind: tailwindClass,
- css: cssValue,
- darkTailwind: isDarkMode ? tailwindClass : undefined,
- darkCss: isDarkMode ? cssValue : undefined,
- layers: [...layers],
- darkLayers: isDarkMode ? [...layers] : undefined,
- isCustom: true,
- };
+ const saveCurrentShadow = () => {
+ const shadowToSave = {
+ name: shadowName || "Custom Shadow",
+ tailwind: tailwindClass,
+ css: cssValue,
+ darkTailwind: isDarkMode ? tailwindClass : undefined,
+ darkCss: isDarkMode ? cssValue : undefined,
+ layers: [...layers],
+ darkLayers: isDarkMode ? [...layers] : undefined,
+ isCustom: true,
+ };
- if (currentPresetId && savedShadows.some((s) => s.id === currentPresetId)) {
- updateShadow(currentPresetId, shadowToSave);
- toast.success("Your custom shadow has been updated.!");
- } else {
- const newId = addShadow(shadowToSave);
- setCurrentPresetId(newId);
- toast.success("Your custom shadow has been saved.");
- }
+ if (currentPresetId && savedShadows.some((s) => s.id === currentPresetId)) {
+ updateShadow(currentPresetId, shadowToSave);
+ toast.success("Your custom shadow has been updated.!");
+ } else {
+ const newId = addShadow(shadowToSave);
+ setCurrentPresetId(newId);
+ toast.success("Your custom shadow has been saved.");
+ }
- setIsEdited(false);
- };
+ setIsEdited(false);
+ };
- const textShadowValue = layers
- .filter((layer) => layer.isVisible !== false)
- .map((layer) => {
- const rgba = `rgba(${Number.parseInt(layer.color.slice(1, 3), 16)}, ${Number.parseInt(layer.color.slice(3, 5), 16)}, ${Number.parseInt(layer.color.slice(5, 7), 16)}, ${layer.opacity / 100})`;
- return `${layer.offsetX}px ${layer.offsetY}px ${layer.blur}px ${rgba}`;
- })
- .join(", ");
+ const textShadowValue = layers
+ .filter((layer) => layer.isVisible !== false)
+ .map((layer) => {
+ const rgba = `rgba(${Number.parseInt(layer.color.slice(1, 3), 16)}, ${Number.parseInt(layer.color.slice(3, 5), 16)}, ${Number.parseInt(layer.color.slice(5, 7), 16)}, ${layer.opacity / 100})`;
+ return `${layer.offsetX}px ${layer.offsetY}px ${layer.blur}px ${rgba}`;
+ })
+ .join(", ");
- return (
- <>
- {isMobile && (
- = ({
- width,
- height,
- viewBox,
- className = "flex justify-center w-full h-full",
- path,
- paths = [],
- strokeColor = "#cecece",
- strokeWidth = 3,
- strokeLinecap = "round",
- animationDuration = 1.5,
- animationDelay = 0,
- animationBounce = 0.3,
- staggerDelay = 0.2,
- reverseAnimation = false,
- enableHoverAnimation = false,
- hoverAnimationType = "redraw",
- hoverStrokeColor = "#4f46e5",
- initialAnimation = true,
+ width,
+ height,
+ viewBox,
+ className = "flex justify-center w-full h-full",
+ path,
+ paths = [],
+ strokeColor = "text-primary", // Default to CSS class
+ strokeWidth = 3,
+ strokeLinecap = "round",
+ animationDuration = 1.5,
+ animationDelay = 0,
+ animationBounce = 0.3,
+ staggerDelay = 0.2,
+ reverseAnimation = false,
+ enableHoverAnimation = false,
+ hoverAnimationType = "redraw",
+ hoverStrokeColor = "#4f46e5",
+ initialAnimation = true,
}) => {
- const [isHovering, setIsHovering] = useState(false);
+ const [isHovering, setIsHovering] = useState(false);
- const normalizedPaths: PathData[] = React.useMemo(() => {
- if (paths.length > 0) return paths;
- if (path) {
- // Parse the path to normalize coordinates if needed
- let normalizedPath = path;
+ const normalizedPaths: PathData[] = React.useMemo(() => {
+ if (paths.length > 0) return paths;
+ if (path) {
+ // Parse the path to normalize coordinates if needed
+ let normalizedPath = path;
- // If the path is a complex path with large starting coordinates, try to normalize it
- if (path.startsWith("M") && path.includes(",")) {
- try {
- // Extract all coordinates from the path
- const allCoords: number[] = [];
- const regex = /[-+]?[0-9]*\.?[0-9]+/g;
- // biome-ignore lint/suspicious/noImplicitAnyLet:
- let match;
- // biome-ignore lint/suspicious/noAssignInExpressions:
- while ((match = regex.exec(path)) !== null) {
- allCoords.push(Number.parseFloat(match[0]));
- }
+ // If the path is a complex path with large starting coordinates, try to normalize it
+ if (path.startsWith("M") && path.includes(",")) {
+ try {
+ // Extract all coordinates from the path
+ const allCoords: number[] = [];
+ const regex = /[-+]?[0-9]*\.?[0-9]+/g;
+ // biome-ignore lint/suspicious/noImplicitAnyLet:
+ let match;
+ // biome-ignore lint/suspicious/noAssignInExpressions:
+ while ((match = regex.exec(path)) !== null) {
+ allCoords.push(Number.parseFloat(match[0]));
+ }
- // Find min and max x and y to normalize
- if (allCoords.length >= 2) {
- let minX = Number.POSITIVE_INFINITY;
- let minY = Number.POSITIVE_INFINITY;
- let maxX = Number.NEGATIVE_INFINITY;
- let maxY = Number.NEGATIVE_INFINITY;
+ // Find min and max x and y to normalize
+ if (allCoords.length >= 2) {
+ let minX = Number.POSITIVE_INFINITY;
+ let minY = Number.POSITIVE_INFINITY;
+ let maxX = Number.NEGATIVE_INFINITY;
+ let maxY = Number.NEGATIVE_INFINITY;
- for (let i = 0; i < allCoords.length; i += 2) {
- if (i + 1 < allCoords.length) {
- minX = Math.min(minX, allCoords[i]);
- minY = Math.min(minY, allCoords[i + 1]);
- maxX = Math.max(maxX, allCoords[i]);
- maxY = Math.max(maxY, allCoords[i + 1]);
- }
- }
+ for (let i = 0; i < allCoords.length; i += 2) {
+ if (i + 1 < allCoords.length) {
+ minX = Math.min(minX, allCoords[i]);
+ minY = Math.min(minY, allCoords[i + 1]);
+ maxX = Math.max(maxX, allCoords[i]);
+ maxY = Math.max(maxY, allCoords[i + 1]);
+ }
+ }
- // Calculate the path width and height
- const pathWidth = maxX - minX;
- const pathHeight = maxY - minY;
+ // Calculate the path width and height
+ const pathWidth = maxX - minX;
+ const pathHeight = maxY - minY;
- // Parse the viewBox to get its dimensions
- const viewBoxDims = viewBox.split(" ").map(Number);
- const viewBoxWidth = viewBoxDims.length >= 3 ? viewBoxDims[2] : 100;
- const viewBoxHeight =
- viewBoxDims.length >= 4 ? viewBoxDims[3] : 100;
+ // Parse the viewBox to get its dimensions
+ const viewBoxDims = viewBox.split(" ").map(Number);
+ const viewBoxWidth = viewBoxDims.length >= 3 ? viewBoxDims[2] : 100;
+ const viewBoxHeight =
+ viewBoxDims.length >= 4 ? viewBoxDims[3] : 100;
- // Calculate padding (10% of viewBox width)
- const paddingX = viewBoxWidth * 0.1;
- const paddingY = viewBoxHeight * 0.1;
+ // Calculate padding (10% of viewBox width)
+ const paddingX = viewBoxWidth * 0.1;
+ const paddingY = viewBoxHeight * 0.1;
- // Calculate scale to fit the path within the viewBox with padding
- const scaleX = (viewBoxWidth - 2 * paddingX) / pathWidth;
- const scaleY = (viewBoxHeight - 2 * paddingY) / pathHeight;
- const scale = Math.min(scaleX, scaleY);
+ // Calculate scale to fit the path within the viewBox with padding
+ const scaleX = (viewBoxWidth - 2 * paddingX) / pathWidth;
+ const scaleY = (viewBoxHeight - 2 * paddingY) / pathHeight;
+ const scale = Math.min(scaleX, scaleY);
- // Adjust all coordinates to start from the left with padding and proper scaling
- let adjustedPath = path;
- let index = 0;
- adjustedPath = adjustedPath.replace(
- /[-+]?[0-9]*\.?[0-9]+/g,
- (match) => {
- const val = Number.parseFloat(match);
- const isX = index % 2 === 0;
- index++;
+ // Adjust all coordinates to start from the left with padding and proper scaling
+ let adjustedPath = path;
+ let index = 0;
+ adjustedPath = adjustedPath.replace(
+ /[-+]?[0-9]*\.?[0-9]+/g,
+ (match) => {
+ const val = Number.parseFloat(match);
+ const isX = index % 2 === 0;
+ index++;
- if (isX) {
- // X coordinate - shift to start from left with padding
- return ((val - minX) * scale + paddingX).toFixed(2);
- }
- // Y coordinate - center vertically
- return ((val - minY) * scale + paddingY).toFixed(2);
- },
- );
- normalizedPath = adjustedPath;
- }
- } catch (e) {
- // If parsing fails, use the original path
- console.error("Failed to normalize path:", e);
- }
- }
+ if (isX) {
+ // X coordinate - shift to start from left with padding
+ return ((val - minX) * scale + paddingX).toFixed(2);
+ }
+ // Y coordinate - center vertically
+ return ((val - minY) * scale + paddingY).toFixed(2);
+ },
+ );
+ normalizedPath = adjustedPath;
+ }
+ } catch (e) {
+ // If parsing fails, use the original path
+ console.error("Failed to normalize path:", e);
+ }
+ }
- return [
- {
- d: normalizedPath,
- stroke: strokeColor,
- strokeWidth,
- strokeLinecap,
- },
- ];
- }
- return [];
- }, [paths, path, strokeColor, strokeWidth, strokeLinecap, viewBox]);
+ return [
+ {
+ d: normalizedPath,
+ stroke: strokeColor,
+ strokeWidth,
+ strokeLinecap,
+ },
+ ];
+ }
+ return [];
+ }, [paths, path, strokeColor, strokeWidth, strokeLinecap, viewBox]);
- // Initial animation variants
- const getPathVariants = (index: number): Variants => ({
- hidden: {
- pathLength: 0,
- opacity: 0,
- pathOffset: reverseAnimation ? 1 : 0,
- },
- visible: {
- pathLength: 1,
- opacity: 1,
- pathOffset: reverseAnimation ? 0 : 0,
- transition: {
- pathLength: {
- type: "spring",
- duration: animationDuration,
- bounce: animationBounce,
- delay: animationDelay + index * staggerDelay,
- },
- pathOffset: {
- duration: animationDuration,
- delay: animationDelay + index * staggerDelay,
- },
- opacity: {
- duration: animationDuration / 4,
- delay: animationDelay + index * staggerDelay,
- },
- },
- },
- });
+ // Initial animation variants
+ const getPathVariants = (index: number): Variants => ({
+ hidden: {
+ pathLength: 0,
+ opacity: 0,
+ pathOffset: reverseAnimation ? 1 : 0,
+ },
+ visible: {
+ pathLength: 1,
+ opacity: 1,
+ pathOffset: reverseAnimation ? 0 : 0,
+ transition: {
+ pathLength: {
+ type: "spring",
+ duration: animationDuration,
+ bounce: animationBounce,
+ delay: animationDelay + index * staggerDelay,
+ },
+ pathOffset: {
+ duration: animationDuration,
+ delay: animationDelay + index * staggerDelay,
+ },
+ opacity: {
+ duration: animationDuration / 4,
+ delay: animationDelay + index * staggerDelay,
+ },
+ },
+ },
+ });
- if (normalizedPaths.length === 0) return null;
+ if (normalizedPaths.length === 0) return null;
- return (
- setIsHovering(true)}
- onHoverEnd={() => setIsHovering(false)}
- whileHover={
- enableHoverAnimation && hoverAnimationType !== "redraw"
- ? { scale: 1.05 }
- : {}
- }
- preserveAspectRatio="xMidYMid meet"
- style={{ maxWidth: "100%", maxHeight: "100%", display: "block" }}
- >
- animate svg
- {normalizedPaths.map((pathData, index) => (
-
- );
+ return (
+ setIsHovering(true)}
+ onHoverEnd={() => setIsHovering(false)}
+ whileHover={
+ enableHoverAnimation && hoverAnimationType !== "redraw"
+ ? { scale: 1.05 }
+ : {}
+ }
+ preserveAspectRatio="xMidYMid meet"
+ style={{ maxWidth: "100%", maxHeight: "100%", display: "block" }}
+ >
+ animate svg
+ {normalizedPaths.map((pathData, index) => (
+
+ );
};
interface AnimatedPathProps {
- pathData: PathData;
- index: number;
- strokeColor: string;
- strokeWidth: number;
- strokeLinecap: "butt" | "round" | "square";
- initialAnimation: boolean;
- pathVariants: Variants;
- isHovering: boolean;
- hoverAnimationType: HoverAnimationType;
- hoverStrokeColor: string | null;
- totalPaths: number;
+ pathData: PathData;
+ index: number;
+ strokeColor: string;
+ strokeWidth: number;
+ strokeLinecap: "butt" | "round" | "square";
+ initialAnimation: boolean;
+ pathVariants: Variants;
+ isHovering: boolean;
+ hoverAnimationType: HoverAnimationType;
+ hoverStrokeColor: string | null;
+ totalPaths: number;
}
const AnimatedPath: React.FC = ({
- pathData,
- index,
- strokeColor,
- strokeWidth,
- strokeLinecap,
- initialAnimation,
- pathVariants,
- isHovering,
- hoverAnimationType,
- hoverStrokeColor,
- totalPaths,
+ pathData,
+ index,
+ strokeColor,
+ strokeWidth,
+ strokeLinecap,
+ initialAnimation,
+ pathVariants,
+ isHovering,
+ hoverAnimationType,
+ hoverStrokeColor,
+ totalPaths,
}) => {
- const controls = useAnimationControls();
- const originalColor = pathData.stroke || strokeColor;
+ const controls = useAnimationControls();
+ const originalColor = pathData.stroke || strokeColor;
- // Handle hover animations
- React.useEffect(() => {
- if (!isHovering) {
- controls.stop();
- if (initialAnimation) {
- controls.start("visible");
- }
- return;
- }
+ // Handle hover animations
+ React.useEffect(() => {
+ if (!isHovering) {
+ controls.stop();
+ if (initialAnimation) {
+ controls.start("visible");
+ }
+ return;
+ }
- switch (hoverAnimationType) {
- case "redraw":
- controls.start({
- pathLength: [1, 0, 1],
- transition: {
- pathLength: {
- repeat: Number.POSITIVE_INFINITY,
- duration: 3,
- ease: "easeInOut",
- },
- },
- });
- break;
+ switch (hoverAnimationType) {
+ case "redraw":
+ controls.start({
+ pathLength: [1, 0, 1],
+ transition: {
+ pathLength: {
+ repeat: Number.POSITIVE_INFINITY,
+ duration: 3,
+ ease: "easeInOut",
+ },
+ },
+ });
+ break;
- case "float":
- controls.start({
- y: [0, -2, 0],
- transition: {
- y: {
- repeat: Number.POSITIVE_INFINITY,
- duration: 1.5,
- ease: "easeInOut",
- },
- },
- });
- break;
+ case "float":
+ controls.start({
+ y: [0, -2, 0],
+ transition: {
+ y: {
+ repeat: Number.POSITIVE_INFINITY,
+ duration: 1.5,
+ ease: "easeInOut",
+ },
+ },
+ });
+ break;
- case "pulse":
- controls.start({
- scale: [1, 1.03, 1],
- transition: {
- scale: {
- repeat: Number.POSITIVE_INFINITY,
- duration: 1.3,
- ease: "easeInOut",
- },
- },
- });
- break;
+ case "pulse":
+ controls.start({
+ scale: [1, 1.03, 1],
+ transition: {
+ scale: {
+ repeat: Number.POSITIVE_INFINITY,
+ duration: 1.3,
+ ease: "easeInOut",
+ },
+ },
+ });
+ break;
- case "color":
- controls.start({
- stroke: [
- originalColor,
- hoverStrokeColor || strokeColor,
- originalColor,
- ],
- transition: {
- stroke: {
- repeat: Number.POSITIVE_INFINITY,
- duration: 2,
- ease: "easeInOut",
- },
- },
- });
- break;
+ case "color":
+ controls.start({
+ stroke: [
+ originalColor,
+ hoverStrokeColor || strokeColor,
+ originalColor,
+ ],
+ transition: {
+ stroke: {
+ repeat: Number.POSITIVE_INFINITY,
+ duration: 2,
+ ease: "easeInOut",
+ },
+ },
+ });
+ break;
- case "sequential":
- controls.start({
- pathLength: [1, 0, 1],
- transition: {
- pathLength: {
- repeat: Number.POSITIVE_INFINITY,
- duration: 2,
- delay: (index / Math.max(totalPaths, 1)) * 2,
- ease: "easeInOut",
- },
- },
- });
- break;
- }
- }, [
- isHovering,
- hoverAnimationType,
- controls,
- originalColor,
- hoverStrokeColor,
- strokeColor,
- index,
- totalPaths,
- initialAnimation,
- ]);
+ case "sequential":
+ controls.start({
+ pathLength: [1, 0, 1],
+ transition: {
+ pathLength: {
+ repeat: Number.POSITIVE_INFINITY,
+ duration: 2,
+ delay: (index / Math.max(totalPaths, 1)) * 2,
+ ease: "easeInOut",
+ },
+ },
+ });
+ break;
+ }
+ }, [
+ isHovering,
+ hoverAnimationType,
+ controls,
+ originalColor,
+ hoverStrokeColor,
+ strokeColor,
+ index,
+ totalPaths,
+ initialAnimation,
+ ]);
- return (
- >(
- {},
- );
- const [copiedIndex, setCopiedIndex] = useState(null);
+ const { theme } = useTheme();
+ const [_exampleViewBox, setExampleViewBox] = useQueryState("viewBox", {
+ defaultValue: "0 0 250 100",
+ });
+ const [animationKeys, setAnimationKeys] = useState>(
+ {},
+ );
+ const [copiedIndex, setCopiedIndex] = useState(null);
- // Reload animation for a specific example
- const reloadAnimation = (index: number) => {
- setAnimationKeys((prev) => ({
- ...prev,
- [index]: (prev[index] || 0) + 1,
- }));
- };
+ // Reload animation for a specific example
+ const reloadAnimation = (index: number) => {
+ setAnimationKeys((prev) => ({
+ ...prev,
+ [index]: (prev[index] || 0) + 1,
+ }));
+ };
- // Copy component code to clipboard
- const copyComponentCode = (index: number) => {
- const example = examplesSvgPath[index];
+ // Copy component code to clipboard
+ const copyComponentCode = (index: number) => {
+ const example = examplesSvgPath[index];
- // Generate the full component code
- const code = `("");
- const [savedPaths, _setSavedPaths] = useState([]);
- const [previewKey, setPreviewKey] = useState(0);
- const [_showEditor, setShowEditor] = useState(false);
- const [_editorViewBox, _setEditorViewBox] = useState("0 0 100 100");
- const [strokeColorPickerOpen, setStrokeColorPickerOpen] = useState(false);
- const [showSaveDialog, setShowSaveDialog] = useState(false);
- const [activeSidebarTab, setActiveSidebarTab] = useState<
- "presets" | "settings" | "edited" | "saved"
- >("presets");
- const [isSidebarExpanded, setIsSidebarExpanded] = useState(true);
- const pathname = usePathname();
- const router = useRouter();
- // Update the default smoothing value to be more appropriate
- const [settings, setSettings] = useState({
- width: "100%",
- height: "100%",
- viewBox: "0 0 250 100",
- strokeColor: "#000000",
- strokeWidth: 2,
- strokeLinecap: "round",
- animationDuration: 1.5,
- animationDelay: 0,
- animationBounce: 0.3,
- reverseAnimation: false,
- enableHoverAnimation: false,
- hoverAnimationType: "redraw",
- });
-
- useEffect(() => {
- setSettings((prev) => ({
- ...prev,
- viewBox: exampleViewBox,
- strokeColor: theme === "dark" ? "#ffffff" : "#000000",
- }));
- }, [theme, exampleViewBox]);
- // Update settings
- const updateSetting = (
- key: K,
- value: AnimationSettings[K],
- ) => {
- setSettings((prev) => ({ ...prev, [key]: value }));
- setPreviewKey((prev) => prev + 1);
- };
-
- // Save current path
- const savePath = () => {
- if (!currentPath) {
- toast.success("No path to save", {
- description: "Draw something first before saving",
- });
- return;
- }
- setShowSaveDialog(true);
- console.log(currentPath);
-
- // setSavedPaths((prev) => [...prev, currentPath]);
- // toast.success("Path saved", {
- // description: "Your path has been added to the collection",
- // });
- };
-
- // Clear current path
- const _clearPath = () => {
- setCurrentPath("");
- };
-
- // Copy generated code
- const copyCode = () => {
- const code = generateCode();
- navigator.clipboard.writeText(code);
- toast.success("code copied", {
- description: "The code has been copied to your clipboard",
- });
- };
-
- // Open the SVG editor for the current path
- const _openEditor = () => {
- if (!currentPath) {
- toast("No path to edit", {
- description: "Draw something first before editing",
- });
- return;
- }
- setShowEditor(true);
- };
-
- // Open the SVG editor for an example path
- // const openEditorForExample = (path: string, viewBox: string) => {
- // setCurrentPath(path);
- // setEditorViewBox(viewBox);
- // setSettings((prev) => ({
- // ...prev,
- // viewBox: viewBox,
- // }));
- // setShowEditor(true);
- // };
-
- // Generate code for the current animation
- const generateCode = () => {
- const pathsCode =
- savedPaths.length > 0
- ? `paths={[${savedPaths.map((p) => `{ d: "${p}" }`).join(", ")}]}`
- : `path="${currentPath}"`;
-
- return `("");
+ const [savedPaths, _setSavedPaths] = useState([]);
+ const [previewKey, setPreviewKey] = useState(0);
+ const [_showEditor, setShowEditor] = useState(false);
+ const [_editorViewBox, _setEditorViewBox] = useState("0 0 100 100");
+ const [strokeColorPickerOpen, setStrokeColorPickerOpen] = useState(false);
+ const [showSaveDialog, setShowSaveDialog] = useState(false);
+ const [activeSidebarTab, setActiveSidebarTab] = useState<
+ "presets" | "settings" | "edited" | "saved"
+ >("presets");
+ const [isSidebarExpanded, setIsSidebarExpanded] = useState(true);
+ const pathname = usePathname();
+ const router = useRouter();
+ // Update the default smoothing value to be more appropriate
+ const [settings, setSettings] = useState({
+ width: "100%",
+ height: "100%",
+ viewBox: "0 0 250 100",
+ strokeColor: "#000000",
+ strokeWidth: 2,
+ strokeLinecap: "round",
+ animationDuration: 1.5,
+ animationDelay: 0,
+ animationBounce: 0.3,
+ reverseAnimation: false,
+ enableHoverAnimation: false,
+ hoverAnimationType: "redraw",
+ });
+
+ useEffect(() => {
+ setSettings((prev) => ({
+ ...prev,
+ viewBox: exampleViewBox,
+ strokeColor: theme === "dark" ? "#ffffff" : "#000000",
+ }));
+ }, [theme, exampleViewBox]);
+ // Update settings
+ const updateSetting = (
+ key: K,
+ value: AnimationSettings[K],
+ ) => {
+ setSettings((prev) => ({ ...prev, [key]: value }));
+ setPreviewKey((prev) => prev + 1);
+ };
+
+ // Save current path
+ const savePath = () => {
+ if (!currentPath) {
+ toast.success("No path to save", {
+ description: "Draw something first before saving",
+ });
+ return;
+ }
+ setShowSaveDialog(true);
+ console.log(currentPath);
+
+ // setSavedPaths((prev) => [...prev, currentPath]);
+ // toast.success("Path saved", {
+ // description: "Your path has been added to the collection",
+ // });
+ };
+
+ // Clear current path
+ const _clearPath = () => {
+ setCurrentPath("");
+ };
+
+ // Copy generated code
+ const copyCode = () => {
+ const code = generateCode();
+ navigator.clipboard.writeText(code);
+ toast.success("code copied", {
+ description: "The code has been copied to your clipboard",
+ });
+ };
+
+ // Open the SVG editor for the current path
+ const _openEditor = () => {
+ if (!currentPath) {
+ toast("No path to edit", {
+ description: "Draw something first before editing",
+ });
+ return;
+ }
+ setShowEditor(true);
+ };
+
+ // Open the SVG editor for an example path
+ // const openEditorForExample = (path: string, viewBox: string) => {
+ // setCurrentPath(path);
+ // setEditorViewBox(viewBox);
+ // setSettings((prev) => ({
+ // ...prev,
+ // viewBox: viewBox,
+ // }));
+ // setShowEditor(true);
+ // };
+
+ // Generate code for the current animation
+ const generateCode = () => {
+ const pathsCode =
+ savedPaths.length > 0
+ ? `paths={[${savedPaths.map((p) => `{ d: "${p}" }`).join(", ")}]}`
+ : `path="${currentPath}"`;
+
+ return `
- Loading shapes...
-
- );
- }
-
- return (
- <>
- {isMobile && (
- - Please use a desktop/laptop to view the Editor. -
- )} - -
-
-
- );
+ const pathname = usePathname();
+ const router = useRouter();
+ const isTab = useMediaQuery("(max-width:1024px)");
+ const isMobile = useMediaQuery("(max-width:768px)");
+
+ const {
+ selectedShapeId,
+ setSelectedShapeId,
+ customPath,
+ customName,
+ addCustomShape,
+ addEditedShape,
+ deleteShape,
+ setCustomPath,
+ setCustomName,
+ customShapes,
+ editedShapes,
+ } = useClipPathStore();
+
+ const [selectedImage, setSelectedImage] = useState(SAMPLE_IMAGES[0]);
+ const [uploadedImages, setUploadedImages] = useState
-
-
- {!isMobile && (
-
-
- )}
-
- {!isTab && isSidebarExpanded && (
-
- {[
- { key: "presets", label: "Presets", icon: PanelsTopLeft },
- { key: "settings", label: "Settings", icon: Settings2 },
- { key: "edited", label: "Edited", icon: Layers },
- { key: "saved", label: "Saved", icon: Bookmark },
- ].map((item) => (
-
- ))}
-
-
-
-
-
-
-
- {activeSidebarTab === "presets" && (
-
-
- )}
-
- {activeSidebarTab === "edited" && (
-
- {editedShapes.length > 0 ? (
-
- )}
-
- {activeSidebarTab === "saved" && (
-
- {customShapes.length > 0 ? (
-
- )}
-
- )}
-
-
-
-
- {!editMode ? (
-
- ) : (
- exitEditMode(true)}
- onCancel={() => exitEditMode(false)}
- />
- )}
-
- )}
-
- {activeSidebarTab === "settings" && (
-
-
- addCustomShape(customPath, customName)
- }
- disabled={editMode}
- />
-
- - No Edited Shapes Found -
- )} -- No Custom/Saved Shapes Found -
- )} -
-
-
-
-
-
-
-
-
- - Click and drag to pan the zoomed view -
- )} -- Use mouse wheel + Ctrl to zoom in/out, or press + and - keys -
-
-
-
-
-
-
-
- Export
-
-
-
-
- Export clip-path code
-
-
-
+ Loading shapes...
+
+ );
+ }
+
+ return (
+ <>
+ {isMobile && (
+ + Please use a desktop/laptop to view the Editor. +
+ )} + +
+ {!isMobile && (
+
+
+ );
}
diff --git a/components/view/clip-path/shape-preview.tsx b/components/view/clip-path/shape-preview.tsx
index 0bb9c8a..684e228 100644
--- a/components/view/clip-path/shape-preview.tsx
+++ b/components/view/clip-path/shape-preview.tsx
@@ -10,286 +10,283 @@ import { useRef, useState } from "react";
import type { ClipPathShape } from "./data";
interface ShapePreviewProps {
- selectedShape: ClipPathShape;
- selectedImage: string;
- editMode: boolean;
- editClipPathId: string;
- currentEditPath: string;
- controlPoints: Array<{
- x: number;
- y: number;
- command: string;
- isControl: boolean;
- }>;
- zoomLevel: number;
- setZoomLevel: (value: number) => void;
- previewOffset: { x: number; y: number };
- setPreviewOffset: (offset: { x: number; y: number }) => void;
- onMouseMove?: (e: React.MouseEvent
+
+ )}
+
+ {!isTab && isSidebarExpanded && (
+
+ {[
+ { key: "presets", label: "Presets", icon: PanelsTopLeft },
+ { key: "settings", label: "Settings", icon: Settings2 },
+ { key: "edited", label: "Edited", icon: Layers },
+ { key: "saved", label: "Saved", icon: Bookmark },
+ ].map((item) => (
+
+ ))}
+
+
+
+
+ {activeSidebarTab === "presets" && (
+
+
+ )}
+
+ {activeSidebarTab === "edited" && (
+
+ {editedShapes.length > 0 ? (
+
+ )}
+
+ {activeSidebarTab === "saved" && (
+
+ {customShapes.length > 0 ? (
+
+ )}
+
+ )}
+
+
+
+
+ {!editMode ? (
+
+ ) : (
+ exitEditMode(true)}
+ onCancel={() => exitEditMode(false)}
+ />
+ )}
+
+ )}
+
+ {activeSidebarTab === "settings" && (
+
+
+ addCustomShape(customPath, customName)
+ }
+ disabled={editMode}
+ />
+
+ + No Edited Shapes Found +
+ )} ++ No Custom/Saved Shapes Found +
+ )} +
+
+
+
+
+
+
+
+
+
+
+ + Click and drag to pan the zoomed view +
+ )} ++ Use mouse wheel + Ctrl to zoom in/out, or press + and - keys +
+ 1
- ? "grab"
- : "default",
- }}
- >
-
+ return (
+
+ );
}
diff --git a/components/view/shadow/index.tsx b/components/view/shadow/index.tsx
index 3c5e3c6..84b1963 100644
--- a/components/view/shadow/index.tsx
+++ b/components/view/shadow/index.tsx
@@ -3,25 +3,25 @@
import { Button } from "@/components/ui/button";
import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
} from "@/components/ui/select";
import { useMediaQuery } from "@/components/ui/use-media-query";
import { preBuiltShadows } from "@/config/shadow-data";
import { useShadowStore } from "@/store/useShadowStore";
import type { ShadowLayer, ShadowPreset } from "@/types/shadow";
import {
- Bookmark,
- Layers,
- Moon,
- PanelsTopLeft,
- Settings2,
- SidebarClose,
- SidebarOpen,
- Sun,
+ Bookmark,
+ Layers,
+ Moon,
+ PanelsTopLeft,
+ Settings2,
+ SidebarClose,
+ SidebarOpen,
+ Sun,
} from "lucide-react";
import { useTheme } from "next-themes";
import { usePathname, useRouter } from "next/navigation";
@@ -30,416 +30,403 @@ import toast from "react-hot-toast";
import ShadowControls from "./shadow-controls";
import ShadowPresets from "./shadow-presets";
import ShadowPreview from "./shadow-preview";
+import ThemeSwitch from "@/components/theme-switcher";
export default function ShadowGenerator() {
- const { resolvedTheme, setTheme, theme } = useTheme();
- const isTab = useMediaQuery("(max-width:1024px)");
- const isMobile = useMediaQuery("(max-width:768px)");
- const [shadowName, setShadowName] = useState("");
- const [isEdited, setIsEdited] = useState(false);
- const [currentPresetId, setCurrentPresetId] = useState 1
+ ? "grab"
+ : "default",
+ }}
+ >
+
-
+ {editMode ? (
+
- );
+ {/* Zoom controls */}
+
+ {
- e.stopPropagation(); // Prevent event bubbling
- if (startDrag) startDrag(index);
- }}
- style={{ cursor: "move" }}
- />
- ))}
-
-
- ) : (
-
+
+
- {editMode ? (
-
-
+ ) : (
+
-
-
+ {/* SVG editor overlay */}
+
+
+
+ )}
- {/* Control points */}
- {controlPoints.map((point, index) => (
-
- {/* Figure with clip path */}
-
-
-
-
- )}
-
- {/* Zoom controls */}
-
- setZoomLevel(value[0])}
- />
-
-
- Zoom: {zoomLevel.toFixed(1)}x
-
+ setZoomLevel(value[0])}
+ />
+
+
+ Zoom: {zoomLevel.toFixed(1)}x
+ - Please use a desktop/laptop to view the Editor. -
- )} -
-
+
+ );
}
diff --git a/components/view/svg-line-draw/animate-svg.tsx b/components/view/svg-line-draw/animate-svg.tsx
index 0a30ed8..9403f44 100644
--- a/components/view/svg-line-draw/animate-svg.tsx
+++ b/components/view/svg-line-draw/animate-svg.tsx
@@ -4,354 +4,355 @@ import { type Variants, motion, useAnimationControls } from "motion/react";
import React, { useState } from "react";
type PathData = {
- d: string;
- stroke?: string;
- strokeWidth?: number;
- strokeLinecap?: "butt" | "round" | "square";
+ d: string;
+ stroke?: string;
+ strokeWidth?: number;
+ strokeLinecap?: "butt" | "round" | "square";
};
type HoverAnimationType = "float" | "pulse" | "redraw" | "color" | "sequential";
type TAnimateSvgProps = {
- width: string;
- height: string;
- viewBox: string;
- className: string;
- path?: string; // Single path (legacy)
- paths?: PathData[]; // New multiple path support
- strokeColor?: string;
- strokeWidth?: number;
- strokeLinecap?: "butt" | "round" | "square";
- animationDuration?: number;
- animationDelay?: number;
- animationBounce?: number;
- staggerDelay?: number;
- reverseAnimation?: boolean;
- enableHoverAnimation?: boolean;
- hoverAnimationType?: HoverAnimationType;
- hoverStrokeColor?: string | null;
- initialAnimation?: boolean;
+ width: string;
+ height: string;
+ viewBox: string;
+ className: string;
+ path?: string; // Single path (legacy)
+ paths?: PathData[]; // New multiple path support
+ strokeColor?: string; // Deprecated - use CSS classes instead
+ strokeWidth?: number;
+ strokeLinecap?: "butt" | "round" | "square";
+ animationDuration?: number;
+ animationDelay?: number;
+ animationBounce?: number;
+ staggerDelay?: number;
+ reverseAnimation?: boolean;
+ enableHoverAnimation?: boolean;
+ hoverAnimationType?: HoverAnimationType;
+ hoverStrokeColor?: string | null;
+ initialAnimation?: boolean;
};
export const AnimateSvg: React.FC
-
+ return (
+ <>
+ {isMobile && (
+
- {[
- { key: "presets", label: "Presets", icon: PanelsTopLeft },
- { key: "settings", label: "Settings", icon: Settings2 },
- { key: "edited", label: "Edited", icon: Layers },
- { key: "saved", label: "Saved", icon: Bookmark },
- ].map((item) => (
-
- ))}
-
-
-
-
-
-
- + Please use a desktop/laptop to view the Editor. +
+ )} +
+
-
- );
+
+
- {!isTab && isSidebarExpanded && (
-
+ {[
+ { key: "presets", label: "Presets", icon: PanelsTopLeft },
+ { key: "settings", label: "Settings", icon: Settings2 },
+ { key: "edited", label: "Edited", icon: Layers },
+ { key: "saved", label: "Saved", icon: Bookmark },
+ ].map((item) => (
+
+ ))}
+
+
+
+
-
- )}
+ {!isTab && isSidebarExpanded && (
+
-
-
-
- {activeSidebarTab === "settings" ? (
-
- {shadowMode === "text" && (
-
- ) : (
- - Using the same layer controls as box shadow. For - text-shadow, spread/inset are ignored in output. -
- )} -
-
-
+
+ )}
-
+
+
+
+ {activeSidebarTab === "settings" ? (
+
+ {shadowMode === "text" && (
+
+ ) : (
+ + Using the same layer controls as box shadow. For + text-shadow, spread/inset are ignored in output. +
+ )} +
+
+
-
-
+
+
- {examplesSvgPath.map((example, index) => (
-
+ );
}
diff --git a/components/view/svg-line-draw/index.tsx b/components/view/svg-line-draw/index.tsx
index c61da80..5d62c13 100644
--- a/components/view/svg-line-draw/index.tsx
+++ b/components/view/svg-line-draw/index.tsx
@@ -2,29 +2,29 @@
import { Button } from "@/components/ui/button";
import {
- Card,
- CardContent,
- CardDescription,
- CardHeader,
- CardTitle,
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
} from "@/components/ui/card";
import CopyToClipboard from "@/components/ui/copy-to-clipboard";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
- Popover,
- PopoverContent,
- PopoverTrigger,
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
} from "@/components/ui/popover";
import { CustomSlider } from "@/components/ui/range-slider";
import { ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { Tabs, TabsContent, TabsList } from "@/components/ui/tabs";
@@ -32,25 +32,25 @@ import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";
import { TabsTrigger } from "@radix-ui/react-tabs";
import {
- Bookmark,
- ChevronDown,
- ChevronUp,
- CodeIcon,
- Copy,
- Edit2,
- GripVertical,
- Layers,
- Loader,
- PanelsTopLeft,
- PencilLine,
- Play,
- RefreshCcw,
- Save,
- Settings2,
- SidebarClose,
- SidebarOpen,
- Trash2,
- X,
+ Bookmark,
+ ChevronDown,
+ ChevronUp,
+ CodeIcon,
+ Copy,
+ Edit2,
+ GripVertical,
+ Layers,
+ Loader,
+ PanelsTopLeft,
+ PencilLine,
+ Play,
+ RefreshCcw,
+ Save,
+ Settings2,
+ SidebarClose,
+ SidebarOpen,
+ Trash2,
+ X,
} from "lucide-react";
import { useTheme } from "next-themes";
import { usePathname, useRouter } from "next/navigation";
@@ -70,139 +70,140 @@ import { ExamplePaths } from "./example-paths";
import { SavePathDialog } from "./save-path-dialog";
import { SavedPathsTab } from "./saved-draw-paths";
import { SvgEditor } from "./svg-editor";
+import ThemeSwitch from "@/components/theme-switcher";
type AnimationSettings = {
- width: string;
- height: string;
- viewBox: string;
- strokeColor: string;
- strokeWidth: number;
- strokeLinecap: "butt" | "round" | "square";
- animationDuration: number;
- animationDelay: number;
- animationBounce: number;
- reverseAnimation: boolean;
- enableHoverAnimation: boolean;
- hoverAnimationType: "float" | "pulse" | "redraw" | "color" | "sequential";
+ width: string;
+ height: string;
+ viewBox: string;
+ strokeColor: string;
+ strokeWidth: number;
+ strokeLinecap: "butt" | "round" | "square";
+ animationDuration: number;
+ animationDelay: number;
+ animationBounce: number;
+ reverseAnimation: boolean;
+ enableHoverAnimation: boolean;
+ hoverAnimationType: "float" | "pulse" | "redraw" | "color" | "sequential";
};
function SVGLineDrawGenerator() {
- const { theme } = useTheme();
- const [activePresets, setActivePresets] = useQueryState("presets");
- const [exampleViewBox, _setExampleViewBox] = useQueryState("viewBox", {
- defaultValue: "0 0 250 100",
- });
- const [editPath, setEditPath] = useQueryState(
- "editPath",
- parseAsBoolean.withDefault(false),
- );
- const [customDrawLine, setCustomDrawLine] = useState(false);
- const [currentPath, setCurrentPath] = useState
-
+ ))}
+ {
- onSelectPath(example.path);
- setExampleViewBox(example.viewBox);
- setActivePresets(example.id);
- }}
- onKeyDown={(e) => {
- e.preventDefault();
- onSelectPath(example.path);
- setExampleViewBox(example.viewBox);
- setActivePresets(example.id);
- }}
- >
-
+ return (
+ - {example.name} -
-
+ {examplesSvgPath.map((example, index) => (
+
- );
+
+
- ))}
- {
+ onSelectPath(example.path);
+ setExampleViewBox(example.viewBox);
+ setActivePresets(example.id);
+ }}
+ onKeyDown={(e) => {
+ e.preventDefault();
+ onSelectPath(example.path);
+ setExampleViewBox(example.viewBox);
+ setActivePresets(example.id);
+ }}
+ >
+
- + {example.name} +
+
-
-
-
-
+
+
+
+
-
+ );
}
export default SVGLineDrawGenerator;
-
+
-
-
- {/* Left Column - Examples and Animation Settings */}
-
- {[
- { key: "presets", label: "Presets", icon: PanelsTopLeft },
- { key: "settings", label: "Settings", icon: Settings2 },
- { key: "edited", label: "Edited", icon: Layers },
- { key: "saved", label: "Saved", icon: Bookmark },
- ].map((item) => (
-
- ))}
-
-
-
-
-
-
-
- setActiveSidebarTab(
- value as "presets" | "settings" | "edited" | "saved",
- )
- }
- className="flex h-full min-h-0 flex-col"
- >
-
-
- Presets
-
-
- Settings
-
-
- Edited
-
-
- Saved
-
-
- {/* {
+ if (activePresets) {
+ setActivePresets(null);
+ setEditPath(false);
+ setCustomDrawLine(true);
+ } else {
+ setCustomDrawLine(!customDrawLine);
+ }
+ };
+ const handleEditPath = () => {
+ if (activePresets) {
+ setEditPath(!editPath);
+ } else {
+ setEditPath(!editPath);
+ }
+ };
+
+ return (
+
+
+
+
+
+ )}
+
+
+
+
+ {/* Save Path Dialog */}
+ {showSaveDialog && (
+ setShowSaveDialog(false)}
+ />
+ )}
+
+ {/*
+
+
+
+ {customDrawLine && (
+ <>
+
+
+ ) : (
+
+
+
+ {/* Left Column - Examples and Animation Settings */}
+
+ {[
+ { key: "presets", label: "Presets", icon: PanelsTopLeft },
+ { key: "settings", label: "Settings", icon: Settings2 },
+ { key: "edited", label: "Edited", icon: Layers },
+ { key: "saved", label: "Saved", icon: Bookmark },
+ ].map((item) => (
+
+ ))}
+
+
+
+
+
+ setActiveSidebarTab(
+ value as "presets" | "settings" | "edited" | "saved",
+ )
+ }
+ className="flex h-full min-h-0 flex-col"
+ >
+
+
+ Presets
+
+
+ Settings
+
+
+ Edited
+
+
+ Saved
+
+
+ {/*
Custom
*/}
-
-
-
- {
- setCurrentPath(path);
- setCustomDrawLine(false);
- setEditPath(false);
- }}
- // onEditPath={openEditorForExample}
- setActivePresets={setActivePresets}
- activePresets={activePresets}
- />
-
-
-
- {/* Animation Settings */}
-
-
-
- {/*
+
+
+
+ {
+ setCurrentPath(path);
+ setCustomDrawLine(false);
+ setEditPath(false);
+ }}
+ // onEditPath={openEditorForExample}
+ setActivePresets={setActivePresets}
+ activePresets={activePresets}
+ />
+
+
+
+ {/* Animation Settings */}
+
+
+
+ {/*
*/}
-
-
- {
- setCurrentPath(path);
- setCustomDrawLine(false);
- updateSetting("viewBox", viewBox);
- setPreviewKey((prev) => prev + 1);
- }}
- />
-
-
-
-
- {
- setCurrentPath(path);
- setCustomDrawLine(false);
- updateSetting("viewBox", viewBox);
- setPreviewKey((prev) => prev + 1);
- }}
- />
-
-
-
-
-
- {/* Right Column - Preview and Drawing Canvas */}
-
-
-
-
- updateSetting("viewBox", e.target.value)}
- />
-
-
-
-
-
-
-
-
-
-
-
-
- updateSetting("strokeColor", color)
- }
- />
-
-
-
- updateSetting("strokeColor", e.target.value)
- }
- className="flex-1"
- />
-
-
-
- updateSetting("strokeColor", e.target.value)
- }
- className="flex-1"
- />
-
-
-
-
- updateSetting("strokeWidth", value[0])
- }
- />
-
-
-
-
-
-
-
-
-
-
- updateSetting("animationDuration", value[0])
- }
- />
-
-
-
-
-
- updateSetting("animationDelay", value[0])
- }
- />
-
-
-
-
-
- updateSetting("animationBounce", value[0])
- }
- />
-
-
-
-
- updateSetting("reverseAnimation", checked)
- }
- />
-
-
-
-
-
- updateSetting("enableHoverAnimation", checked)
- }
- />
-
-
-
- {settings.enableHoverAnimation && (
-
-
-
-
- )}
-
+
+
+
+ updateSetting("viewBox", e.target.value)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ updateSetting("strokeColor", color)
+ }
+ />
+
+
+
+ updateSetting("strokeColor", e.target.value)
+ }
+ className="flex-1"
+ />
+
+
+
+ updateSetting("strokeColor", e.target.value)
+ }
+ className="flex-1"
+ />
+
+
+
+
+ updateSetting("strokeWidth", value[0])
+ }
+ />
+
+
+
+
+
+
+
+
+
+
+ updateSetting("animationDuration", value[0])
+ }
+ />
+
+
+
+
+
+ updateSetting("animationDelay", value[0])
+ }
+ />
+
+
+
+
+
+ updateSetting("animationBounce", value[0])
+ }
+ />
+
+
+
+
+ updateSetting("reverseAnimation", checked)
+ }
+ />
+
+
+
+
+
+ updateSetting("enableHoverAnimation", checked)
+ }
+ />
+
+
+
+ {settings.enableHoverAnimation && (
+
+
+
+
+ )}
+
- {/* Preview Section */}
-
-
- See your animation in action
- )}
-
-
-
-
-
- );
+
-
- {customDrawLine
- ? "Drawing"
- : editPath
- ? "Editing"
- : "Preview"}
-
-
-
- {!customDrawLine && !editPath && (
-
-
-
-
-
-
- Component Code
-
- {/*
-
- {/* SVG Editor Modal */}
- {editPath ? (
- <>
-
-
-
-
-
-
-
-
- {
- setCurrentPath(newPath);
- // setPreviewKey((prev) => prev + 1);
- }}
- onClose={() => setEditPath(false)}
- strokeColor={settings.strokeColor}
- strokeWidth={settings.strokeWidth}
- />
-
-
-
- ) : (
- <>
-
-
- {currentPath || savedPaths.length > 0 ? (
-
-
-
-
- {/* {savedPaths.length > 0 ? (
+
+
+ {
+ setCurrentPath(path);
+ setCustomDrawLine(false);
+ updateSetting("viewBox", viewBox);
+ setPreviewKey((prev) => prev + 1);
+ }}
+ />
+
+
+
+
+ {
+ setCurrentPath(path);
+ setCustomDrawLine(false);
+ updateSetting("viewBox", viewBox);
+ setPreviewKey((prev) => prev + 1);
+ }}
+ />
+
+
+
+
+
+ {/* Right Column - Preview and Drawing Canvas */}
+
+ {/* Preview Section */}
+
+
+ See your animation in action
+ )}
+
+
+
+
+
- {customDrawLine && (
- <>
-
-
-
-
-
- )}
-
-
-
-
- {/* Save Path Dialog */}
- {showSaveDialog && (
- setShowSaveDialog(false)}
- />
- )}
-
- {/*
-
+
+ {customDrawLine
+ ? "Drawing"
+ : editPath
+ ? "Editing"
+ : "Preview"}
+
+
+
+ {!customDrawLine && !editPath && (
+
+
+
+
+
+
+ Component Code
+
+ {/*
+
+ {/* SVG Editor Modal */}
+ {editPath ? (
+ <>
+
+
+
+
+
+
+
+
+ {
+ setCurrentPath(newPath);
+ // setPreviewKey((prev) => prev + 1);
+ }}
+ onClose={() => setEditPath(false)}
+ strokeColor={settings.strokeColor}
+ strokeWidth={settings.strokeWidth}
+ />
+
+
+
+ ) : (
+ <>
+
+
+ {currentPath || savedPaths.length > 0 ? (
+
-
+
+
+ {/* {savedPaths.length > 0 ? (
- ) : (
-
-
- )}
-
- )}
- Draw or select a path to preview
-
-
-
+
+ )}
+
+ )}
+ Draw or select a path to preview
+
+
+