add toast for clipboard

package.json

@@ -28,12 +28,14 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "lucide-react": "^0.364.0",
+    "next-themes": "^0.3.0",
     "node-xlsx": "^0.24.0",
     "nzh": "^1.0.12",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sharp": "^0.33.3",
+    "sonner": "^1.4.41",
     "swr": "^2.2.5",
     "tailwind-merge": "^2.2.2",
     "tailwindcss": "^3.4.3",

src/components/address-to-english-input.tsx

@@ -3,6 +3,7 @@ import { cn } from "@/utils/cn.ts";
 import type { AddressToEnglishJson } from "@/utils/get-address-data-json";
 import { translateAddressToEnglish } from "@/utils/translate-address-to-english";
 import { useDeferredValue, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
 import useSWR from "swr";
 
 export const AddressToEnglishInput = () => {
@@ -94,14 +95,20 @@ export const AddressToEnglishInput = () => {
       />
       {result && (
         <div className="flex items-center gap-2 justify-center">
-          <button
+          <a
             className="text-blue-500 underline"
-            onClick={async () =>
-              await navigator.clipboard.writeText(location.href)
-            }
+            href={location.href}
+            onClick={async (e) => {
+              e.preventDefault();
+              await navigator.clipboard
+                .writeText(location.href)
+                .catch((e) => toast.error(String(e)));
+
+              toast.success("已複製連結到剪貼簿");
+            }}
           >
             複製連結
-          </button>
+          </a>
           <a
             href={`https://www.google.com/maps/search/${encodeURIComponent(result)}`}
             target="_blank"

src/components/ui/sonner.tsx

@@ -0,0 +1,29 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

src/layouts/base-layout.astro

@@ -7,6 +7,7 @@ import logo from "@/assets/logo.png";
 import { cn } from "@/utils/cn";
 import { TranslateFunction } from "@/utils/language";
 import { createTranslation } from "../utils/language";
+import { Toaster } from "../components/ui/sonner";
 
 interface Props {
   title: string;
@@ -85,5 +86,6 @@ const themeScript = `!function e(){let t=localStorage.getItem("theme");!t&&windo
   </body>
   <div class={cn("mb-8 md:mb-4 container", className)}>
     <slot />
+    <Toaster client:idle />
   </div>
 </html>