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

implement detectedType, fix wrapping inside listbox button

Browse Source
This commit is contained in:
Xevion
2024-05-09 23:06:10 -05:00
parent f35e500f58
commit 1b026e6af4
2 changed files with 18 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/form/LookupInput.tsx
View File

@@ -152,7 +152,7 @@ const LookupInput: FunctionComponent<LookupInputProps> = ({
<div className="relative"> <div className="relative">
<Listbox.Button <Listbox.Button
className={clsx( className={clsx(
"relative h-full w-full cursor-default rounded-r-lg bg-zinc-700 py-2 pl-3 pr-10 text-right", "relative h-full w-full cursor-default rounded-r-lg bg-zinc-700 py-2 pl-3 pr-10 text-right whitespace-nowrap",
"text-left text-xs focus:outline-none focus-visible:border-indigo-500 sm:text-sm md:text-base lg:text-lg", "text-left text-xs focus:outline-none focus-visible:border-indigo-500 sm:text-sm md:text-base lg:text-lg",
"focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 " "focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 "
)} )}
@@ -160,7 +160,8 @@ const LookupInput: FunctionComponent<LookupInputProps> = ({
{/* Fetch special text for 'auto' mode, otherwise just use the options. */} {/* Fetch special text for 'auto' mode, otherwise just use the options. */}
<span className="block"> <span className="block">
{selected == "auto" {selected == "auto"
? detectedType.unwrapOr("???") // If the detected type was provided, then notate which in parentheses. Compact object naming might be better in the future.
? (detectedType.isJust ? `Auto (${objectNames[detectedType.value]})` : objectNames["auto"])
: objectNames[selected]} : objectNames[selected]}
</span> </span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"> <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">

16
src/pages/index.tsx
View File

@@ -7,9 +7,12 @@ import { OGP } from "react-ogp";
import LookupInput from "@/components/form/LookupInput"; import LookupInput from "@/components/form/LookupInput";
import ErrorCard from "@/components/common/ErrorCard"; import ErrorCard from "@/components/common/ErrorCard";
import { Maybe } from "true-myth"; import { Maybe } from "true-myth";
import type { ObjectType } from "@/types";
import { getType } from "@/rdap";
const Index: NextPage = () => { const Index: NextPage = () => {
const { error, setTarget, submit } = useLookup(); const { error, setTarget, submit } = useLookup();
const [detectedType, setDetectedType] = useState<Maybe<ObjectType>>(Maybe.nothing());
const [response, setResponse] = useState<ParsedGeneric | null>(); const [response, setResponse] = useState<ParsedGeneric | null>();
const [isLoading, setLoading] = useState<boolean>(false); const [isLoading, setLoading] = useState<boolean>(false);
@@ -41,9 +44,20 @@ const Index: NextPage = () => {
<div className="dark container mx-auto w-full py-6 md:py-12 "> <div className="dark container mx-auto w-full py-6 md:py-12 ">
<LookupInput <LookupInput
isLoading={isLoading} isLoading={isLoading}
detectedType={Maybe.nothing()} detectedType={detectedType}
onChange={({ target, targetType }) => { onChange={({ target, targetType }) => {
setTarget(target); setTarget(target);
const detectResult = getType(target);
if (detectResult.isOk) {
const value = detectResult.value;
if (value == "ip4" || value == "ip6")
setDetectedType(Maybe.just("ip"));
else
setDetectedType(Maybe.just(value));
} else {
setDetectedType(Maybe.nothing());
}
}} }}
onSubmit={async function (props) { onSubmit={async function (props) {
try { try {