feat: enhance DNS form initialization and UI components

Refactor DNS form to initialize fields from URL search params dynamically, improving user experience by retaining form state across page reloads. Simplify DNS panel by removing unnecessary Suspense wrapper. Update UI components to use client-side rendering directives and refine input styles for better clarity.

components/dns/dns-form.jsx

@@ -21,9 +21,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 
 import isValidDomain from 'is-valid-domain'
 
-import { useSearchParams } from 'next/navigation'
-
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import * as z from 'zod'
 import { DNSTypes } from './dns-type'
@@ -50,17 +48,26 @@ const formSchema = z.object({
 })
 
 export function DNSForm({ onSearch }) {
-  const searchParams = useSearchParams()
   const form = useForm({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      name: searchParams.get('name') || '',
-      type: searchParams.get('type') || 'A',
-      resolver: searchParams.get('resolver') || 'cloudflare',
+      name: '',
+      type: 'A',
+      resolver: 'cloudflare',
     },
   })
   const [loading, setLoading] = useState(false)
 
+  useEffect(() => {
+    const values = form.getValues()
+
+    for (const key in values) {
+      const searchParams = new URL(document.location).searchParams
+      const queryValue = searchParams.get(key)
+      form.setValue(key, queryValue)
+    }
+  })
+
   function changeName(e) {
     const urlParser = z.string().url()
     const result = urlParser.safeParse(e.target.value)

components/dns/dns-panel.jsx

@@ -1,5 +1,5 @@
 'use client'
-import { Suspense, useState } from 'react'
+import { useState } from 'react'
 import { DNSFeature } from './dns-feature'
 import { DNSForm } from './dns-form'
 import { DNSTable } from './dns-table'
@@ -23,9 +23,7 @@ export default function DNSPanel() {
   return (
     <>
       {/* <DNSHero/> */}
-      <Suspense>
-        <DNSForm onSearch={onSearch} />
-      </Suspense>
+      <DNSForm onSearch={onSearch} />
       {
         formData.name ? <DNSTable formData={formData} /> : <DNSFeature />
       }

components/ui/form.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
 import { Slot } from "@radix-ui/react-slot"

components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}

components/ui/label.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
 import { cva, type VariantProps } from "class-variance-authority"

components/ui/select.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
 import { Check, ChevronDown, ChevronUp } from "lucide-react"