Add toast

assets/check.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.2806 9.71937C16.3504 9.78903 16.4057 9.87175 16.4434 9.96279C16.4812 10.0538 16.5006 10.1514 16.5006 10.25C16.5006 10.3486 16.4812 10.4462 16.4434 10.5372C16.4057 10.6283 16.3504 10.711 16.2806 10.7806L11.0306 16.0306C10.961 16.1004 10.8783 16.1557 10.7872 16.1934C10.6962 16.2312 10.5986 16.2506 10.5 16.2506C10.4014 16.2506 10.3038 16.2312 10.2128 16.1934C10.1218 16.1557 10.039 16.1004 9.96938 16.0306L7.71938 13.7806C7.57865 13.6399 7.49959 13.449 7.49959 13.25C7.49959 13.051 7.57865 12.8601 7.71938 12.7194C7.86011 12.5786 8.05098 12.4996 8.25 12.4996C8.44903 12.4996 8.6399 12.5786 8.78063 12.7194L10.5 14.4397L15.2194 9.71937C15.289 9.64964 15.3718 9.59432 15.4628 9.55658C15.5538 9.51884 15.6514 9.49941 15.75 9.49941C15.8486 9.49941 15.9462 9.51884 16.0372 9.55658C16.1283 9.59432 16.211 9.64964 16.2806 9.71937ZM21.75 12.5C21.75 14.4284 21.1782 16.3134 20.1068 17.9168C19.0355 19.5202 17.5127 20.7699 15.7312 21.5078C13.9496 22.2458 11.9892 22.4389 10.0979 22.0627C8.20656 21.6865 6.46928 20.7579 5.10571 19.3943C3.74215 18.0307 2.81355 16.2934 2.43735 14.4021C2.06114 12.5108 2.25422 10.5504 2.99218 8.76884C3.73013 6.98726 4.97982 5.46451 6.58319 4.39317C8.18657 3.32183 10.0716 2.75 12 2.75C14.585 2.75273 17.0634 3.78084 18.8913 5.60872C20.7192 7.43661 21.7473 9.91498 21.75 12.5ZM20.25 12.5C20.25 10.8683 19.7661 9.27325 18.8596 7.91655C17.9531 6.55984 16.6646 5.50242 15.1571 4.87799C13.6497 4.25357 11.9909 4.09019 10.3905 4.40852C8.79017 4.72685 7.32016 5.51259 6.16637 6.66637C5.01259 7.82015 4.22685 9.29016 3.90853 10.8905C3.5902 12.4908 3.75358 14.1496 4.378 15.6571C5.00242 17.1646 6.05984 18.4531 7.41655 19.3596C8.77326 20.2661 10.3683 20.75 12 20.75C14.1873 20.7475 16.2843 19.8775 17.8309 18.3309C19.3775 16.7843 20.2475 14.6873 20.25 12.5Z" fill="white"/>
+</svg>

package-lock.json

@@ -7,6 +7,7 @@
       "dependencies": {
         "@radix-ui/react-checkbox": "^1.0.4",
         "@radix-ui/react-radio-group": "^1.1.3",
+        "@radix-ui/react-toast": "^1.1.5",
         "clsx": "^2.1.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -638,6 +639,33 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz",
+      "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-escape-keydown": "1.0.3"
+      },
+      "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-id": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
@@ -656,6 +684,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz",
+      "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "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-presence": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz",
@@ -784,6 +835,40 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-toast": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.1.5.tgz",
+      "integrity": "sha512-fRLn227WHIBRSzuRzGJ8W+5YALxofH23y0MlPLddaIpLpCDqdE0NZlS2NRQDRiptfxDeeCjgFIpexB1/zkxDlw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-visually-hidden": "1.0.3"
+      },
+      "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-use-callback-ref": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
@@ -819,6 +904,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
+      "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-layout-effect": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
@@ -871,6 +974,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz",
+      "integrity": "sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "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/@rollup/rollup-android-arm-eabi": {
       "version": "4.18.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz",

package.json

@@ -7,6 +7,7 @@
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-toast": "^1.1.5",
     "clsx": "^2.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/app.jsx

@@ -1,9 +1,11 @@
-import { useState } from "react";
-import * as RadioGroup from "@radix-ui/react-radio-group";
 import * as Checkbox from "@radix-ui/react-checkbox";
+import * as RadioGroup from "@radix-ui/react-radio-group";
+import * as Toast from "@radix-ui/react-toast";
+import { useState } from "react";
 
 import icon_checkbox_checked from "../assets/icon-checkbox-checked.svg";
 import icon_checkbox_unchecked from "../assets/icon-checkbox-unchecked.svg";
+import icon_check from "../assets/check.svg";
 
 import { Button } from "./components/button";
 import { Input } from "./components/input";
@@ -26,10 +28,12 @@ const InputField = ({ label, type = "text", required = false, ...props }) => {
 };
 
 export default function App() {
-  const [checkbox, setCheckbox] = useState(false);
+  const [toastOpen, setToastOpen] = useState(false);
 
   return (
     <div className="min-h-dvh bg-green-200 px-200 py-400">
+      <Toast.Provider>
+        <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">
           <form action="">
             <h1 className="text-heading">Contact Us</h1>
@@ -68,32 +72,46 @@ export default function App() {
               <InputField label="Message" type="textarea" rows="4" required />
             </div>
 
-          <div className="my-500 flex items-center">
+            <label className="my-500 flex cursor-pointer items-center">
               <Checkbox.Root
-              className="flex-shrink-0"
+                className="size-300 flex-shrink-0"
-              checked={checkbox}
+                style={{ backgroundImage: `url('${icon_checkbox_unchecked}')` }}
-              onCheckedChange={setCheckbox}
                 required
-              id="c1"
               >
-              <img
+                <Checkbox.Indicator>
-                width="24px"
+                  <img src={icon_checkbox_checked} />
-                height="24px"
+                </Checkbox.Indicator>
-                src={checkbox ? icon_checkbox_checked : icon_checkbox_unchecked}
-              />
               </Checkbox.Root>
-            <label
+              <div className="mx-200 space-x-100 text-body-sm text-grey-900">
-              className="mx-200 cursor-pointer space-x-100 text-body-sm text-grey-900"
-              htmlFor="c1"
-            >
                 <span>I consent to being contacted by the team</span>
                 <span className="text-green-600">*</span>
-            </label>
               </div>
+            </label>
 
-          <Button>Submit</Button>
+            <Button
+              type="button"
+              onClick={() => {
+                setToastOpen((toastOpen) => !toastOpen);
+              }}
+            >
+              Submit
+            </Button>
           </form>
         </div>
+        <Toast.Root
+          className="space-y-100 rounded-xl bg-grey-900 p-300"
+          open={toastOpen}
+          onOpenChange={setToastOpen}
+        >
+          <Toast.Title className="flex space-x-100 text-body-md font-bold text-white">
+            <img src={icon_check} />
+            <span>Message Sent!</span>
+          </Toast.Title>
+          <Toast.Description className="text-body-sm text-green-200">
+            Thanks for completing the form. We'll be in touch soon!
+          </Toast.Description>
+        </Toast.Root>
+      </Toast.Provider>
     </div>
   );
 }

tailwind.config.js

@@ -48,6 +48,7 @@ export default {
       ],
     },
     spacing: {
+      0: "0",
       100: "0.5rem",
       150: "0.75rem",
       200: "1rem",