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

Make responsive

Browse source
This commit is contained in:
Hadeed 2024-06-09 02:25:56 +04:00
parent e96a574e2b
commit f7f2bf45fc
1 changed files with 17 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/app.jsx
View file

@ -50,7 +50,7 @@ export default function App() {
const [toastOpen, setToastOpen] = useState(false); const [toastOpen, setToastOpen] = useState(false);
return ( return (
<div className="min-h-dvh 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="left-0 top-0 fixed 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">
@ -63,18 +63,20 @@ export default function App() {
<h1 className="text-heading">Contact Us</h1> <h1 className="text-heading">Contact Us</h1>
<div className="mt-400 space-y-300"> <div className="mt-400 space-y-300">
<InputField <div className="flex flex-col gap-300 sm:flex-row sm:gap-200">
register={register} <InputField
errors={errors} register={register}
label="First Name" errors={errors}
required label="First Name"
/> required
<InputField />
register={register} <InputField
errors={errors} register={register}
label="Last Name" errors={errors}
required label="Last Name"
/> required
/>
</div>
<InputField <InputField
register={register} register={register}
errors={errors} errors={errors}
@ -98,7 +100,7 @@ export default function App() {
fieldState: { invalid }, fieldState: { invalid },
}) => ( }) => (
<RadioGroup.Root <RadioGroup.Root
className="space-y-200" className="flex flex-col gap-200 sm:flex-row"
value={value} value={value}
onValueChange={onChange} onValueChange={onChange}
> >
@ -133,7 +135,7 @@ export default function App() {
errors={errors} errors={errors}
label="Message" label="Message"
type="textarea" type="textarea"
rows="4" rows="3"
required required
/> />
</div> </div>