From 09ad82a1862b2c895dd5409d1bfff9cd7785679f Mon Sep 17 00:00:00 2001
From: hanadi92 <hanadi.tamimi@gmail.com>
Date: Mon, 14 Apr 2025 23:12:06 +0300
Subject: [PATCH] feat: customize border thickness

---
 src/app/globals.css | 25 +++++++++++++++++++++++++
 src/app/page.tsx    | 36 ++++++++++++++++++++++++++++--------
 2 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index b5c61c9..535ebd8 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,3 +1,28 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer utilities {
+    .slider-thumb {
+        @apply appearance-none w-full h-2 rounded-lg bg-gray-200 cursor-pointer;
+    }
+
+    .slider-thumb::-webkit-slider-thumb {
+        @apply w-5 h-5 bg-gray-800 hover:bg-gray-600 rounded-full cursor-pointer border-none;
+    }
+
+    .slider-thumb::-moz-range-thumb {
+        @apply w-5 h-5 bg-gray-800 hover:bg-gray-600 rounded-full cursor-pointer border-none;
+    }
+
+    /* Larger thumb size for mobile devices */
+    @media (max-width: 768px) {
+        .slider-thumb::-webkit-slider-thumb {
+            @apply w-7 h-7;
+        }
+
+        .slider-thumb::-moz-range-thumb {
+            @apply w-7 h-7;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index cd7537c..890ccaa 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -22,6 +22,7 @@ export default function Home() {
   const [filePostfix, setFilePostfix] = useState<
     SocialPlatform | 'user-upload'
   >();
+  const [borderThickness, setBorderThickness] = useState(15);
 
   useEffect(() => {
     const isInstagramBrowser = /Instagram/i.test(navigator.userAgent);
@@ -104,6 +105,7 @@ export default function Home() {
 
   const startOver = async () => {
     setUserImageUrl(undefined);
+    setBorderThickness(15);
   };
 
   return (
@@ -166,10 +168,10 @@ export default function Home() {
                   height={100}
                   style={{
                     position: 'absolute',
-                    width: '85%',
-                    height: '85%',
-                    left: '7.5%',
-                    top: '7.5%',
+                    width: `${100 - borderThickness}%`,
+                    height: `${100 - borderThickness}%`,
+                    left: `${borderThickness / 2}%`,
+                    top: `${borderThickness / 2}%`,
                   }}
                   className="object-cover rounded-full cursor-wait"
                 />
@@ -182,10 +184,10 @@ export default function Home() {
                   height={100}
                   style={{
                     position: 'absolute',
-                    width: '85%',
-                    height: '85%',
-                    left: '7.5%',
-                    top: '7.5%',
+                    width: `${100 - borderThickness}%`,
+                    height: `${100 - borderThickness}%`,
+                    left: `${borderThickness / 2}%`,
+                    top: `${borderThickness / 2}%`,
                   }}
                   className="object-cover rounded-full cursor-pointer"
                 />
@@ -193,6 +195,24 @@ export default function Home() {
             </div>
           </div>
         </div>
+        <div className="my-4">
+          <label
+            htmlFor="borderRange"
+            className="block text-xs font-normal text-gray-500 mb-2"
+          >
+            Border Thickness: <span>{borderThickness}%</span>
+          </label>
+          <input
+            id="borderRange"
+            type="range"
+            min="5"
+            max="25"
+            step="1"
+            value={borderThickness}
+            onChange={(e) => setBorderThickness(parseInt(e.target.value))}
+            className="slider-thumb"
+          />
+        </div>
         <div>
           {userImageUrl ? (
             <>