|
|
|
@ -308,6 +308,49 @@ function AddEditLinkModal({
|
|
|
|
|
className="grid gap-6 bg-gray-50 pt-8"
|
|
|
|
|
>
|
|
|
|
|
<div className="grid gap-6 px-4 sm:px-16">
|
|
|
|
|
<div>
|
|
|
|
|
<div className="flex items-center justify-between">
|
|
|
|
|
<label
|
|
|
|
|
htmlFor={`url-${randomIdx}`}
|
|
|
|
|
className="block text-sm font-medium text-gray-700"
|
|
|
|
|
>
|
|
|
|
|
Destination URL
|
|
|
|
|
</label>
|
|
|
|
|
{urlError && (
|
|
|
|
|
<p className="text-sm text-red-600" id="key-error">
|
|
|
|
|
Invalid url.
|
|
|
|
|
</p>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
<div className="relative mt-1 flex rounded-md shadow-sm">
|
|
|
|
|
<input
|
|
|
|
|
name="url"
|
|
|
|
|
id={`url-${randomIdx}`}
|
|
|
|
|
type="url"
|
|
|
|
|
required
|
|
|
|
|
placeholder="https://github.com/steven-tey/dub"
|
|
|
|
|
value={url}
|
|
|
|
|
onChange={(e) => {
|
|
|
|
|
setUrlError(false);
|
|
|
|
|
setData({ ...data, url: e.target.value });
|
|
|
|
|
}}
|
|
|
|
|
className={`${
|
|
|
|
|
urlError
|
|
|
|
|
? "border-red-300 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500"
|
|
|
|
|
: "border-gray-300 text-gray-900 placeholder-gray-300 focus:border-gray-500 focus:ring-gray-500"
|
|
|
|
|
} block w-full rounded-md text-sm focus:outline-none`}
|
|
|
|
|
aria-invalid="true"
|
|
|
|
|
/>
|
|
|
|
|
{urlError && (
|
|
|
|
|
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
|
|
|
|
<AlertCircleFill
|
|
|
|
|
className="h-5 w-5 text-red-500"
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div className="flex items-center justify-between">
|
|
|
|
|
<label
|
|
|
|
@ -370,48 +413,6 @@ function AddEditLinkModal({
|
|
|
|
|
</p>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<label
|
|
|
|
|
htmlFor={`url-${randomIdx}`}
|
|
|
|
|
className="block text-sm font-medium text-gray-700"
|
|
|
|
|
>
|
|
|
|
|
Destination URL
|
|
|
|
|
</label>
|
|
|
|
|
<div className="relative mt-1 flex rounded-md shadow-sm">
|
|
|
|
|
<input
|
|
|
|
|
name="url"
|
|
|
|
|
id={`url-${randomIdx}`}
|
|
|
|
|
type="url"
|
|
|
|
|
required
|
|
|
|
|
placeholder="https://github.com/steven-tey/dub"
|
|
|
|
|
value={url}
|
|
|
|
|
onChange={(e) => {
|
|
|
|
|
setUrlError(false);
|
|
|
|
|
setData({ ...data, url: e.target.value });
|
|
|
|
|
}}
|
|
|
|
|
className={`${
|
|
|
|
|
urlError
|
|
|
|
|
? "border-red-300 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500"
|
|
|
|
|
: "border-gray-300 text-gray-900 placeholder-gray-300 focus:border-gray-500 focus:ring-gray-500"
|
|
|
|
|
} block w-full rounded-md text-sm focus:outline-none`}
|
|
|
|
|
aria-invalid="true"
|
|
|
|
|
/>
|
|
|
|
|
{urlError && (
|
|
|
|
|
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
|
|
|
|
<AlertCircleFill
|
|
|
|
|
className="h-5 w-5 text-red-500"
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
{urlError && (
|
|
|
|
|
<p className="mt-2 text-sm text-red-600" id="key-error">
|
|
|
|
|
Invalid url.
|
|
|
|
|
</p>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Divider */}
|
|
|
|
|