Toast preview

package.json

@@ -2,7 +2,7 @@
   "name": "toast-component",
   "version": "0.1.0",
   "private": true,
-  "author": "Josh Comeau <me@joshwcomeau.com>",
+  "author": "Josh Comeau <me@joshwcomeau.com>, Samuel Alvarez",
   "dependencies": {
     "eslint": "^8.49.0",
     "eslint-config-react-app": "^7.0.1",

src/components/Toast/Toast.js

@@ -18,16 +18,16 @@ const ICONS_BY_VARIANT = {
   error: AlertOctagon,
 };
 
-function Toast() {
+function Toast({ variant, handleDismiss, children }) {
+  const Tag = ICONS_BY_VARIANT[variant];
+
   return (
-    <div className={`${styles.toast} ${styles.notice}`}>
+    <div className={`${styles.toast} ${styles[variant]}`}>
       <div className={styles.iconContainer}>
-        <Info size={24} />
+        <Tag size={24} />
       </div>
-      <p className={styles.content}>
-        16 photos have been uploaded
-      </p>
-      <button className={styles.closeButton}>
+      <p className={styles.content}>{children}</p>
+      <button className={styles.closeButton} onClick={handleDismiss}>
         <X size={24} />
         <VisuallyHidden>Dismiss message</VisuallyHidden>
       </button>

src/components/ToastPlayground/ToastPlayground.js

@@ -3,18 +3,40 @@ import React from 'react';
 import Button from '../Button';
 
 import styles from './ToastPlayground.module.css';
+import Toast from '../Toast/Toast';
 
 const VARIANT_OPTIONS = ['notice', 'warning', 'success', 'error'];
 
 function ToastPlayground() {
+  const [value, setValue] = React.useState('');
+  const [variant, setVariant] = React.useState(VARIANT_OPTIONS[0]);
+  const [isShowing, setIsShowing] = React.useState(false);
+
+  const handleDismiss = () => {
+    setIsShowing(false);
+  };
+
   return (
     <div className={styles.wrapper}>
       <header>
         <img alt="Cute toast mascot" src="/toast.png" />
         <h1>Toast Playground</h1>
       </header>
 
-      <div className={styles.controlsWrapper}>
+      {isShowing && (
+        <Toast variant={variant} handleDismiss={handleDismiss}>
+          {value}
+        </Toast>
+      )}
+
+      <form
+        className={styles.controlsWrapper}
+        onSubmit={(e) => {
+          e.preventDefault();
+          setValue('');
+          setIsShowing(true);
+        }}
+      >
         <div className={styles.row}>
           <label
             htmlFor="message"
@@ -24,38 +46,44 @@ function ToastPlayground() {
             Message
           </label>
           <div className={styles.inputWrapper}>
-            <textarea id="message" className={styles.messageInput} />
+            <textarea
+              id="message"
+              className={styles.messageInput}
+              style={{ resize: 'none' }}
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+            />
           </div>
         </div>
-
         <div className={styles.row}>
           <div className={styles.label}>Variant</div>
-          <div
-            className={`${styles.inputWrapper} ${styles.radioWrapper}`}
-          >
-            <label htmlFor="variant-notice">
-              <input
-                id="variant-notice"
-                type="radio"
-                name="variant"
-                value="notice"
-              />
-              notice
-            </label>
-
-            {/* TODO Other Variant radio buttons here */}
+          <div className={`${styles.inputWrapper} ${styles.radioWrapper}`}>
+            {VARIANT_OPTIONS.map((option) => {
+              const id = `variant-${option}`;
+              return (
+                <label key={id} htmlFor={id}>
+                  <input
+                    type="radio"
+                    id={id}
+                    key={id}
+                    name="variant"
+                    value={option}
+                    checked={variant === option}
+                    onChange={(e) => setVariant(e.target.value)}
+                  />
+                  {option}
+                </label>
+              );
+            })}
           </div>
         </div>
-
         <div className={styles.row}>
           <div className={styles.label} />
-          <div
-            className={`${styles.inputWrapper} ${styles.radioWrapper}`}
-          >
-            <Button>Pop Toast!</Button>
+          <div className={`${styles.inputWrapper} ${styles.radioWrapper}`}>
+            <Button onClick={() => setIsShowing(true)}>Pop Toast!</Button>
           </div>
         </div>
-      </div>
+      </form>
     </div>
   );
 }