feat: reset button for filters

Pettor · Feb 27, 2024 · c948ab1 · c948ab1
1 parent 5954e67
commit c948ab1
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/src/components/library/editor/drawer/FilterDrawer.stories.tsx b/src/components/library/editor/drawer/FilterDrawer.stories.tsx
@@ -18,6 +18,9 @@ const commonProps = {
   contrast: 1,
   saturation: 1,
   pixelate: 0,
+  red: 0,
+  green: 0,
+  blue: 0,
   onFilterChange: () => console.log("onFilterChange"),
   onClose: () => console.log("onClose"),
 } satisfies ComponentProps;

diff --git a/src/components/library/editor/drawer/FilterDrawer.tsx b/src/components/library/editor/drawer/FilterDrawer.tsx
@@ -54,24 +54,23 @@ export function FilterDrawer({
           </div>
           <div className="divider divider-vertical h-1/2" />
           <li className="flex gap-2">
-            <span className="menu-title text-base font-bold my-2 flex flex-row gap-2">
+            <button className="text-base font-bold my-2" onClick={() => onFilterChange({ brightness: 1 })}>
               <SunHighIcon />
               Brightness
-            </span>
+            </button>
             <input
               type="range"
               min="0"
               max="2"
               step="0.1"
               value={brightness}
               onChange={(e) => onFilterChange({ brightness: Number(e.target.value) })}
-              onDoubleClick={() => onFilterChange({ brightness: 1 })}
               className="range range-primary"
             />
-            <span className="menu-title text-base font-bold flex flex-row gap-2">
+            <button className="text-base font-bold" onClick={() => onFilterChange({ contrast: 1 })}>
               <ContrastIcon />
               Contrast
-            </span>
+            </button>
             <input
               type="range"
               min="0"
@@ -81,10 +80,10 @@ export function FilterDrawer({
               onChange={(e) => onFilterChange({ contrast: Number(e.target.value) })}
               className="range range-secondary"
             />
-            <span className="menu-title text-base font-bold flex flex-row gap-2">
+            <button className="text-base font-bold" onClick={() => onFilterChange({ saturation: 1 })}>
               <DropletIcon />
               Saturation
-            </span>
+            </button>
             <input
               type="range"
               min="0"
@@ -97,7 +96,9 @@ export function FilterDrawer({
           </li>
           <li className="divider divider-vertical h-1/2 mt-8" />
           <li className="flex gap-4">
-            <span className="menu-title text-base font-bold flex flex-row gap-2">RGB</span>
+            <button className="text-base font-bold" onClick={() => onFilterChange({ red: 1, green: 1, blue: 1 })}>
+              RGB
+            </button>
             <input
               type="range"
               min="0"
@@ -128,10 +129,10 @@ export function FilterDrawer({
           </li>
           <li className="divider divider-vertical h-1/2 mt-8" />
           <li className="flex gap-2">
-            <span className="menu-title text-base font-bold flex flex-row gap-2">
+            <button className="text-base font-bold" onClick={() => onFilterChange({ blur: 0 })}>
               <BlurIcon />
               Blur
-            </span>
+            </button>
             <input
               type="range"
               min="0"
@@ -141,10 +142,10 @@ export function FilterDrawer({
               onChange={(e) => onFilterChange({ blur: Number(e.target.value) })}
               className="range range-warning"
             />
-            <span className="menu-title text-base font-bold flex flex-row gap-2">
+            <button className="text-base font-bold" onClick={() => onFilterChange({ pixelate: 0 })}>
               <PixelateIcon />
               Pixelate
-            </span>
+            </button>
             <input
               type="range"
               min="0"