From ece0ffc7a02bb74edfb25cd9d1d895d582d00827 Mon Sep 17 00:00:00 2001 From: Xevion Date: Tue, 23 May 2023 20:00:16 -0500 Subject: [PATCH] Commit latest design, styling & functionality --- src/components/form/LookupInput.tsx | 104 +++++++++++++------ src/helpers.ts | 6 +- src/hooks/useLookup.tsx | 1 - src/pages/index.tsx | 153 ++++++++++------------------ src/types.ts | 6 ++ tailwind.config.cjs | 19 ++-- 6 files changed, 147 insertions(+), 142 deletions(-) diff --git a/src/components/form/LookupInput.tsx b/src/components/form/LookupInput.tsx index 1f7f370..bd177d5 100644 --- a/src/components/form/LookupInput.tsx +++ b/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; -} + isLoading?: boolean; + // When a type of registry is detected when a user changes their input, this is called. + onRegistry?: (type: TargetType) => Promise; + // When a user hits submit, this is called. + onSubmit?: (props: SubmitProps) => Promise; +}; -type LookupForm = { - target: string; -} +const LookupInput: FunctionComponent = ({ + isLoading, + onSubmit, +}: LookupInputProps) => { + const { register, handleSubmit } = useForm({ + defaultValues: { + followReferral: false, + requestJSContact: false, + }, + }); -const LookupInput: FunctionComponent = ({isLoading}: LookupInputProps) => { - const {register, handleSubmit} = useForm(); - - const onSubmit = (data: LookupForm) => { - return; - } - - return ( -
- +
+ +
+
+
+ +
+
+
+
+ + + + +
+
+ + ); +}; -export default LookupInput; \ No newline at end of file +export default LookupInput; diff --git a/src/helpers.ts b/src/helpers.ts index b456c30..0721b98 100644 --- a/src/helpers.ts +++ b/src/helpers.ts @@ -36,4 +36,8 @@ export function truncated(input: string, maxLength: number, ellipsis = "...") { */ export function classNames(...classes: (string | null | undefined)[]) { return classes.filter(Boolean).join(" "); -} \ No newline at end of file +} + +export function preventDefault(event: SyntheticEvent | Event) { + event.preventDefault(); +} diff --git a/src/hooks/useLookup.tsx b/src/hooks/useLookup.tsx index aa4de76..3d1709d 100644 --- a/src/hooks/useLookup.tsx +++ b/src/hooks/useLookup.tsx @@ -177,7 +177,6 @@ const useLookup = (warningHandler?: WarningHandler) => { props: SubmitProps ): Promise { try { - setTarget(props.target); const response = await submitInternal(); if (response == undefined) throw new Error("Internal submission failed to yield any data."); diff --git a/src/pages/index.tsx b/src/pages/index.tsx index b045b58..f99df8a 100644 --- a/src/pages/index.tsx +++ b/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(); + const { error, setTarget, submit } = useLookup(); + const [response, setResponse] = useState(); - return ( - <> - - rdap.xevion.dev - - - - - - <> - - -
- -
r ?? null); - })} className="form-inline"> -
-
- 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" - /> -
-
-
- -
-
- Options:  - -   - -
-
-
- {error} -
-
- {response != null ? : null} -
-
- - - ); + return ( + <> + + rdap.xevion.dev + + + + + + +
+
+ { + // await setTarget(type); + }} + onSubmit={async (props) => { + setTarget(props.target); + const response = await submit(props); + setResponse(response); + }} + /> + {error != null ? ( +
+ {error} +
+ ) : null} + {response != null ? : null} +
+
+ + ); }; export default Index; diff --git a/src/types.ts b/src/types.ts index c023f87..53545d7 100644 --- a/src/types.ts +++ b/src/types.ts @@ -26,3 +26,9 @@ export type IpNetwork = z.infer; export type AutonomousNumber = z.infer; export type Register = z.infer; export type Domain = z.infer; + +export type SubmitProps = { + target: string; + requestJSContact: boolean; + followReferral: boolean; +}; diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 018493a..8ebbcdc 100644 --- a/tailwind.config.cjs +++ b/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: [], };