From 6dc2be997e08d1b52df80aef662fd19eb7935c10 Mon Sep 17 00:00:00 2001
From: isrark005 <isrark005@gmail.com>
Date: Sun, 17 Nov 2024 22:36:30 +0530
Subject: [PATCH] optimized aporach for adding size

---
 src/App.tsx                  | 18 +++++++++---------
 src/components/ui/Button.tsx | 16 +++++++++-------
 src/icons/PlusIcon.tsx       |  4 ++--
 src/icons/ShareIcon.tsx      |  4 ++--
 4 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 8839c2f..2b9d0fc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,26 +9,26 @@ function App() {
     <>
       <Button 
         variant={"primary"}
-        startIcon={<PlusIcon size={"lg"} />} 
-        endIcon={<ShareIcon size={"lg"} />} 
-        size="lg" 
+        startIcon={<PlusIcon />} 
+        endIcon={<ShareIcon />} 
+        size="sm" 
         title={"Share"}
       ></Button>
 
 <Button 
         variant={"secondary"}
-        startIcon={<PlusIcon size={"lg"} />} 
-        endIcon={<ShareIcon size={"lg"} />} 
-        size="lg" 
+        startIcon={<PlusIcon />} 
+        endIcon={<ShareIcon  />} 
+        size="md" 
         title={"Share"}
       ></Button>
 
 
       <Button 
         variant={"primary"}
-        startIcon={<PlusIcon size={"sm"} />} 
-        endIcon={<ShareIcon size={"sm"} />} 
-        size="sm" 
+        startIcon={<PlusIcon/>} 
+        endIcon={<ShareIcon />} 
+        size="lg" 
         title={"Share"}
       ></Button>
     </>
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index 06ba4fc..0dddea6 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import React, { ReactElement } from "react";
 
 interface ButtonInterface {
     title: string;
@@ -19,15 +19,17 @@ const variantStyles = {
     "secondary": "bg-purple-400 text-purple-600",
 }
 
-export function Button(props: ButtonInterface) {
+export function Button({startIcon, size, endIcon, title, variant}: ButtonInterface) {
+    const StartIconWithProps = startIcon ? React.cloneElement(startIcon, { size }) : null;
+    const EndIconWithProps = endIcon ? React.cloneElement(endIcon, { size }) : null;
 
-    return <button className={sizeStyles[props.size] + " " + variantStyles[props.variant]}>
-        <div className="flex">
-            {props.startIcon}
+    return <button className={sizeStyles[size] + " " + variantStyles[variant]}>
+        <div className="flex items-center">
+            {StartIconWithProps}
             <div className="pl-2 pr-2">
-                {props.title}
+                {title}
             </div>
-            {props.endIcon}
+            {EndIconWithProps}
         </div>
     </button>
 }
diff --git a/src/icons/PlusIcon.tsx b/src/icons/PlusIcon.tsx
index b4beaef..8347966 100644
--- a/src/icons/PlusIcon.tsx
+++ b/src/icons/PlusIcon.tsx
@@ -1,6 +1,6 @@
 
 interface PlusIconProps {
-    size: "sm" | "md" | "lg"
+    size?: "sm" | "md" | "lg"
 }
 
 const sizeVariants = {
@@ -10,7 +10,7 @@ const sizeVariants = {
 }
 
 export function PlusIcon(props: PlusIconProps) {
-    return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={sizeVariants[props.size]}>
+    return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={props.size ? sizeVariants[props.size] : ''}>
     <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
   </svg>  
 }
\ No newline at end of file
diff --git a/src/icons/ShareIcon.tsx b/src/icons/ShareIcon.tsx
index 45b3b72..1cec0df 100644
--- a/src/icons/ShareIcon.tsx
+++ b/src/icons/ShareIcon.tsx
@@ -1,6 +1,6 @@
 
 interface ShareIconProps {
-    size: "sm" | "md" | "lg"
+    size?: "sm" | "md" | "lg"
 }
 
 const sizeVariants = {
@@ -11,7 +11,7 @@ const sizeVariants = {
 
 
 export function ShareIcon(props: ShareIconProps) {
-    return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={sizeVariants[props.size]}>
+    return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={props.size ? sizeVariants[props.size] : ''}>
     <path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z" />
   </svg>