Commit latest design, styling & functionality

src/components/form/LookupInput.tsx

@@ -1,37 +1,79 @@
 import { useForm } from "react-hook-form";
 import type { FunctionComponent } from "react";
-import {onPromise} from "@/helpers";
+import { onPromise, preventDefault } from "@/helpers";
-import type {TargetType} from "@/types";
+import type { SubmitProps, TargetType } from "@/types";
+import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
 
 type LookupInputProps = {
-    isLoading?: boolean
+  isLoading?: boolean;
-    onRegistry?: (type: TargetType) => Promise<void>;
+  // When a type of registry is detected when a user changes their input, this is called.
-}
+  onRegistry?: (type: TargetType) => Promise<any>;
+  // When a user hits submit, this is called.
+  onSubmit?: (props: SubmitProps) => Promise<any>;
+};
 
-type LookupForm = {
+const LookupInput: FunctionComponent<LookupInputProps> = ({
-    target: string;
+  isLoading,
-}
+  onSubmit,
-
+}: LookupInputProps) => {
-const LookupInput: FunctionComponent<LookupInputProps> = ({isLoading}: LookupInputProps) => {
+  const { register, handleSubmit } = useForm<SubmitProps>({
-    const {register, handleSubmit} = useForm<LookupForm>();
+    defaultValues: {
-
+      followReferral: false,
-    const onSubmit = (data: LookupForm) => {
+      requestJSContact: false,
-        return;
+    },
-    }
+  });
 
   return (
-        <form onSubmit={onPromise(handleSubmit(onSubmit))} className="form-inline">
+    <form
-            <input
+      className="pb-3"
-                className="form-control bg-zinc-800 focus:bg-zinc-700 focus:border-zinc-600 border-zinc-700 text-zinc-200"
+      onSubmit={
-                {...register("target", {required: true})}
+        onSubmit != undefined
-                placeholder="A domain, an IP address, a TLD, an RDAP URL..."
+          ? onPromise(handleSubmit(onSubmit))
-                disabled={isLoading}
+          : preventDefault
+      }
+    >
+      <div className="col">
+        <label htmlFor="search" className="sr-only">
+          Search
+        </label>
+        <div className="relative">
+          <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+            <MagnifyingGlassIcon
+              className="h-5 w-5 text-zinc-400"
+              aria-hidden="true"
             />
-            <div className="input-group-append">
+          </div>
-                <input id="button" type="button" value="Submit" disabled={isLoading}/>
+          <input
+            className="lg:py-4.5 block w-full rounded-md border border-transparent bg-zinc-700 py-2 pl-10 pr-3 text-sm placeholder-zinc-400 placeholder:translate-y-2 focus:text-zinc-200 focus:outline-none sm:text-sm md:py-3 md:text-base lg:text-lg"
+            disabled={isLoading}
+            placeholder="A domain, an IP address, a TLD, an RDAP URL..."
+            type="search"
+            {...register("target", { required: true })}
+          />
+        </div>
+      </div>
+      <div className="col p-0">
+        <div className="flex pt-3 pb-1 text-sm">
+          <input
+            className="ml-2 mr-1 text-zinc-800 accent-zinc-700"
+            type="checkbox"
+            {...register("requestJSContact")}
+          />
+          <label className="" htmlFor="requestJSContact">
+            Request JSContact
+          </label>
+          <input
+            className="ml-2 mr-1 bg-zinc-500 text-inherit accent-zinc-700"
+            type="checkbox"
+            {...register("followReferral")}
+          />
+          <label className="" htmlFor="followReferral">
+            Follow referral to registrar&apos;s RDAP record
+          </label>
+        </div>
       </div>
     </form>
-    )
+  );
-}
+};
 
 export default LookupInput;

src/helpers.ts

@@ -37,3 +37,7 @@ export function truncated(input: string, maxLength: number, ellipsis = "...") {
 export function classNames(...classes: (string | null | undefined)[]) {
   return classes.filter(Boolean).join(" ");
 }
+
+export function preventDefault(event: SyntheticEvent | Event) {
+  event.preventDefault();
+}

src/hooks/useLookup.tsx

@@ -177,7 +177,6 @@ const useLookup = (warningHandler?: WarningHandler) => {
     props: SubmitProps
   ): Promise<ParsedGeneric | undefined> {
     try {
-      setTarget(props.target);
       const response = await submitInternal();
       if (response == undefined)
         throw new Error("Internal submission failed to yield any data.");

src/pages/index.tsx

@@ -3,12 +3,11 @@ import Head from "next/head";
 import { useState } from "react";
 import Generic, { type ParsedGeneric } from "@/components/lookup/Generic";
 import useLookup from "@/hooks/useLookup";
-import {onPromise} from "@/helpers";
 import { OGP } from "react-ogp";
 import LookupInput from "@/components/form/LookupInput";
 
 const Index: NextPage = () => {
-    const {error, setTarget, submit, currentType} = useLookup();
+  const { error, setTarget, submit } = useLookup();
   const [response, setResponse] = useState<ParsedGeneric | null>();
 
   return (
@@ -24,85 +23,39 @@ const Index: NextPage = () => {
         />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="shortcut icon" href="/shortcut-icon.svg" />
-                <meta name="keywords" content="xevion, rdap, whois, rdap, domain name, dns, ip address"/>
+        <meta
+          name="keywords"
+          content="xevion, rdap, whois, rdap, domain name, dns, ip address"
+        />
       </Head>
-            <>
+      <nav className="bg-zinc-850 px-5 py-4 shadow-sm">
-                <style jsx>{`
+        <span className="text-white" style={{ fontSize: "larger" }}>
-                  dd {
+          <a className="text-xl font-medium" href="#">
-                    margin: 0.5em 0 1em 2em;
+            rdap.xevion.dev
-                  }
+          </a>
-
-                  .card {
-                    margin-bottom: 1em;
-                  }
-
-                  dl {
-                    margin: 0;
-                  }
-
-                  .rdap-status-code, .rdap-event-time {
-                    border-bottom: 1px dashed silver;
-                  }
-
-                  #object {
-                    text-transform: lowercase;
-                  }
-
-                  #spinner-msg {
-                    height: 2em;
-                    display: inline-block;
-                    margin: -0.25em 0 0 0;
-                    padding: 0.25em 0 0 0;
-                  }
-
-                `}</style>
-                <nav className="navbar navbar-expand-lg navbar-dark shadow-sm">
-                  <span className="text-white" style={{fontSize: 'larger'}}>
-                    <a className="navbar-brand" href="#">rdap.xevion.dev</a>
         </span>
       </nav>
-                <div className="container py-12 mx-auto max-w-screen-lg">
+      <div className="mx-auto max-w-screen-sm px-5 lg:max-w-screen-md xl:max-w-screen-lg">
-                    <LookupInput />
+        <div className="dark container mx-auto w-full py-6 md:py-12 ">
-                    <form onSubmit={onPromise(async function (e) {
+          <LookupInput
-                        e.preventDefault()
+            onRegistry={async (type) => {
-
+              // await setTarget(type);
-                        const r = await submit();
+            }}
-                        setResponse(() => r ?? null);
+            onSubmit={async (props) => {
-                    })} className="form-inline">
+              setTarget(props.target);
-                        <div className="col p-0">
+              const response = await submit(props);
-                            <div className="input-group">
+              setResponse(response);
-                                <input
+            }}
-                                    onChange={(e) => setTarget(e.currentTarget.value)}
-                                    className="form-control bg-zinc-800 focus:bg-zinc-700 focus:border-zinc-600 border-zinc-700 text-zinc-200"
-                                    type="text"
           />
-                            </div>
+          {error != null ? (
-                        </div>
+            <div className="my-3 mx-7 rounded border-2 border-red-800/40 bg-zinc-700 p-2 text-zinc-300">
-                    </form>
-
-                    <div className="container p-0 italic text-[#aaa]" style={{fontSize: "small"}}>
-                        <div className="col pt-3 pb-1">
-                            Options:&nbsp;
-                            <label htmlFor="request-jscontact">
-                                <input name="request-jscontact" id="request-jscontact" type="checkbox"/>
-                                Request JSContact
-                            </label>
-                            &nbsp;
-                            <label htmlFor="follow-referral">
-                                <input name="follow-referral" id="follow-referral" type="checkbox"/>
-                                Follow referral to registrar&apos;s RDAP record
-                            </label>
-                        </div>
-                    </div>
-                    <div>
               {error}
             </div>
-                    <div id="output-div">
+          ) : null}
           {response != null ? <Generic data={response} /> : null}
         </div>
       </div>
     </>
-        </>
   );
 };
 

src/types.ts

@@ -26,3 +26,9 @@ export type IpNetwork = z.infer<typeof IpNetworkSchema>;
 export type AutonomousNumber = z.infer<typeof AutonomousNumberSchema>;
 export type Register = z.infer<typeof RegisterSchema>;
 export type Domain = z.infer<typeof DomainSchema>;
+
+export type SubmitProps = {
+  target: string;
+  requestJSContact: boolean;
+  followReferral: boolean;
+};

tailwind.config.cjs

@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
     content: ["./src/**/*.{js,ts,jsx,tsx}"],
+    darkMode: "class",
     theme: {
         extend: {
             colors: {