diff --git a/package.json b/package.json index dd6a33a4a..095972322 100644 --- a/package.json +++ b/package.json @@ -32,10 +32,12 @@ "astro-compress": "^2.0.8", "jose": "^4.14.4", "js-cookie": "^3.0.5", + "lucide-react": "^0.274.0", "nanostores": "^0.9.2", "node-html-parser": "^6.1.5", "npm-check-updates": "^16.10.12", "react": "^18.0.0", + "react-confetti": "^6.1.0", "react-dom": "^18.0.0", "rehype-external-links": "^2.1.0", "roadmap-renderer": "^1.0.6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index decbea61c..208bd6f87 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ dependencies: js-cookie: specifier: ^3.0.5 version: 3.0.5 + lucide-react: + specifier: ^0.274.0 + version: 0.274.0(react@18.0.0) nanostores: specifier: ^0.9.2 version: 0.9.2 @@ -50,6 +53,9 @@ dependencies: react: specifier: ^18.0.0 version: 18.0.0 + react-confetti: + specifier: ^6.1.0 + version: 6.1.0(react@18.0.0) react-dom: specifier: ^18.0.0 version: 18.0.0(react@18.0.0) @@ -1519,7 +1525,7 @@ packages: dependencies: browserslist: 4.21.10 caniuse-lite: 1.0.30001525 - fraction.js: 4.3.4 + fraction.js: 4.3.6 normalize-range: 0.1.2 picocolors: 1.0.0 postcss: 8.4.29 @@ -1611,7 +1617,7 @@ packages: hasBin: true dependencies: caniuse-lite: 1.0.30001525 - electron-to-chromium: 1.4.507 + electron-to-chromium: 1.4.508 node-releases: 2.0.13 update-browserslist-db: 1.0.11(browserslist@4.21.10) dev: false @@ -2124,8 +2130,8 @@ packages: resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==} dev: false - /electron-to-chromium@1.4.507: - resolution: {integrity: sha512-brvPFnO1lu3UYBpBht2qWw9qqhdG4htTjT90/9oOJmxQ77VvTxL9+ghErFqQzgj7n8268ONAmlebqjBR/S+qgA==} + /electron-to-chromium@1.4.508: + resolution: {integrity: sha512-FFa8QKjQK/A5QuFr2167myhMesGrhlOBD+3cYNxO9/S4XzHEXesyTD/1/xF644gC8buFPz3ca6G1LOQD0tZrrg==} dev: false /email-addresses@5.0.0: @@ -2426,8 +2432,8 @@ packages: engines: {node: '>=10'} dev: false - /fraction.js@4.3.4: - resolution: {integrity: sha512-pwiTgt0Q7t+GHZA4yaLjObx4vXmmdcS0iSJ19o8d/goUGgItX9UZWKWNnLHehxviD8wU2IWRsnR8cD5+yOJP2Q==} + /fraction.js@4.3.6: + resolution: {integrity: sha512-n2aZ9tNfYDwaHhvFTkhFErqOMIb8uyzSQ+vGJBjZyanAKZVbGUQ1sngfk9FdkBw7G26O7AgNjLcecLffD1c7eg==} dev: false /fs-constants@1.0.0: @@ -3239,6 +3245,14 @@ packages: engines: {node: '>=12'} dev: false + /lucide-react@0.274.0(react@18.0.0): + resolution: {integrity: sha512-qiWcojRXEwDiSimMX1+arnxha+ROJzZjJaVvCC0rsG6a9pUPjZePXSq7em4ZKMp0NDm1hyzPNkM7UaWC3LU2AA==} + peerDependencies: + react: ^16.5.1 || ^17.0.0 || ^18.0.0 + dependencies: + react: 18.0.0 + dev: false + /magic-string@0.30.3: resolution: {integrity: sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==} engines: {node: '>=12'} @@ -4607,6 +4621,16 @@ packages: strip-json-comments: 2.0.1 dev: false + /react-confetti@6.1.0(react@18.0.0): + resolution: {integrity: sha512-7Ypx4vz0+g8ECVxr88W9zhcQpbeujJAVqL14ZnXJ3I23mOI9/oBVTQ3dkJhUmB0D6XOtCZEM6N0Gm9PMngkORw==} + engines: {node: '>=10.18'} + peerDependencies: + react: ^16.3.0 || ^17.0.1 || ^18.0.0 + dependencies: + react: 18.0.0 + tween-functions: 1.2.0 + dev: false + /react-dom@18.0.0(react@18.0.0): resolution: {integrity: sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==} peerDependencies: @@ -5443,6 +5467,10 @@ packages: safe-buffer: 5.2.1 dev: false + /tween-functions@1.2.0: + resolution: {integrity: sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA==} + dev: false + /type-fest@0.13.1: resolution: {integrity: sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==} engines: {node: '>=10'} diff --git a/src/components/Questions/QuestionsList.tsx b/src/components/Questions/QuestionsList.tsx new file mode 100644 index 000000000..f4bfed6ca --- /dev/null +++ b/src/components/Questions/QuestionsList.tsx @@ -0,0 +1,83 @@ +import { QuestionsProgress } from './QuestionsProgress'; +import { CheckCircle, SkipForward, Sparkles } from 'lucide-react'; +import { useRef, useState } from 'react'; +import ReactConfetti from 'react-confetti'; + +export function QuestionsList() { + const [confettiPos, setConfettiPos] = useState< + undefined | { x: number; y: number; w: number; h: number } + >(undefined); + + const alreadyKnowRef = useRef(null); + + return ( +
+ + + {confettiPos && ( + { + setConfettiPos(undefined); + }} + initialVelocityX={2} + initialVelocityY={8} + tweenDuration={25} + confettiSource={{ + x: confettiPos.x, + y: confettiPos.y, + w: confettiPos.w, + h: confettiPos.h, + }} + /> + )} + +
+
+

+ Please wait .. +

+
+
+ +
+ + + +
+
+ ); +} diff --git a/src/components/Questions/QuestionsProgress.tsx b/src/components/Questions/QuestionsProgress.tsx new file mode 100644 index 000000000..9f628a514 --- /dev/null +++ b/src/components/Questions/QuestionsProgress.tsx @@ -0,0 +1,37 @@ +import {Check, CheckCircle, Lightbulb, PartyPopper, RotateCcw, Sparkles} from 'lucide-react'; + +export function QuestionsProgress() { + return ( +
+
+
+
+
+ 5 / 100 +
+ +
+ + + Already knew + + 44 Questions + + + + + + Didn't Know + + 20 Questions + + + + +
+
+ ); +} diff --git a/src/pages/questions/[questionGroupId].astro b/src/pages/questions/[questionGroupId].astro index 414f5fe2f..29506b74f 100644 --- a/src/pages/questions/[questionGroupId].astro +++ b/src/pages/questions/[questionGroupId].astro @@ -4,6 +4,7 @@ import SimplePageHeader from '../../components/SimplePageHeader.astro'; import BaseLayout from '../../layouts/BaseLayout.astro'; import Footer from '../../components/Footer.astro'; import AstroIcon from "../../components/AstroIcon.astro"; +import { QuestionsList } from '../../components/Questions/QuestionsList'; export async function getStaticPaths() { return [ @@ -34,74 +35,7 @@ export async function getStaticPaths() {

-
- -
-
-
-
-
-
- 5 / 100 -
- -
- - - Already knew - 44 Questions - - - - - Didn't Know - 20 Questions - - - -
-
- -
-
-

- Please wait .. -

-
-
- -
- - - -
-
+