feat: add confetti animation

package.json

@@ -23,6 +23,7 @@
     "moment": "^2.29.4",
     "qr-code-styling": "^1.6.0-rc.1",
     "react": "^18.2.0",
+    "react-confetti": "^6.1.0",
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^9.5.1",
     "react-router-dom": "^6.13.0",

src/element/goal.tsx

@@ -1,6 +1,7 @@
 import "./goal.css";
 import { useMemo } from "react";
 import * as Progress from "@radix-ui/react-progress";
+import Confetti from "react-confetti";
 import { NostrLink, ParsedZap, NostrEvent } from "@snort/system";
 import { Icon } from "./icon";
 import { findTag } from "utils";
@@ -55,6 +56,7 @@ export function Goal({
           />
         </div>
       </div>
+      {isFinished && <Confetti numberOfPieces={2100} recycle={false} />}
     </div>
   );
 }

yarn.lock

@@ -5362,6 +5362,13 @@ raw-body@2.5.1:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+react-confetti@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-confetti/-/react-confetti-6.1.0.tgz#03dc4340d955acd10b174dbf301f374a06e29ce6"
+  integrity sha512-7Ypx4vz0+g8ECVxr88W9zhcQpbeujJAVqL14ZnXJ3I23mOI9/oBVTQ3dkJhUmB0D6XOtCZEM6N0Gm9PMngkORw==
+  dependencies:
+    tween-functions "^1.2.0"
+
 react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
@@ -6204,6 +6211,11 @@ tsutils@^3.21.0:
   dependencies:
     tslib "^1.8.1"
 
+tween-functions@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tween-functions/-/tween-functions-1.2.0.tgz#1ae3a50e7c60bb3def774eac707acbca73bbc3ff"
+  integrity sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA==
+
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"