feat: improve animation and special domains mapping

Author: zmh-program

package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-whois-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -18,6 +18,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "framer-motion": "^11.3.21",
     "html-to-image": "^1.11.11",
     "lucide-react": "^0.414.0",
     "moment": "^2.30.1",

pnpm-lock.yaml

@@ -36,18 +36,26 @@ export default function RichTextarea({
         <Button
           variant={`outline`}
           size={`icon-sm`}
-          className={cn(`mr-1`, disableCopyAction && `hidden`)}
+          className={cn(
+            `mr-1 text-muted-foreground transition hover:text-primary`,
+            disableCopyAction && `hidden`,
+          )}
           onClick={() => copy(displayValue)}
+          tapEnabled
         >
-          <CopyIcon className={`w-3 h-3`} />
+          <CopyIcon className={`w-3.5 h-3.5`} />
         </Button>
         <Button
           variant={`outline`}
           size={`icon-sm`}
           onClick={() => save(saveFileName || "text.txt", displayValue)}
-          className={cn(disableSaveAction && `hidden`)}
+          className={cn(
+            `text-muted-foreground transition hover:text-primary`,
+            disableSaveAction && `hidden`,
+          )}
+          tapEnabled
         >
-          <DownloadIcon className={`w-3 h-3`} />
+          <DownloadIcon className={`w-3.5 h-3.5`} />
         </Button>
       </div>
       <TextArea rows={10} readOnly={true} value={displayValue} />

src/components/items/rich-textarea.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+export interface ClickableProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    React.PropsWithChildren<{}> {
+  tapScale?: number;
+  tapDuration?: number;
+  hoverScale?: number;
+}
+
+const Clickable: React.FC<ClickableProps> = ({
+  children,
+  className,
+  tapScale = 0.95,
+  tapDuration = 0.1,
+  hoverScale,
+}) => {
+  return (
+    <motion.div
+      className={className}
+      whileTap={{
+        scale: tapScale,
+        transition: { duration: tapDuration },
+      }}
+      whileHover={hoverScale ? { scale: hoverScale } : {}}
+      whileFocus={hoverScale ? { scale: hoverScale } : {}}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+Clickable.displayName = "Clickable";
+export default Clickable;

src/components/motion/clickable.tsx

@@ -15,7 +15,7 @@ import { Inter } from "next/font/google";
 
 const inter = Inter({ subsets: ["latin"] });
 
-export function ModeToggle() {
+export function ThemeToggle() {
   const { setTheme } = useTheme();
 
   return (

src/components/theme-switch.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
-
 import { cn } from "@/lib/utils";
+import Clickable from "@/components/motion/clickable";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
@@ -39,18 +39,51 @@ export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+  tapScale?: number;
+  tapDuration?: number;
+  tapClassName?: string;
+  tapEnabled?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  (
+    {
+      className,
+      variant,
+      size,
+      tapEnabled,
+      tapClassName,
+      tapScale,
+      tapDuration,
+      asChild = false,
+      ...props
+    },
+    ref,
+  ) => {
     const Comp = asChild ? Slot : "button";
-    return (
+    const Btn = (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
     );
+
+    const isTap =
+      tapEnabled || (tapClassName !== undefined && tapScale !== null);
+    if (isTap) {
+      return (
+        <Clickable
+          className={cn(tapClassName)}
+          tapScale={tapScale}
+          tapDuration={tapDuration}
+        >
+          {Btn}
+        </Clickable>
+      );
+    }
+
+    return Btn;
   },
 );
 Button.displayName = "Button";

src/components/ui/button.tsx

@@ -3,6 +3,7 @@ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
 
 import { cn } from "@/lib/utils";
+import Clickable from "@/components/motion/clickable";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 
@@ -78,15 +79,17 @@ const DropdownMenuItem = React.forwardRef<
     inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex flex-row cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
+  <Clickable>
+    <DropdownMenuPrimitive.Item
+      ref={ref}
+      className={cn(
+        "relative flex flex-row cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        inset && "pl-8",
+        className,
+      )}
+      {...props}
+    />
+  </Clickable>
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 

src/components/ui/dropdown-menu.tsx

@@ -1,4 +1,4 @@
-export const VERSION = "0.1.0";
+export const VERSION = "0.2.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/env.ts

@@ -4,6 +4,7 @@ import React from "react";
 import { toast } from "sonner";
 import { getDomain } from "tldjs";
 import { ParsedUrlQuery } from "node:querystring";
+import { getSpecialDomain } from "@/lib/whois/lib";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -109,8 +110,16 @@ export function countDuration(startTime: number, _endTime?: number): number {
   return (endTime - startTime) / 1000; // seconds
 }
 
+export function extractDomain(url: string): string | null {
+  try {
+    return getDomain(getSpecialDomain(url));
+  } catch {
+    return null;
+  }
+}
+
 export function cleanDomain(domain: string): string {
-  const hostname = getDomain(domain);
+  const hostname = extractDomain(domain);
   if (hostname) {
     return hostname;
   }

src/lib/utils.ts

@@ -17,6 +17,16 @@ export type DomainRegex = {
   unknownTLD?: boolean;
 };
 
+const specialDomains: Record<string, string> = {
+  "gov.cn": "www.gov.cn",
+  "cn.com": "www.cn.com",
+  "com.cn": "www.com.cn",
+  "org.cn": "www.org.cn",
+  "net.cn": "www.net.cn",
+  "edu.cn": "www.edu.cn",
+  "mil.cn": "www.mil.cn",
+};
+
 const defaultRegex: DomainRegex = {
   domainName: "Domain Name: *([^\\s]+)",
   registrar: "Registrar: *(.+)",
@@ -395,3 +405,7 @@ export function getDomainRegex(domain: string): DomainRegex {
     return defaultRegex;
   }
 }
+
+export function getSpecialDomain(domain: string): string {
+  return specialDomains[domain.toLowerCase()] ?? domain;
+}

src/lib/whois/lib.ts

@@ -2,11 +2,10 @@ import { MAX_IP_WHOIS_FOLLOW, MAX_WHOIS_FOLLOW } from "@/lib/env";
 import whois from "whois-raw";
 import { WhoisResult } from "@/lib/whois/types";
 import { parseWhoisData } from "@/lib/whois/tld_parser";
-import { countDuration, toErrorMessage } from "@/lib/utils";
-import { getDomain } from "tldjs";
+import { countDuration, extractDomain, toErrorMessage } from "@/lib/utils";
 
 export function getLookupOptions(domain: string) {
-  const isDomain = !!getDomain(domain);
+  const isDomain = !!extractDomain(domain);
   return {
     follow: isDomain ? MAX_WHOIS_FOLLOW : MAX_IP_WHOIS_FOLLOW,
   };