From 462c48735bf122532f946bd5ce9c0a0b7b1308ee Mon Sep 17 00:00:00 2001
From: Max Wofford <max@maxwofford.com>
Date: Fri, 12 Apr 2024 14:49:52 -0400
Subject: [PATCH] Add typed out example projects

---
 package.json |  3 ++-
 pages/bin.js | 47 ++++++++++++++++++++---------------------------
 yarn.lock    | 17 +++++++++++++++--
 3 files changed, 37 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index 06753b29..e7341447 100644
--- a/package.json
+++ b/package.json
@@ -25,13 +25,13 @@
     "@octokit/auth-app": "^6.0.1",
     "@octokit/core": "^5.1.0",
     "@octokit/rest": "^20.0.2",
+    "@sendgrid/mail": "^8.1.1",
     "@tracespace/core": "^5.0.0-alpha.0",
     "@tracespace/identify-layers": "^5.0.0-alpha.0",
     "@tracespace/parser": "^5.0.0-next.0",
     "@tracespace/plotter": "^5.0.0-alpha.0",
     "@tracespace/renderer": "^5.0.0-alpha.0",
     "@tracespace/xml-id": "^4.2.7",
-    "@sendgrid/mail": "^8.1.1",
     "add": "^2.0.6",
     "airtable-plus": "^1.0.4",
     "animated-value": "^0.2.4",
@@ -74,6 +74,7 @@
     "react-ticker": "^1.3.2",
     "react-tooltip": "^4.5.1",
     "react-tsparticles": "^2.12.2",
+    "react-type-animation": "^3.2.0",
     "react-use-websocket": "^4.7.0",
     "react-wrap-balancer": "^1.1.0",
     "recharts": "2.12.2",
diff --git a/pages/bin.js b/pages/bin.js
index a87c679d..4793692d 100644
--- a/pages/bin.js
+++ b/pages/bin.js
@@ -23,9 +23,10 @@ import JSConfetti from 'js-confetti'
 import Sparkles from '../components/sparkles'
 import Icon from "@hackclub/icons"
 import Announcement from '../components/announcement'
+import { TypeAnimation } from 'react-type-animation'
 
 const RsvpCount = () => {
-  const targetRSVPs = 200
+  const targetRSVPs = 500
   const [rsvpCount, setRsvpCount] = useState(0)
   useEffect(async () => {
     // const url = 'https://api2.hackclub.com/v0.1/The Bin/rsvp'  <- switch to this once we have api2 back up and running
@@ -167,7 +168,6 @@ function spinIt(el) {
   el.classList.add("spin");
   setTimeout(() => el.classList.remove("spin"), 500);
 }
-
 export default function Bin() {
   const confettiInstance = useRef(null);
   function fireConfetti() {
@@ -203,10 +203,8 @@ export default function Bin() {
               <Box sx={{
                 '@media (prefers-reduced-motion: no-preference)': {
                   animation: `${wobble} 0.5s ease-in-out infinite alternate`
-                  // animation: `${spin} 2.5s linear infinite`
                 },
               }}>
-
                 <Image
                   src="https://cloud-mt5wqf6f5-hack-club-bot.vercel.app/0rummaging.png"
                   onClick={(e) => { fireConfetti(); crunch(); spinIt(e.target) }}
@@ -220,23 +218,6 @@ export default function Bin() {
                     }
                   }}
                 />
-                {/* <Heading
-                  as="h1"
-                  variant="ultratitle"
-                  py={3}
-                  onClick={() => fireConfetti()}
-                  sx={{
-                    fontSize: '6em',
-                    display: 'inline-block',
-                    cursor: 'pointer',
-                    ':active': {
-                      animation: `${bounce} 0.125s`
-                    },
-
-                  }}
-                >
-                  🗑️
-                </Heading> */}
               </Box>
               <br />
               <RsvpCount />
@@ -245,13 +226,25 @@ export default function Bin() {
                   <Image src="https://cloud-rdlz8he4l-hack-club-bot.vercel.app/0thebin.svg" sx={{ maxWidth: '250px' }} />
                 </Sparkles>
               </Box>
-              {/* <Heading as="h1" variant="ultratitle" py={3}>
-                <Sparkles size={10}>
-                  The Bin
-                </Sparkles>
-              </Heading> */}
               <Text sx={{ fontWeight: 'bold' }}>
-                An electronics starter kit, customized for <em>your</em>&nbsp;project
+              Build{' '}
+                <TypeAnimation
+                cursor={false}
+                sequence={[
+                  // Same substring at the start will only be typed out once, initially
+                  'an RC car',
+                  1000, // wait 1s before replacing "Mice" with "Hamsters"
+                  'a clap activated lamp',
+                  1000,
+                  'a keyboard',
+                  1000,
+                  'an alarm clock',
+                  1000
+                ]}
+                />,
+                <br />
+                with all the parts bought for you
+                {/* An electronics starter kit, customized for <em>your</em>&nbsp;project */}
               </Text>
             </Box>
             <Box as="section" sx={{ textAlign: 'center' }}>
diff --git a/yarn.lock b/yarn.lock
index af956907..86add474 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7497,6 +7497,11 @@ react-tsparticles@^2.12.2:
   dependencies:
     tsparticles-engine "^2.12.0"
 
+react-type-animation@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-type-animation/-/react-type-animation-3.2.0.tgz#6863d5d60e3beb237f2bd690cceb585402c47e6a"
+  integrity sha512-WXTe0i3rRNKjmggPvT5ntye1QBt0ATGbijeW6V3cQe2W0jaMABXXlPPEdtofnS9tM7wSRHchEvI9SUw+0kUohw==
+
 react-use-websocket@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/react-use-websocket/-/react-use-websocket-4.7.0.tgz#e45545ed48eb60171bf6401d1884cc80c700a0ea"
@@ -8234,8 +8239,16 @@ string-hash@1.1.3:
   resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
   integrity sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
-  name string-width-cjs
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==