Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
1.6 kB · 63 lines
JavaScript
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364import React from 'react';
import Button from '../Button';
import styles from './ToastPlayground.module.css';
const VARIANT_OPTIONS = ['notice', 'warning', 'success', 'error'];
function ToastPlayground() { return ( <div className={styles.wrapper}> <header> <img alt="Cute toast mascot" src="/toast.png" /> <h1>Toast Playground</h1> </header>
<div className={styles.controlsWrapper}> <div className={styles.row}> <label htmlFor="message" className={styles.label} style={{ alignSelf: 'baseline' }} > Message </label> <div className={styles.inputWrapper}> <textarea id="message" className={styles.messageInput} /> </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> </div>
<div className={styles.row}> <div className={styles.label} /> <div className={`${styles.inputWrapper} ${styles.radioWrapper}`} > <Button>Pop Toast!</Button> </div> </div> </div> </div> );}
export default ToastPlayground;