feat: save file and bump version

Author: zmh-program

package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-whois-ui",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/lib/env.ts

@@ -1,4 +1,4 @@
-export const VERSION = "0.0.2";
+export const VERSION = "0.1.0";
 
 export const HISTORY_LIMIT: number = intEnv("NEXT_PUBLIC_HISTORY_LIMIT", 6);
 // The maximum number of history items to keep in the local storage

src/lib/utils.ts

@@ -12,6 +12,22 @@ export function isEnter(e: React.KeyboardEvent) {
   return e.key === "Enter" && e.keyCode !== 229;
 }
 
+export function saveAsFile(filename: string, content: string) {
+  /**
+   * Save text as file
+   * @param filename Filename
+   * @param content File content
+   * @example
+   * saveAsFile("hello.txt", "Hello world!");
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/Blob
+   */
+
+  const a = document.createElement("a");
+  a.href = URL.createObjectURL(new Blob([content]));
+  a.download = filename;
+  a.click();
+}
+
 async function copyClipboard(text: string) {
   if (navigator.clipboard && navigator.clipboard.writeText) {
     return await navigator.clipboard.writeText(text);
@@ -51,6 +67,19 @@ export function useClipboard() {
   };
 }
 
+export function useSaver() {
+  return (filename: string, content: string) => {
+    try {
+      saveAsFile(filename, content);
+      toast("Saved!");
+    } catch (e) {
+      console.error(e);
+
+      toast(`Failed to save: ${toErrorMessage(e)}`);
+    }
+  };
+}
+
 export function toSearchURI(query: string) {
   const q = query.trim();
   return q ? `/${encodeURIComponent(q)}` : "/";

src/pages/[query].tsx

@@ -5,6 +5,7 @@ import {
   toReadableISODate,
   toSearchURI,
   useClipboard,
+  useSaver,
 } from "@/lib/utils";
 import { NextPageContext } from "next";
 import { Input } from "@/components/ui/input";
@@ -14,6 +15,7 @@ import {
   CircleX,
   CopyIcon,
   CornerDownRight,
+  DownloadIcon,
   ExternalLink,
   Link2,
   Loader2,
@@ -379,6 +381,7 @@ function ResultTable({ result, target }: ResultTableProps) {
 
 function ResultComp({ data, target }: Props) {
   const copy = useClipboard();
+  const save = useSaver();
   const { status, result, error, time } = data;
 
   return (
@@ -416,10 +419,23 @@ function ResultComp({ data, target }: Props) {
                 <Button
                   variant={`outline`}
                   size={`icon-sm`}
+                  className={`mr-1`}
                   onClick={() => copy(result?.rawWhoisContent || "")}
                 >
                   <CopyIcon className={`w-3 h-3`} />
                 </Button>
+                <Button
+                  variant={`outline`}
+                  size={`icon-sm`}
+                  onClick={() =>
+                    save(
+                      `${target.replace(/\./g, "-")}-whois.txt`,
+                      result?.rawWhoisContent || "",
+                    )
+                  }
+                >
+                  <DownloadIcon className={`w-3 h-3`} />
+                </Button>
               </div>
               <TextArea
                 rows={10}