white spaces removed

Author: charu1603

app/page.tsx

@@ -91,7 +91,8 @@ const exportPng = async () => {
 
 
     <SelectBackground background={background} setBackground={setBackground} />
-    <SelectPadding paddings={paddings} currentPadding={currentPadding} setCurrentPadding={setCurrentPadding} />
+    <SelectPadding currentPadding={currentPadding} setCurrentPadding={setCurrentPadding} />
+
     <div className="export-btn pt-2">
       <button
         className="flex items-center gap-1 py-1 px-2 bg-blue-400 rounded-md text-sm text-blue-400 
@@ -127,7 +128,8 @@ const exportPng = async () => {
 
 
         <SelectBackground background={background} setBackground={setBackground} />
-        <SelectPadding paddings={paddings} currentPadding={currentPadding} setCurrentPadding={setCurrentPadding} />
+        <SelectPadding currentPadding={currentPadding} setCurrentPadding={setCurrentPadding} />
+
         <div className="export-btn self-center ml-auto pt-4">
           <button
             className="flex items-center gap-3 py-2 px-3 bg-blue-400 rounded-md text-sm text-blue-400 

components/SelectPadding.tsx

@@ -1,44 +1,39 @@
 "use client";
-import React from "react";
+import React, { useState } from "react";
 
 interface SelectPaddingProps {
-  paddings: string[];
   currentPadding: string;
   setCurrentPadding: (padding: string) => void;
 }
 
-function SelectPadding({
-  paddings,
-  currentPadding,
-  setCurrentPadding,
-}: SelectPaddingProps) {
-  const changePadding = (newPadding: string) => {
-    setCurrentPadding(newPadding);
+function SelectPadding({ currentPadding, setCurrentPadding }: SelectPaddingProps) {
+  // Handler to update padding value
+  const changePadding = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+
+    // Ensure the padding stays within 0 and 4rem (40px)
+    if (parseFloat(value) >= 0 && parseFloat(value) <= 4) {
+      setCurrentPadding(`${value}rem`);
+    }
   };
 
   return (
     <div>
-      <p className="py-[10px] text-sm font-medium">Padding Selector</p>
-      <div className="flex flex-wrap gap-2 pb-2">
-        {paddings.map((padding, i) => {
-          return (
-            <button
-              key={i}
-              onClick={() => changePadding(padding)}
-              className={`h-[37px]  flex flex-col justify-center text-sm px-2 cursor-pointer
-                ${
-                  currentPadding === padding &&
-                  "bg-[#3C3C3C] text-white rounded-md"
-                } hover:text-white ease-linear transition-all duration-300
-              `}
-            >
-              {padding}
-            </button>
-          );
-        })}
+      <p className="py-[10px] text-sm font-medium">Padding (0 - 4 rem)</p>
+      <div className="flex items-center gap-2 pb-2">
+        <input
+          type="number"
+          step="0.1" // Allow decimal steps like 0.5rem
+          min="0"
+          max="4"
+          value={parseFloat(currentPadding)} // Convert 'rem' string to a number for the input value
+          onChange={changePadding}
+          className="h-[37px] w-[80px] px-2 text-sm bg-gray-200 rounded-md text-black focus:outline-none"
+        />
+        <span className="text-sm">rem</span>
       </div>
     </div>
   );
 }
 
-export default SelectPadding;
+export default SelectPadding;