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

Add lock icon to non-autodetect target types

Browse Source
This commit is contained in:
Xevion
2024-05-11 01:33:16 -05:00
parent cdea57b6bf
commit abb6df7383
1 changed files with 32 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,10 +6,17 @@ import type { SimplifiedTargetType, SubmitProps, TargetType } from "@/types";
import { import {
CheckIcon, CheckIcon,
ChevronUpDownIcon, ChevronUpDownIcon,
LockClosedIcon,
MagnifyingGlassIcon, MagnifyingGlassIcon,
ArrowPathIcon, ArrowPathIcon,
} from "@heroicons/react/20/solid"; } from "@heroicons/react/20/solid";
import { Listbox, ListboxButton, ListboxOptions, ListboxOption, Transition } from "@headlessui/react"; import {
Listbox,
ListboxButton,
ListboxOptions,
ListboxOption,
Transition,
} from "@headlessui/react";
import clsx from "clsx"; import clsx from "clsx";
import type { Maybe } from "true-myth"; import type { Maybe } from "true-myth";
import { placeholders } from "@/constants"; import { placeholders } from "@/constants";
@@ -183,12 +190,22 @@ 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" ? (
? // If the detected type was provided, then notate which in parentheses. Compact object naming might be better in the future. // If the detected type was provided, then notate which in parentheses. Compact object naming might be better in the future.
detectedType.isJust detectedType.isJust ? (
? `Auto (${targetShortNames[detectedType.value]})` `Auto (${targetShortNames[detectedType.value]})`
: objectNames["auto"] ) : (
: objectNames[selected]} objectNames["auto"]
)
) : (
<>
<LockClosedIcon
className="mr-2.5 mb-1 inline h-4 w-4 animate-pulse text-zinc-500"
aria-hidden
/>
{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">
<ChevronUpDownIcon <ChevronUpDownIcon
@@ -235,10 +252,13 @@ const LookupInput: FunctionComponent<LookupInputProps> = ({
<CheckIcon className="h-5 w-5" aria-hidden="true" /> <CheckIcon className="h-5 w-5" aria-hidden="true" />
</span> </span>
) : ( ) : (
<button onClick={(e) => { <button
onClick={(e) => {
e.preventDefault(); e.preventDefault();
console.log("TODO: Show Help Explanation") console.log("TODO: Show Help Explanation");
}} className="absolute inset-y-0 left-0 flex items-center pl-4 text-lg font-bold opacity-20 hover:animate-pulse"> }}
className="absolute inset-y-0 left-0 flex items-center pl-4 text-lg font-bold opacity-20 hover:animate-pulse"
>
? ?
</button> </button>
)} )}