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 type {TargetType} from "@/types";
+import { useForm } from "react-hook-form";
+import type { FunctionComponent } from "react";
+import { onPromise, preventDefault } from "@/helpers";
+import type { SubmitProps, TargetType } from "@/types";
+import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
 
 type LookupInputProps = {
-    isLoading?: boolean
-    onRegistry?: (type: TargetType) => Promise<void>;
-}
+  isLoading?: boolean;
+  // 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 = {
-    target: string;
-}
+const LookupInput: FunctionComponent<LookupInputProps> = ({
+  isLoading,
+  onSubmit,
+}: LookupInputProps) => {
+  const { register, handleSubmit } = useForm<SubmitProps>({
+    defaultValues: {
+      followReferral: false,
+      requestJSContact: false,
+    },
+  });
 
-const LookupInput: FunctionComponent<LookupInputProps> = ({isLoading}: LookupInputProps) => {
-    const {register, handleSubmit} = useForm<LookupForm>();
-
-    const onSubmit = (data: LookupForm) => {
-        return;
-    }
-
-    return (
-        <form onSubmit={onPromise(handleSubmit(onSubmit))} className="form-inline">
-            <input
-                className="form-control bg-zinc-800 focus:bg-zinc-700 focus:border-zinc-600 border-zinc-700 text-zinc-200"
-                {...register("target", {required: true})}
-                placeholder="A domain, an IP address, a TLD, an RDAP URL..."
-                disabled={isLoading}
+  return (
+    <form
+      className="pb-3"
+      onSubmit={
+        onSubmit != undefined
+          ? onPromise(handleSubmit(onSubmit))
+          : 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">
-                <input id="button" type="button" value="Submit" disabled={isLoading}/>
-            </div>
-        </form>
-    )
-}
+          </div>
+          <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

@@ -1,109 +1,62 @@
-import {type NextPage} from "next";
+import { type NextPage } from "next";
 import Head from "next/head";
-import {useState} from "react";
-import Generic, {type ParsedGeneric} from "@/components/lookup/Generic";
+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 { OGP } from "react-ogp";
 import LookupInput from "@/components/form/LookupInput";
 
 const Index: NextPage = () => {
-    const {error, setTarget, submit, currentType} = useLookup();
-    const [response, setResponse] = useState<ParsedGeneric | null>();
+  const { error, setTarget, submit } = useLookup();
+  const [response, setResponse] = useState<ParsedGeneric | null>();
 
-    return (
-        <>
-            <Head>
-                <title>rdap.xevion.dev</title>
-                <OGP
-                    url="https://rdap.xevion.dev"
-                    title="RDAP | by Xevion.dev"
-                    description="A custom, private RDAP lookup client built by Xevion."
-                    siteName="rdap.xevion.dev"
-                    type="website"
-                />
-                <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"/>
-            </Head>
-            <>
-                <style jsx>{`
-                  dd {
-                    margin: 0.5em 0 1em 2em;
-                  }
-
-                  .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">
-                    <LookupInput />
-                    <form onSubmit={onPromise(async function (e) {
-                        e.preventDefault()
-
-                        const r = await submit();
-                        setResponse(() => r ?? null);
-                    })} className="form-inline">
-                        <div className="col p-0">
-                            <div className="input-group">
-                                <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>
-                        </div>
-                    </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">
-                        {response != null ? <Generic data={response}/> : null}
-                    </div>
-                </div>
-            </>
-        </>
-    );
+  return (
+    <>
+      <Head>
+        <title>rdap.xevion.dev</title>
+        <OGP
+          url="https://rdap.xevion.dev"
+          title="RDAP | by Xevion.dev"
+          description="A custom, private RDAP lookup client built by Xevion."
+          siteName="rdap.xevion.dev"
+          type="website"
+        />
+        <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"
+        />
+      </Head>
+      <nav className="bg-zinc-850 px-5 py-4 shadow-sm">
+        <span className="text-white" style={{ fontSize: "larger" }}>
+          <a className="text-xl font-medium" href="#">
+            rdap.xevion.dev
+          </a>
+        </span>
+      </nav>
+      <div className="mx-auto max-w-screen-sm px-5 lg:max-w-screen-md xl:max-w-screen-lg">
+        <div className="dark container mx-auto w-full py-6 md:py-12 ">
+          <LookupInput
+            onRegistry={async (type) => {
+              // await setTarget(type);
+            }}
+            onSubmit={async (props) => {
+              setTarget(props.target);
+              const response = await submit(props);
+              setResponse(response);
+            }}
+          />
+          {error != null ? (
+            <div className="my-3 mx-7 rounded border-2 border-red-800/40 bg-zinc-700 p-2 text-zinc-300">
+              {error}
+            </div>
+          ) : null}
+          {response != null ? <Generic data={response} /> : null}
+        </div>
+      </div>
+    </>
+  );
 };
 
 export default Index;

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,14 +1,15 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {
-      colors: {
-        zinc: {
-          850: "#1D1D20",
+    content: ["./src/**/*.{js,ts,jsx,tsx}"],
+    darkMode: "class",
+    theme: {
+        extend: {
+            colors: {
+                zinc: {
+                    850: "#1D1D20",
+                },
+            },
         },
-      },
     },
-  },
-  plugins: [],
+    plugins: [],
 };