Kamran Ahmed
1 year ago
parent
4cb905b69a
commit
2a7fd53c8b
5 changed files with 158 additions and 74 deletions
@ -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<HTMLButtonElement>(null); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="mb-40 gap-3 text-center"> |
||||||
|
<QuestionsProgress /> |
||||||
|
|
||||||
|
{confettiPos && ( |
||||||
|
<ReactConfetti |
||||||
|
numberOfPieces={20} |
||||||
|
recycle={false} |
||||||
|
onConfettiComplete={() => { |
||||||
|
setConfettiPos(undefined); |
||||||
|
}} |
||||||
|
initialVelocityX={2} |
||||||
|
initialVelocityY={8} |
||||||
|
tweenDuration={25} |
||||||
|
confettiSource={{ |
||||||
|
x: confettiPos.x, |
||||||
|
y: confettiPos.y, |
||||||
|
w: confettiPos.w, |
||||||
|
h: confettiPos.h, |
||||||
|
}} |
||||||
|
/> |
||||||
|
)} |
||||||
|
|
||||||
|
<div className="relative mb-4 h-[400px] w-full overflow-hidden rounded-lg border border-gray-300 bg-white"> |
||||||
|
<div className="flex h-full w-full items-center justify-center"> |
||||||
|
<p className="animate-pulse text-2xl text-black duration-100"> |
||||||
|
Please wait .. |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="flex flex-col gap-3 sm:flex-row"> |
||||||
|
<button |
||||||
|
ref={alreadyKnowRef} |
||||||
|
onClick={(e) => { |
||||||
|
const alreadyKnowRect = |
||||||
|
alreadyKnowRef.current?.getBoundingClientRect(); |
||||||
|
const buttonX = alreadyKnowRect?.x || 0; |
||||||
|
const buttonY = alreadyKnowRect?.y || 0; |
||||||
|
|
||||||
|
// set confetti position, keeping in mind the scroll values
|
||||||
|
setConfettiPos({ |
||||||
|
x: buttonX, |
||||||
|
y: buttonY + window.scrollY, |
||||||
|
w: alreadyKnowRect?.width || 0, |
||||||
|
h: alreadyKnowRect?.height || 0, |
||||||
|
}); |
||||||
|
}} |
||||||
|
className="flex flex-1 items-center rounded-xl border border-gray-300 bg-white py-3 px-4 text-black transition-colors hover:border-black hover:bg-black hover:text-white" |
||||||
|
> |
||||||
|
<CheckCircle className="mr-1 h-4 text-current" /> |
||||||
|
Already Know that |
||||||
|
</button> |
||||||
|
<button |
||||||
|
data-next-question="dont-know" |
||||||
|
className="flex flex-1 items-center rounded-xl border border-gray-300 bg-white py-3 px-4 text-black transition-colors hover:border-black hover:bg-black hover:text-white" |
||||||
|
> |
||||||
|
<Sparkles className="mr-1 h-4 text-current" /> |
||||||
|
Didn't Know that |
||||||
|
</button> |
||||||
|
<button |
||||||
|
data-next-question="skip" |
||||||
|
className="flex flex-1 items-center rounded-xl border border-red-600 p-3 text-red-600 hover:bg-red-600 hover:text-white" |
||||||
|
> |
||||||
|
<SkipForward className="mr-1 h-4" /> |
||||||
|
Skip Question |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,37 @@ |
|||||||
|
import {Check, CheckCircle, Lightbulb, PartyPopper, RotateCcw, Sparkles} from 'lucide-react'; |
||||||
|
|
||||||
|
export function QuestionsProgress() { |
||||||
|
return ( |
||||||
|
<div className="mb-5 rounded-lg border border-gray-300 bg-white p-6"> |
||||||
|
<div className="mb-3 flex items-center text-gray-600"> |
||||||
|
<div className="relative w-full flex-1 rounded-xl bg-gray-200 p-1"> |
||||||
|
<div className="absolute bottom-0 left-0 top-0 w-[30%] rounded-xl bg-slate-800"></div> |
||||||
|
</div> |
||||||
|
<span className="ml-3 text-sm">5 / 100</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="relative -left-1 flex flex-col gap-2 text-sm text-black sm:flex-row sm:gap-3"> |
||||||
|
<span className="flex items-center"> |
||||||
|
<CheckCircle className="mr-1 h-4" /> |
||||||
|
<span>Already knew</span> |
||||||
|
<span className="ml-2 rounded-md bg-gray-200/80 px-1.5 font-medium text-black"> |
||||||
|
44 Questions |
||||||
|
</span> |
||||||
|
</span> |
||||||
|
|
||||||
|
<span className="flex items-center"> |
||||||
|
<Sparkles className="mr-1 h-4" /> |
||||||
|
<span>Didn't Know</span> |
||||||
|
<span className="ml-2 rounded-md bg-gray-200/80 px-1.5 font-medium text-black"> |
||||||
|
20 Questions |
||||||
|
</span> |
||||||
|
</span> |
||||||
|
|
||||||
|
<button className="flex items-center text-red-600 hover:text-red-900"> |
||||||
|
<RotateCcw className="mr-1 h-4" /> |
||||||
|
Reset Progress |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
Loading…
Reference in new issue