Referral letter preview desktop

src/CAREUI/misc/PrintPreview.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from "react";
+import { ReactNode, useState, useEffect } from "react";
 import ButtonV2 from "@/components/Common/components/ButtonV2";
 import CareIcon from "../icons/CareIcon";
 import { classNames } from "../../Utils/utils";
 import Page from "@/components/Common/components/Page";
-import useBreakpoints from "@/common/hooks/useBreakpoints";
 import { useTranslation } from "react-i18next";
 import { ZoomControls, ZoomProvider, ZoomTransform } from "../interactive/Zoom";
 
@@ -14,31 +13,57 @@ type Props = {
   title: string;
 };
 
-export default function PrintPreview(props: Props) {
-  const normalScale = useBreakpoints({ default: 0.44, md: 1 });
+export default function PrintPreview({
+  children,
+  disabled,
+  className,
+  title,
+}: Props) {
   const { t } = useTranslation();
+  const [scale, setScale] = useState(1);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 640) {
+        setScale(0.44);
+      } else if (window.innerWidth < 1024) {
+        setScale(0.7);
+      } else {
+        setScale(1);
+      }
+    };
+
+    handleResize();
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
 
   return (
-    <Page title={props.title}>
-      <div className="mx-auto my-8 w-[50rem]">
-        <div className="top-0 z-20 flex gap-2 bg-secondary-100 px-2 py-4 xl:absolute xl:right-6 xl:top-8 xl:justify-end">
-          <ButtonV2 disabled={props.disabled} onClick={print}>
-            <CareIcon icon="l-print" className="text-lg" />
-            {t("print")}
+    <Page title={title}>
+      <div className="mx-auto my-4 w-full max-w-3xl px-4 sm:my-6 md:my-8">
+        <div className="mb-4 flex justify-end sm:mb-6 md:absolute md:right-6 md:top-12">
+          <ButtonV2 disabled={disabled} onClick={() => window.print()}>
+            <CareIcon icon="l-print" className="mr-2 text-lg" />
+            <span className="hidden sm:inline">{t("print")}</span>
           </ButtonV2>
         </div>
 
-        <ZoomProvider initialScale={normalScale}>
-          <ZoomTransform className="origin-top-left bg-white p-10 text-sm shadow-2xl transition-all duration-200 ease-in-out lg:origin-top print:transform-none">
+        <ZoomProvider initialScale={scale}>
+          <ZoomTransform className="origin-top-left bg-white p-4 text-sm shadow-lg transition-all duration-200 ease-in-out sm:p-6 md:p-8 lg:p-10 lg:shadow-2xl print:transform-none">
             <div
               id="section-to-print"
-              className={classNames("w-full", props.className)}
+              className={classNames("w-full", className)}
             >
-              {props.children}
+              {children}
             </div>
           </ZoomTransform>
 
-          <ZoomControls disabled={props.disabled} />
+          <div className="mt-4 sm:mt-6">
+            <ZoomControls disabled={disabled} />
+          </div>
         </ZoomProvider>
       </div>
     </Page>