changing brush width

Author: iEranDEV

src/components/AccessibilityButton.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 type AccessibilityButtonProps = {
     name: string,
@@ -9,11 +9,28 @@ type AccessibilityButtonProps = {
 function AccessibilityButton({ name, icon, modal }: AccessibilityButtonProps ) {
     const [active, setActive] = useState(false);
 
+    useEffect(() => {
+        if(!active) return;
+
+        const handleModal = () => {
+            setActive(false);
+        }
+
+        window.addEventListener("click", handleModal);
+        return () => window.removeEventListener("click", handleModal);
+    }, [active]);
+
+    const handleIconClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if(modal) setActive(!active);
+    }
+
     return (
-        <div>
-            <div onClick={() => modal && setActive(!active)} className="relative">
+        <div className="relative">
+            <div onClick={(e) => handleIconClick(e)} className="relative">
                 <span className="peer">{icon}</span>
-                <p className={(!active && 'peer-hover:visible peer-hover:h-6') + ' duration-75 delay-100 h-0 invisible w-max flex justify-center items-center transition-all text-center left-1/2 absolute bg-neutral-700/70 text-neutral-50 px-3 rounded-lg -translate-x-1/2 translate-y-2'}>
+                <p className={(!active && 'peer-hover:visible peer-hover:h-6') + ' duration-75 delay-700 h-0 invisible w-max flex justify-center items-center transition-all text-center left-1/2 absolute bg-neutral-700/70 text-neutral-50 px-3 rounded-lg -translate-x-1/2 translate-y-2'}>
                     <span className="text-sm">{name}</span>    
                 </p>
             </div>

src/components/modals/LineWidthModal.tsx

@@ -1,14 +1,30 @@
+import { useEffect, useRef } from "react";
+
 type LineWidthModalProps = {
     brush: {type: string, width: number, color: string},
     setBrush: Function
 }
 
 function LineWidthModal({ brush, setBrush }: LineWidthModalProps) {
 
+    const handleClick = (val: number) => {
+        setBrush({type: brush.type, width: val, color: brush.color});
+    }
 
     return (
-        <div className="absolute bg-neutral-100 border border-neutral-300 p-2 -translate-x-1/2 left-0">
-            test
+        <div className="animate-slideFromTop absolute w-max bg-white border border-neutral-300 p-2 left-1/2 rounded-lg">
+            {[1,3,5,8].map((val) => {
+                return (
+                    <div onClick={() => handleClick(val)} key={val} className={(brush.width === val && 'bg-neutral-100') + ' hover:bg-neutral-100 py-2 px-3 rounded-lg text-xs flex justify-center items-center gap-4 relative'}>
+                        <span>{val}px</span>
+                        <div className="w-16 bg-neutral-700" style={{height: val + 'px'}}></div>
+
+                        {brush.width === val && <>
+                            <div className="absolute h-3 rounded-lg w-1 bg-indigo-600 left-0 -translate-x-1/2"></div>
+                        </>}
+                    </div>
+                )
+            })}
         </div>
     )
 }

src/index.css

@@ -16,4 +16,8 @@
 
 .icon-accessibility {
 	@apply h-6 w-6 cursor-pointer hover:text-neutral-800;
+}
+
+* {
+	@apply select-none;
 }

tailwind.config.js

@@ -4,7 +4,17 @@ module.exports = {
 		"./src/**/*.{js,jsx,ts,tsx}",
 	],
 	theme: {
-		extend: {},
+		extend: {
+			keyframes: {
+				slideFromTop: {
+					'0%': { transform: 'translate(-50%, -10px)', opacity: '50%' },
+					'100%': { transform: 'translate(-50%, 5px)', opacity: '100%' }
+				}
+			},
+			animation: {
+				slideFromTop: 'slideFromTop 0.1s linear forwards',
+			}
+		},
 	},
 	plugins: [],
 }