support batch translation

Author: kane50613

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

@@ -1,17 +1,23 @@
+import { Copy, Loader2, MapIcon } from "lucide-react";
+import nzh from "nzh/hk";
 import { useDeferredValue, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import useSWR from "swr";
 import { Textarea } from "~/components/ui/textarea";
 import { cn } from "~/utils/cn.ts";
 import type { AddressToEnglishJson } from "~/utils/get-address-data-json";
-import { translateAddressToEnglish } from "~/utils/translate-address-to-english";
+import {
+  type TranslateAddressToEnglish,
+  translateAddressToEnglish,
+} from "~/utils/translate-address-to-english";
+import { Button } from "./ui/button";
+import { ButtonGroup } from "./ui/button-group";
 
 export const AddressToEnglishInput = () => {
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
   const [value, setValue] = useState("");
-  const [result, setResult] = useState<string>();
-  const [isValid, setIsValid] = useState(true);
+  const [result, setResult] = useState<TranslateAddressToEnglish[]>([]);
 
   const deferredValue = useDeferredValue(value.trim());
 
@@ -30,40 +36,36 @@ export const AddressToEnglishInput = () => {
 
       const address = searchParams.get("address");
 
-      if (address) setValue(address);
+      if (address) setValue(address.replaceAll(";", "\n"));
     } catch {
       // ignore
     }
   }, []);
 
   useEffect(() => {
-    async function translate() {
-      // update url address param without reloading the page
-      const url = new URL(location.href);
+    // update url address param without reloading the page
+    const url = new URL(location.href);
 
-      const searchParams = new URLSearchParams();
+    const searchParams = new URLSearchParams();
 
-      if (deferredValue) searchParams.set("address", deferredValue);
+    const addresses = deferredValue
+      .split("\n")
+      .map((x) => x.trim())
+      .filter(Boolean);
 
-      url.hash = searchParams.toString();
+    if (deferredValue) searchParams.set("address", addresses.join(";"));
 
-      history.replaceState({}, "", url.toString());
+    url.hash = searchParams.toString();
 
-      if (!addressData || !deferredValue) return;
+    history.replaceState({}, "", url.toString());
 
-      const nzh = await import("nzh").then((module) => module.default.hk);
+    if (!addressData || !deferredValue) return;
 
-      const { result, isValid } = translateAddressToEnglish(
-        addressData,
-        deferredValue,
-        nzh,
-      );
-
-      setResult(result);
-      setIsValid(isValid);
-    }
-
-    void translate();
+    setResult(
+      addresses.map((address) =>
+        translateAddressToEnglish(addressData, address, nzh),
+      ),
+    );
   }, [deferredValue, addressData]);
 
   return (
@@ -75,12 +77,10 @@ export const AddressToEnglishInput = () => {
         crossOrigin="anonymous"
       />
       <Textarea
+        name="address"
         autoFocus
         ref={inputRef}
-        className={cn(
-          "whitespace-pre-wrap inline-block text-start break-words break-all text-2xl bg-secondary/15 resize-none focus-visible:ring-0 !ring-offset-0 transition-colors",
-          !isValid && "border-red-500",
-        )}
+        className="whitespace-pre-wrap inline-block text-start break-words break-all text-2xl bg-secondary/15 resize-none focus-visible:ring-0 !ring-offset-0 transition-colors"
         value={value}
         placeholder="臺北市中正區重慶南路1段122號"
         onChange={(event) => {
@@ -91,18 +91,37 @@ export const AddressToEnglishInput = () => {
         }}
         rows={3}
       />
-      <Textarea
-        className="whitespace-pre-wrap inline-block text-start break-words break-all text-lg border-none bg-secondary/50 resize-none focus-visible:ring-0 !ring-offset-0"
-        value={isLoading ? "正在更新中華郵政資料..." : result}
-        readOnly
-        placeholder="No. 122, Sec. 1, Chongqing S. Rd., Zhongzheng Dist., Taipei City 100, Taiwan (R.O.C.)"
-        rows={3}
-      />
-      {result && (
-        <div className="flex items-center gap-2 justify-center">
-          <a
-            className="text-blue-500 underline"
-            href={location.href}
+      {isLoading && (
+        <span className="text-muted-foreground flex justify-center items-center gap-2">
+          正在載入中華郵政資料 <Loader2 className="w-4 animate-spin" />
+        </span>
+      )}
+      <div className="flex flex-col gap-2">
+        {result.map((result, index) => (
+          <TranslatedRow key={`${index}-${result}`}>{result}</TranslatedRow>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+function TranslatedRow({ children }: { children: TranslateAddressToEnglish }) {
+  return (
+    <div
+      className={cn(
+        "px-3 py-2 rounded-md whitespace-pre-wrap text-start break-words break-all text-lg border-none bg-secondary/50",
+        !children.isValid && "border-destructive",
+      )}
+    >
+      <span className="text-sm text-muted-foreground pb-1 block">
+        {children.original}
+      </span>
+      <div>
+        <span className="text-pretty">{children.result}</span>
+        <ButtonGroup className="float-end inline-block py-1">
+          <Button
+            variant="outline"
+            aria-label="複製到剪貼簿"
             onClick={async (e) => {
               e.preventDefault();
               await navigator.clipboard
@@ -112,18 +131,21 @@ export const AddressToEnglishInput = () => {
               toast.success("已複製連結到剪貼簿");
             }}
           >
-            複製連結
-          </a>
-          <a
-            href={`https://www.google.com/maps/search/${encodeURIComponent(result)}`}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-blue-500 underline"
-          >
-            在 Google Maps 上查看
-          </a>
-        </div>
-      )}
+            <Copy />
+          </Button>
+          <Button asChild variant="outline">
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href={`https://www.google.com/maps/search/${encodeURIComponent(children.result)}`}
+              title="在 Google Map 查看"
+              aria-label="在 Google Map 查看"
+            >
+              <MapIcon />
+            </a>
+          </Button>
+        </ButtonGroup>
+      </div>
     </div>
   );
-};
+}

src/components/ui/button-group.tsx

@@ -0,0 +1,83 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Separator } from "~/components/ui/separator";
+import { cn } from "~/utils/cn";
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  },
+);
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: its a button group
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  );
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      className={cn(
+        "bg-muted shadow-xs flex items-center gap-2 rounded-md border px-4 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+};

src/components/ui/button.tsx

@@ -1,27 +1,32 @@
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
+import type * as React from "react";
+
 import { cn } from "~/utils/cn";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
-          "border border-input hover:bg-accent hover:text-accent-foreground",
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "underline-offset-4 hover:underline text-primary",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-10 py-2 px-4",
-        sm: "h-9 px-3 rounded-md",
-        lg: "h-11 px-8 rounded-md",
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
       },
     },
     defaultVariants: {
@@ -31,24 +36,25 @@ const buttonVariants = cva(
   },
 );
 
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Button.displayName = "Button";
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
 
 export { Button, buttonVariants };

src/components/ui/separator.tsx

@@ -1,26 +1,26 @@
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import * as React from "react";
+import type * as React from "react";
+
 import { cn } from "~/utils/cn";
 
-export const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref,
-  ) => (
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
     <SeparatorPrimitive.Root
-      ref={ref}
+      data-slot="separator"
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
         className,
       )}
       {...props}
     />
-  ),
-);
-Separator.displayName = SeparatorPrimitive.Root.displayName;
+  );
+}
+
+export { Separator };