xevion/rdap
1
0
Fork 0
mirror of https://github.com/Xevion/rdap.git synced 2025-12-16 18:12:53 -06:00
Code Issues Packages Projects Releases Wiki Activity

Commit latest design, styling & functionality

Browse Source
This commit is contained in:
Xevion
2023-05-23 20:00:16 -05:00
parent 8da615a8c1
commit ece0ffc7a0
6 changed files with 147 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
src/pages/index.tsx
View File

@@ -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;