mirror of
https://github.com/Xevion/rdap.git
synced 2025-12-06 17:16:06 -06:00
Rewrite index with useLookup hook, add react-ogp
This commit is contained in:
Xevion
@@ -17,6 +17,7 @@
|
|||||||
"react": "18.2.0",
|
"react": "18.2.0",
|
||||||
"react-dom": "18.2.0",
|
"react-dom": "18.2.0",
|
||||||
"react-hook-form": "^7.42.1",
|
"react-hook-form": "^7.42.1",
|
||||||
|
"react-ogp": "^0.0.3",
|
||||||
"sass": "^1.57.1",
|
"sass": "^1.57.1",
|
||||||
"usehooks-ts": "^2.9.1",
|
"usehooks-ts": "^2.9.1",
|
||||||
"zod": "^3.20.2"
|
"zod": "^3.20.2"
|
||||||
|
|||||||
108
src/pages/index.tsx
Normal file
108
src/pages/index.tsx
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
import {type NextPage} from "next";
|
||||||
|
import Head from "next/head";
|
||||||
|
import {useRef, useState} from "react";
|
||||||
|
import Generic, {type ParsedGeneric} from "@/components/Generic";
|
||||||
|
import useLookup from "@/hooks/useLookup";
|
||||||
|
import {onPromise} from "@/helpers";
|
||||||
|
import {OGP} from "react-ogp";
|
||||||
|
|
||||||
|
const Index: NextPage = () => {
|
||||||
|
const {error, setTarget, submit, currentType} = useLookup();
|
||||||
|
const inputRef = useRef<HTMLInputElement>();
|
||||||
|
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">
|
||||||
|
<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:
|
||||||
|
<label htmlFor="request-jscontact">
|
||||||
|
<input name="request-jscontact" id="request-jscontact" type="checkbox"/>
|
||||||
|
Request JSContact
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label htmlFor="follow-referral">
|
||||||
|
<input name="follow-referral" id="follow-referral" type="checkbox"/>
|
||||||
|
Follow referral to registrar's RDAP record
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
<div id="output-div">
|
||||||
|
{response != null ? <Generic data={response}/> : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Index;
|
||||||
@@ -2067,6 +2067,11 @@ react-is@^16.13.1:
|
|||||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
||||||
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
|
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
|
||||||
|
|
||||||
|
react-ogp@^0.0.3:
|
||||||
|
version "0.0.3"
|
||||||
|
resolved "https://registry.yarnpkg.com/react-ogp/-/react-ogp-0.0.3.tgz#f3d49ff49e593576778f6a11824a4ccb2d8b427d"
|
||||||
|
integrity sha512-+m5my7G6dxzN79e1e/M5VV2MmM2sXrTqs+hfL8sFHsjWn4PMv3P8eD/aMSHPibvp6BYsiFCeWMMSzcqUCIQr9w==
|
||||||
|
|
||||||
react@18.2.0:
|
react@18.2.0:
|
||||||
version "18.2.0"
|
version "18.2.0"
|
||||||
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
|
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
|
||||||
|
|||||||
Reference in New Issue
Block a user