Fix: hydration issue

Author: Akalanka47000

src/components/operations/export-button.tsx

@@ -1,11 +1,10 @@
 import { useState } from "react";
 import { Copy } from "lucide-react";
 import { twMerge } from "tailwind-merge";
-import { useBreakpoint } from "@/hooks";
 import { ISTKData } from "@/types";
 import { IStyles } from "@/types/styles";
 import { stateToJSON } from "@/utils";
-import { Button, IconButton } from "../core";
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from "../core";
 
 interface IExportActionProps {
   text?: string;
@@ -15,7 +14,6 @@ interface IExportActionProps {
 
 const ExportAction: React.FC<IExportActionProps> = ({ text = "Export JSON", onExport, styles }) => {
   const [loading, setLoading] = useState(false);
-  const { md } = useBreakpoint();
 
   const onExportJson = () => {
     const json = stateToJSON();
@@ -34,29 +32,21 @@ const ExportAction: React.FC<IExportActionProps> = ({ text = "Export JSON", onEx
     }
   };
 
-  if (md)
-    return (
-      <Button
-        loading={loading}
-        className={twMerge(styles?.core?.button?.className)}
-        style={styles?.core?.button?.properties}
-        onClick={onExportJson}
-        variant="secondary"
-      >
-        {text}
-      </Button>
-    );
-
   return (
-    <IconButton
-      icon={<Copy className="w-5 h-5" />}
-      label={text}
-      onClick={onExportJson}
-      loading={loading}
-      className={twMerge("w-10", styles?.core?.button?.className)}
-      style={styles?.core?.button?.properties}
-      variant="secondary"
-    />
+    <Tooltip>
+      <TooltipTrigger>
+        <Button
+          loading={loading}
+          className={twMerge("w-10 md:w-auto px-2 md:px-4 transition-none", styles?.core?.button?.className)}
+          style={styles?.core?.button?.properties}
+          onClick={onExportJson}
+          variant="secondary"
+        >
+          <Copy className="w-5 h-5 md:hidden" /> <span className="hidden md:block">{text}</span>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent className="md:hidden">{text}</TooltipContent>
+    </Tooltip>
   );
 };
 

src/hooks/breakpoint.ts

@@ -1,4 +1,3 @@
-export { default as useBreakpoint } from "./breakpoint";
 export { default as useInteractions } from "./interactions";
 export { default as useResize } from "./resize";
 export { default as useSkipFirstRender } from "./skip-first-render";