feat: support-icon-placement-in-copiable-component

Author: tractorss

src/examples/copiable.tsx

@@ -4,7 +4,9 @@ import { Tooltip } from "../lib";
 
 const CopiableExample: React.FC = () => (
   <>
-    <Copiable copiableContent="Copied text">Copiable text</Copiable>
+    <Copiable copiableContent="Copied text" iconPlacement="left">
+      Copiable text
+    </Copiable>
     <Copiable
       copiableContent="0xbe8d95497E53aB41d5A45CC8def90d0e59b49f99"
       info="Copy Address"

src/lib/copiable/index.tsx

@@ -7,13 +7,16 @@ import Copied from "../../assets/svgs/copiable/copied.svg";
 interface CopiableBaseProps {
   copiableContent: string;
   info?: string;
+  iconPlacement?: "left" | "right";
 }
 
-const Wrapper = styled.div`
+const Wrapper = styled.div<{ iconPlacement: string }>`
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 8px;
+  flex-direction: ${({ iconPlacement }) =>
+    iconPlacement === "left" ? "row-reverse" : "row"};
 `;
 
 const StyledTooltip = styled(Tooltip)`
@@ -46,6 +49,7 @@ const Copiable: React.FC<CopiableProps> = ({
   info,
   children,
   tooltipProps,
+  iconPlacement = "right",
   ...props
 }) => {
   const [isCopied, setIsCopied] = useState(false);
@@ -61,7 +65,7 @@ const Copiable: React.FC<CopiableProps> = ({
   };
 
   return (
-    <Wrapper {...props}>
+    <Wrapper {...props} iconPlacement={iconPlacement}>
       {children}
       <StyledTooltip
         text={isCopied ? "Copied!" : `${info ?? "Copy"}`}