feat: added inner shadow

vwh · Sep 25, 2024 · 8c136e8 · 8c136e8
1 parent 4b7f2f1
commit 8c136e8
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 3 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -41,7 +41,8 @@ const App: React.FC = () => {
   const svgStyle = useMemo(
     () => ({
       position: "absolute" as const,
-      transform: `rotate(${svgSettings.rotation}deg) scale(${svgSettings.scale})`
+      transform: `rotate(${svgSettings.rotation}deg) scale(${svgSettings.scale})`,
+      filter: `drop-shadow(${svgSettings.innerShadowX}px ${svgSettings.innerShadowY}px ${svgSettings.innerShadowBlur}px ${svgSettings.innerShadowColor})`
     }),
     [svgSettings]
   );

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
@@ -95,7 +95,11 @@ const Navbar: React.FC = () => {
       bgColor: randomIconColor(),
       svgColor: randomIconColor(),
       fillColor: randomIconColor(),
-      fillOpacity: Math.random() > 0.5 ? 1 : 0
+      fillOpacity: Math.random() > 0.5 ? 1 : 0,
+      innerShadowColor: "#0A0B0B",
+      innerShadowBlur: Math.floor(Math.random() * 4),
+      innerShadowX: 2,
+      innerShadowY: 3
     });
   };
 

diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx
@@ -132,6 +132,39 @@ function IconControlGroup() {
         value={[svgSettings.iconBlur]}
         onValueChange={(value) => updateSvgSetting("iconBlur", value[0])}
       />
+      <ControlGroup label="Inner Shadow">
+        <ControlColor
+          label="Inner Shadow Color"
+          value={svgSettings.innerShadowColor}
+          onChange={(color) => updateSvgSetting("innerShadowColor", color)}
+        />
+        <ControlSlider
+          label="Inner Shadow Blur"
+          min={0}
+          max={20}
+          step={1}
+          value={[svgSettings.innerShadowBlur]}
+          onValueChange={(value) =>
+            updateSvgSetting("innerShadowBlur", value[0])
+          }
+        />
+        <ControlSlider
+          label="Shadow Offset X"
+          min={-20}
+          max={20}
+          step={1}
+          value={[svgSettings.innerShadowX]}
+          onValueChange={(value) => updateSvgSetting("innerShadowX", value[0])}
+        />
+        <ControlSlider
+          label="Inner Shadow Offset Y"
+          min={-20}
+          max={20}
+          step={1}
+          value={[svgSettings.innerShadowY]}
+          onValueChange={(value) => updateSvgSetting("innerShadowY", value[0])}
+        />
+      </ControlGroup>
       <ControlGroup label="Icon Dimensions">
         <ControlSlider
           label="Icon Size"

diff --git a/src/store/useStore.ts b/src/store/useStore.ts
@@ -31,7 +31,11 @@ export const defaultSvgSettings: SvgSettings = {
   skewX: 0,
   skewY: 0,
   iconBlur: 0,
-  backgroundBlur: 0
+  backgroundBlur: 0,
+  innerShadowColor: "#0A0B0B",
+  innerShadowBlur: 3,
+  innerShadowX: 2,
+  innerShadowY: 3
 };
 
 const initialState: State = {

diff --git a/src/types.ts b/src/types.ts
@@ -25,4 +25,8 @@ export type SvgSettings = {
   skewY: number;
   iconBlur: number;
   backgroundBlur: number;
+  innerShadowColor: string;
+  innerShadowBlur: number;
+  innerShadowX: number;
+  innerShadowY: number;
 };