fem-projects/contact-form
Archived
1
Fork 0
Code Activity

Fix bug

Browse source
This commit is contained in:
Hadeed 2024-06-10 08:07:12 +04:00
parent f7f2bf45fc
commit f0fbfbca05
1 changed files with 20 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/app.jsx
View file

@ -52,7 +52,7 @@ export default function App() {
return ( return (
<div className="flex min-h-dvh flex-col items-center justify-center bg-green-200 px-200 py-400"> <div className="flex min-h-dvh flex-col items-center justify-center bg-green-200 px-200 py-400">
<Toast.Provider> <Toast.Provider>
<Toast.Viewport className="left-0 top-0 fixed flex w-full justify-center p-300" /> <Toast.Viewport className="fixed left-0 top-0 flex w-full justify-center p-300" />
<div className="rounded-2xl bg-white p-300 text-grey-900"> <div className="rounded-2xl bg-white p-300 text-grey-900">
<form <form
onSubmit={handleSubmit((data) => { onSubmit={handleSubmit((data) => {
@ -100,26 +100,28 @@ export default function App() {
fieldState: { invalid }, fieldState: { invalid },
}) => ( }) => (
<RadioGroup.Root <RadioGroup.Root
className="flex flex-col gap-200 sm:flex-row" className="space-y-200"
value={value} value={value}
onValueChange={onChange} onValueChange={onChange}
> >
{["General Enquiry", "Support Request"].map((label) => ( <div className="flex flex-col gap-200 sm:flex-row">
<RadioGroup.Item {["General Enquiry", "Support Request"].map((label) => (
className="group w-full rounded-lg border-[1px] border-grey-500 px-300 py-150 text-left hover:border-green-600 data-[state='checked']:border-green-600 data-[state='checked']:bg-green-200" <RadioGroup.Item
value={label.toLowerCase().replace(/ /g, "_")} className="group w-full rounded-lg border-[1px] border-grey-500 px-300 py-150 text-left hover:border-green-600 data-[state='checked']:border-green-600 data-[state='checked']:bg-green-200"
key={label} value={label.toLowerCase().replace(/ /g, "_")}
> key={label}
<label className="flex cursor-pointer items-center justify-start gap-150 hover:text-green-600 group-data-[state='checked']:text-green-600"> >
<span className="relative size-300 rounded-full border-2 border-solid border-grey-500 bg-transparent group-data-[state='checked']:border-green-600"> <label className="flex cursor-pointer items-center justify-start gap-150 hover:text-green-600 group-data-[state='checked']:text-green-600">
<span className="absolute left-1/2 top-1/2 size-150 -translate-x-1/2 -translate-y-1/2 transform rounded-full bg-transparent group-data-[state='checked']:bg-green-600"></span> <span className="relative size-300 rounded-full border-2 border-solid border-grey-500 bg-transparent group-data-[state='checked']:border-green-600">
</span> <span className="absolute left-1/2 top-1/2 size-150 -translate-x-1/2 -translate-y-1/2 transform rounded-full bg-transparent group-data-[state='checked']:bg-green-600"></span>
<span className="text-body-md text-grey-900 group-hover:text-green-600 group-data-[state='checked']:text-green-600"> </span>
{label} <span className="text-body-md text-grey-900 group-hover:text-green-600 group-data-[state='checked']:text-green-600">
</span> {label}
</label> </span>
</RadioGroup.Item> </label>
))} </RadioGroup.Item>
))}
</div>
{invalid && ( {invalid && (
<p className="text-body-sm text-red"> <p className="text-body-sm text-red">
Please select a query type Please select a query type