feat: improve storage life cycle

Author: zmh-program

src/components/ui/card.tsx

@@ -33,7 +33,7 @@ const CardTitle = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
-  <h3
+  <div
     ref={ref}
     className={cn(
       "text-xl font-semibold leading-none tracking-tight",

src/pages/[query].tsx

@@ -20,7 +20,7 @@ import {
   Send,
   X,
 } from "lucide-react";
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 import { addHistory } from "@/lib/history";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
@@ -320,9 +320,12 @@ export default function Lookup({ data, target }: Props) {
 
   const goStage = (target: string) => {
     setLoading(true);
-    addHistory(target);
   };
 
+  useEffect(() => {
+    addHistory(target);
+  }, []);
+
   return (
     <ScrollArea className={`w-full h-full`}>
       <main
@@ -386,7 +389,7 @@ export default function Lookup({ data, target }: Props) {
           </div>
           <ResultComp data={data} target={target} />
         </div>
-        <p
+        <div
           className={`mt-12 text-sm flex flex-row items-center font-medium text-muted-foreground select-none`}
         >
           Powered by{" "}
@@ -398,7 +401,7 @@ export default function Lookup({ data, target }: Props) {
             Next Whois UI
           </Link>
           <Badge variant={`outline`}>v{VERSION}</Badge>
-        </p>
+        </div>
       </main>
     </ScrollArea>
   );

src/pages/index.tsx

@@ -22,7 +22,6 @@ export default function Home() {
 
   const goStage = (target: string) => {
     setLoading(true);
-    addHistory(target);
   };
 
   return (
@@ -94,7 +93,7 @@ export default function Home() {
                 key={index}
                 onClick={() => goStage(item)}
               >
-                <Link2 className={`w-4 h-4 mr-1`} />
+                <Link2 className={`w-4 h-4 mr-1 shrink-0`} />
                 {item}
                 <ChevronRight
                   className={`transition-all w-4 h-4 ml-auto mr-1 group-hover:mr-0`}