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

Finish design

Browse source
This commit is contained in:
Hadeed 2024-06-07 03:25:45 +04:00
parent 52cbea16fa
commit 388f16085c
5 changed files with 88 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
assets/icon-checkbox-checked.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.5 3H4.5C4.10218 3 3.72064 3.15804 3.43934 3.43934C3.15804 3.72064 3 4.10218 3 4.5V19.5C3 19.8978 3.15804 20.2794 3.43934 20.5607C3.72064 20.842 4.10218 21 4.5 21H19.5C19.8978 21 20.2794 20.842 20.5607 20.5607C20.842 20.2794 21 19.8978 21 19.5V4.5C21 4.10218 20.842 3.72064 20.5607 3.43934C20.2794 3.15804 19.8978 3 19.5 3ZM16.2806 10.2806L11.0306 15.5306C10.961 15.6004 10.8783 15.6557 10.7872 15.6934C10.6962 15.7312 10.5986 15.7506 10.5 15.7506C10.4014 15.7506 10.3038 15.7312 10.2128 15.6934C10.1217 15.6557 10.039 15.6004 9.96937 15.5306L7.71937 13.2806C7.57864 13.1399 7.49958 12.949 7.49958 12.75C7.49958 12.551 7.57864 12.3601 7.71937 12.2194C7.86011 12.0786 8.05098 11.9996 8.25 11.9996C8.44902 11.9996 8.63989 12.0786 8.78063 12.2194L10.5 13.9397L15.2194 9.21937C15.2891 9.14969 15.3718 9.09442 15.4628 9.0567C15.5539 9.01899 15.6515 8.99958 15.75 8.99958C15.8485 8.99958 15.9461 9.01899 16.0372 9.0567C16.1282 9.09442 16.2109 9.14969 16.2806 9.21937C16.3503 9.28906 16.4056 9.37178 16.4433 9.46283C16.481 9.55387 16.5004 9.65145 16.5004 9.75C16.5004 9.84855 16.481 9.94613 16.4433 10.0372C16.4056 10.1282 16.3503 10.2109 16.2806 10.2806Z" fill="#0C7D69"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

3
assets/icon-checkbox-unchecked.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.5 3H4.5C4.10218 3 3.72064 3.15804 3.43934 3.43934C3.15804 3.72064 3 4.10218 3 4.5V19.5C3 19.8978 3.15804 20.2794 3.43934 20.5607C3.72064 20.842 4.10218 21 4.5 21H19.5C19.8978 21 20.2794 20.842 20.5607 20.5607C20.842 20.2794 21 19.8978 21 19.5V4.5C21 4.10218 20.842 3.72064 20.5607 3.43934C20.2794 3.15804 19.8978 3 19.5 3ZM19.5 19.5H4.5V4.5H19.5V19.5Z" fill="#86A2A5"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 486 B

31
package-lock.json generated
View file

@ -5,6 +5,7 @@
"packages": {
"": {
"dependencies": {
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-radio-group": "^1.1.3",
"react": "^18.3.1",
"react-dom": "^18.3.1"
@ -528,6 +529,36 @@
"@babel/runtime": "^7.13.10"
}
},
"node_modules/@radix-ui/react-checkbox": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.0.4.tgz",
"integrity": "sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "1.0.1",
"@radix-ui/react-compose-refs": "1.0.1",
"@radix-ui/react-context": "1.0.1",
"@radix-ui/react-presence": "1.0.1",
"@radix-ui/react-primitive": "1.0.3",
"@radix-ui/react-use-controllable-state": "1.0.1",
"@radix-ui/react-use-previous": "1.0.1",
"@radix-ui/react-use-size": "1.0.1"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-collection": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",

1
package.json
View file

@ -5,6 +5,7 @@
"build": "vite build"
},
"dependencies": {
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-radio-group": "^1.1.3",
"react": "^18.3.1",
"react-dom": "^18.3.1"

58
src/app.jsx
View file

@ -1,6 +1,20 @@
import * as RadioGroup from "@radix-ui/react-radio-group";
import * as Checkbox from "@radix-ui/react-checkbox";
import icon_checkbox_checked from "../assets/icon-checkbox-checked.svg";
import icon_checkbox_unchecked from "../assets/icon-checkbox-unchecked.svg";
import { useState } from "react";
const InputField = ({ label, type = "text", required = false, ...props }) => {
const inputProps = {
className:
"block w-full cursor-pointer rounded-lg border-[1px] border-grey-500 px-300 py-150 text-body-md focus:border-green-600 group-hover:border-green-600",
name: label.toLowerCase().replace(/ /g, "_"),
required: required,
autoComplete: "off",
...props,
};
return (
<label className="group block cursor-pointer space-y-100">
<div className="space-x-100">
@ -9,19 +23,18 @@ const InputField = ({ label, type = "text", required = false, ...props }) => {
</span>
{required && <span className="text-body-sm text-green-600">*</span>}
</div>
<input
className="block w-full cursor-pointer rounded-lg border-[1px] border-grey-500 px-300 py-150 text-body-md focus:border-green-600 group-hover:border-green-600"
name={label.toLowerCase().replace(/ /g, "_")}
required={required}
type={type}
autoComplete="off"
{...props}
/>
{type == "textarea" ? (
<textarea {...inputProps} />
) : (
<input type={type} {...inputProps} />
)}
</label>
);
};
export default () => {
const [checkbox, setCheckbox] = useState(false);
return (
<div className="min-h-dvh bg-green-200 px-200 py-400">
<div className="rounded-2xl bg-white p-300 text-grey-900">
@ -58,7 +71,36 @@ export default () => {
))}
</RadioGroup.Root>
</div>
<InputField label="Message" type="textarea" rows="4" required />
</div>
<div className="my-500 flex items-center">
<Checkbox.Root
className="flex-shrink-0"
checked={checkbox}
onCheckedChange={setCheckbox}
required
id="c1"
>
<img
width="24px"
height="24px"
src={checkbox ? icon_checkbox_checked : icon_checkbox_unchecked}
/>
</Checkbox.Root>
<label
className="mx-200 cursor-pointer text-body-sm text-grey-900"
htmlFor="c1"
>
I consent to being contacted by the team{" "}
<span className="text-green-600">*</span>
</label>
</div>
<button className="w-full rounded-lg bg-green-600 py-200 text-center text-body-md font-bold text-white hover:bg-grey-900">
Submit
</button>
</form>
</div>
</div>