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