Dev

__tests__/components/snippng_control_header.test.tsx

@@ -28,7 +28,6 @@ describe("SnippngControlHeader", () => {
       render(<SnippngControlHeader />);
     });
     await waitFor(() => {
-      screen.getByTestId("download-cta");
       screen.getByTestId("wrapper-color-picker");
       screen.getByTestId("settings-cta");
     });

components/editor/SnippngCodeArea.tsx

@@ -106,7 +106,7 @@ const SnippngCodeArea = () => {
         data-testid="snippng-code-area"
       >
         <NoSSRWrapper>
-          <div className="rounded-md bg-white dark:bg-zinc-900 p-8 flex justify-center border-[1px] flex-col items-center dark:border-zinc-500 border-zinc-200 shadow-md w-full">
+          <div className="rounded-md bg-white dark:bg-zinc-900 md:p-8 p-4 flex justify-center border-[1px] flex-col items-center dark:border-zinc-500 border-zinc-200 shadow-md w-full">
             <div className="w-full">
               <SnippngControlHeader />
             </div>

components/editor/SnippngControlHeader.tsx

@@ -1,7 +1,8 @@
 import { useSnippngEditor } from "@/context/SnippngEditorContext";
 import { useToast } from "@/context/ToastContext";
 import { ColorPicker } from "@/lib/color-picker";
-import { LANGUAGES, THEMES } from "@/lib/constants";
+import { DOWNLOAD_OPTIONS, LANGUAGES, THEMES } from "@/lib/constants";
+import { SelectOptionInterface } from "@/types";
 import { getEditorWrapperBg } from "@/utils";
 import { Menu, Transition } from "@headlessui/react";
 import {
@@ -20,8 +21,6 @@ import Range from "../form/Range";
 import Select from "../form/Select";
 
 const SnippngControlHeader = () => {
-  const [downloadingSnippet, setDownloadingSnippet] = useState(false);
-
   const { editorConfig, handleConfigChange } = useSnippngEditor();
   const { addToast } = useToast();
 
@@ -44,39 +43,48 @@ const SnippngControlHeader = () => {
     snippetsName,
   } = editorConfig;
 
-  const downloadImage = () => {
+  const downloadImage = (type: SelectOptionInterface) => {
     var node = document.getElementById("code-wrapper");
     if (!node) return;
-    setDownloadingSnippet(true);
-    htmlToImage
-      .toPng(node)
+    (() => {
+      switch (type.id) {
+        case "png":
+          return htmlToImage.toPng(node);
+        case "jpeg":
+          return htmlToImage.toJpeg(node);
+        case "svg":
+          return htmlToImage.toSvg(node);
+        default:
+          return htmlToImage.toPng(node);
+      }
+    })()
       .then((dataUrl) => {
         const a = document.createElement("a");
         a.href = dataUrl;
         a.download = snippetsName
-          ? `${snippetsName.split(" ").join("_").toLowerCase()}.png`
-          : "snippng.png";
+          ? `${snippetsName.split(" ").join("_").toLowerCase()}.${
+              type.id || "png"
+            }`
+          : "snippng." + (type.id || "png");
         a.click();
       })
       .catch((error) => {
         console.error("oops, something went wrong!", error);
-      })
-      .finally(() => {
-        setDownloadingSnippet(false);
+        addToast({
+          message: "Error while downloading the image",
+          type: "error",
+        });
       });
   };
 
   return (
     <div className="mb-4 flex flex-wrap w-full justify-start items-center gap-2">
-      <Button
-        className="md:w-fit w-full"
-        data-testid="download-cta"
-        disabled={downloadingSnippet}
-        StartIcon={CloudArrowDownIcon}
-        onClick={downloadImage}
-      >
-        {downloadingSnippet ? "Downloading..." : "Download"}
-      </Button>
+      <Select
+        Icon={CloudArrowDownIcon}
+        value={{ label: "Download", id: "download" }}
+        onChange={downloadImage}
+        options={[...DOWNLOAD_OPTIONS]}
+      />
 
       <Select
         Icon={SparklesIcon}
@@ -98,7 +106,7 @@ const SnippngControlHeader = () => {
       />
       <div
         data-testid="wrapper-color-picker"
-        className="relative md:w-fit w-full"
+        className="relative lg:w-fit w-full flex lg:justify-start justify-end items-center gap-2"
       >
         <ColorPicker
           color={wrapperBg}
@@ -126,19 +134,20 @@ const SnippngControlHeader = () => {
             }}
           ></button>
         </ColorPicker>
-      </div>
-      <Button
-        onClick={() => {
-          if (!navigator) return;
-          navigator.clipboard.writeText(code).then(() => {
-            addToast({
-              message: "Code snippet copied!",
+        <Button
+          onClick={() => {
+            if (!navigator) return;
+            navigator.clipboard.writeText(code).then(() => {
+              addToast({
+                message: "Code snippet copied!",
+              });
             });
-          });
-        }}
-      >
-        <DocumentDuplicateIcon className="h-5 w-5 dark:text-white text-zinc-900" />
-      </Button>
+          }}
+        >
+          <DocumentDuplicateIcon className="h-5 w-5 dark:text-white text-zinc-900" />
+        </Button>
+      </div>
+
       <div className="ml-auto">
         <Menu as="div" className="relative inline-block text-left">
           <div>

components/form/Select.tsx

@@ -29,7 +29,7 @@ const Select: React.FC<SelectComponentProps> = ({
     >
       {({ open }) => (
         <>
-          <div className="relative w-full max-w-xs">
+          <div className="relative w-full lg:max-w-[250px]">
             <Listbox.Button className="py-1.5 inline-flex dark:bg-black dark:hover:bg-zinc-800 hover:bg-zinc-100 bg-white items-center text-sm px-3 rounded-sm outline outline-[1px] dark:outline-zinc-400 outline-zinc-300 w-full dark:text-white text-zinc-900">
               {Icon ? (
                 <Icon className="h-4 w-4 text-zinc-900 dark:text-white mr-2" />
@@ -61,7 +61,7 @@ const Select: React.FC<SelectComponentProps> = ({
                         active
                           ? "dark:text-white text-zinc-900 dark:bg-zinc-600 bg-zinc-100"
                           : "",
-                        "relative cursor-default dark:text-white text-zinc-900 select-none py-2 pl-3 pr-9 hover:dark:bg-zinc-600 hover:bg-zinc-100"
+                        "relative cursor-pointer dark:text-white text-zinc-900 select-none py-2 pl-3 pr-9 hover:dark:bg-zinc-600 hover:bg-zinc-100"
                       )
                     }
                     value={option}

lib/constants.ts

@@ -438,6 +438,12 @@ export const LANGUAGES = [
   },
 ];
 
+export const DOWNLOAD_OPTIONS = [
+  { label: "PNG", id: "png" },
+  { label: "JPEG", id: "jpeg" },
+  { label: "SVG", id: "svg" },
+];
+
 export const DEFAULT_CODE_SNIPPET = `export const debounce = <F extends (...args: any[]) => any>(func: F, waitFor: number) => {
   let timeout: NodeJS.Timeout | null = null;