finish avatar generator example

examples/avatar-generator/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "party-js": "^2.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/avatar-generator/src/App.jsx

@@ -1,12 +1,16 @@
-import { useState } from "react";
+import { useState, useRef } from "react";
 import "./App.css";
 import UserCard from "./components/UserCard";
 import Button from "./components/Button";
+import Header from "./components/Header";
+import party from "party-js";
 
 function App() {
   const [name, setName] = useState("");
   const [avatar, setAvatar] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const [headerValue, setHeaderValue] = useState("Avatar Generator");
+  const ref = useRef(null);
 
   async function getAvatar(name, gender) {
     const url = `https://avatars.dicebear.com/api/${gender}/${name}.svg`;
@@ -26,11 +30,30 @@ function App() {
     getAvatar(fullName, gender);
   }
 
+  function startParty() {
+    party.confetti(ref.current, {
+      count: party.variation.range(20, 40),
+      spread: party.variation.range(10, 20),
+      size: party.variation.range(1, 3),
+    });
+    setHeaderValue(name);
+  }
+
   return (
     <div className="wrapper">
-      <h1 align="center">Avatar Generator</h1>
-      <Button onClick={() => generateRandomUser()}>Generate User</Button>
+      <Header value={headerValue} setValue={setHeaderValue} />
+      <Button ref={ref} onClick={() => generateRandomUser()}>
+        Generate User
+      </Button>
       <UserCard isLoading={isLoading} name={name} avatar={avatar} />
+      {avatar !== "" && (
+        <Button
+          onClick={startParty}
+          style={{ background: "green", color: "white" }}
+        >
+          Select as Avatar
+        </Button>
+      )}
     </div>
   );
 }

examples/avatar-generator/src/components/Button.jsx

@@ -1,9 +1,12 @@
+import { forwardRef } from "react";
 import styles from "./Button.module.css";
 
-export default function Button(props) {
+const Button = forwardRef((props, ref) => {
   return (
-    <button className={styles.btn} {...props}>
+    <button className={styles.btn} ref={ref} {...props}>
       {props.children}
     </button>
   );
-}
+});
+
+export default Button;

examples/avatar-generator/src/components/Header.jsx

@@ -0,0 +1,25 @@
+import { useState } from "react";
+import Button from "./Button";
+
+export default function Header(props) {
+  const [isEditMode, setIsEditMode] = useState(false);
+
+  return (
+    <div>
+      {isEditMode ? (
+        <>
+          <input
+            style={{ height: 70, fontSize: 28, marginRight: 5 }}
+            value={props.value}
+            onChange={(e) => props.setValue(e.target.value)}
+          />
+          <Button onClick={() => setIsEditMode(false)}>✔️</Button>
+        </>
+      ) : (
+        <h1 onClick={() => setIsEditMode(true)} align="center">
+          {props.value}
+        </h1>
+      )}
+    </div>
+  );
+}

examples/avatar-generator/src/components/UserCard.module.css

@@ -1,8 +1,8 @@
 .wrapper {
-  background: lightblue;
+  background: #eee;
 	padding: 20px;
 	width: 100%;
-	border: 1px solid black;
+	border: 1px solid #eee;
 	border-radius: 10px;
 	height: 200px;
 	display: flex;

examples/avatar-generator/src/index.css

@@ -10,6 +10,6 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  background-image: linear-gradient(to right, #439bff, #2f61fe);
+  background-image: linear-gradient(to right, #19FD8280, #17FE5B50);
   height: 100vh;
 }

examples/todo-react/README.md

@@ -0,0 +1,7 @@
+- [JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
+
+- [Controlled vs Uncontrolled Forms](https://reactjs.org/docs/uncontrolled-components.html#:~:text=In%20a%20controlled%20component%2C%20form,form%20values%20from%20the%20DOM.)
+
+- [vite](https://vitejs.dev/)
+
+- [React](https://beta.reactjs.org/learn)

yarn.lock

@@ -611,6 +611,11 @@ node-releases@^2.0.6:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503"
   integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==
 
+party-js@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/party-js/-/party-js-2.2.0.tgz#3340026971c9e62fd34db102daaa645fbc9130b8"
+  integrity sha512-50hGuALCpvDTrQLPQ1fgUgxKIWAH28ShVkmeK/3zhO0YJyCqkhrZhQEkWPxDYLvbFJ7YAXyROmFEu35gKpZLtQ==
+
 path-parse@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"