- implement lists

- implement generic sections
- implement list actions
- implement error handlers

src/components/shared/Avatar.js

@@ -1,15 +1,18 @@
 import cx from "classnames";
-import React, { useContext } from "react";
+import { toUrl } from "gatsby-source-gravatar";
+import React, { useContext, useMemo } from "react";
 import UserContext from "../../contexts/UserContext";
 import styles from "./Avatar.module.css";
 
 const Avatar = ({ className }) => {
   const { user } = useContext(UserContext);
 
+  const photoURL = useMemo(() => toUrl(user.email, "size=128"), [user.email]);
+
   return (
     <img
       className={cx(styles.container, className)}
-      src={user.photoURL}
+      src={photoURL}
       alt={user.displayName}
     />
   );

src/components/shared/Button.js

@@ -1,5 +1,6 @@
 import classNames from "classnames";
 import React from "react";
+import { handleKeyDown } from "../../utils";
 import styles from "./Button.module.css";
 
 const Button = ({
@@ -16,13 +17,11 @@ const Button = ({
     [styles.outline]: outline,
   });
 
-  const handleKeyDown = () => {};
-
   return (
     <button
       type={type}
       className={classes}
-      onKeyDown={handleKeyDown}
+      onKeyDown={(e) => handleKeyDown(e, onClick)}
       onClick={isLoading ? undefined : onClick}
     >
       {icon && <Icon size="14" className="mr-2" />}

src/components/shared/Input.js

@@ -11,6 +11,9 @@ const Input = ({
   label,
   value,
   error,
+  onBlur,
+  touched,
+  checked,
   onChange,
   className,
   placeholder,
@@ -41,11 +44,13 @@ const Input = ({
           name={name}
           type={type}
           value={value}
+          onBlur={onBlur}
+          checked={checked}
           onChange={onChange}
           placeholder={placeholder}
           {...(path && inputProps(path))}
         />
-        <p>{error}</p>
+        {touched && <p>{error}</p>}
       </label>
     </div>
   );