swapped Destination URL & Shortlink (h/t to @peerrich for the feedback)

pull/126/head
Steven Tey 1 year ago
parent 12a5b71ce1
commit 0d4340dad1

@ -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 */}

Loading…
Cancel
Save