info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-31 21:11:44 +02:00
Code Issues Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Arik Chakma
2025-07-03 02:14:47 +06:00
parent e7e1c1c8d5
commit bf3e0e4163
1 changed files with 30 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/AIQuiz/AIQuizStripe.tsx
View File

@@ -15,6 +15,36 @@ type AIQuizStripeProps = {
onComplete?: () => void;
};
export function AIQuizStripe(props: AIQuizStripeProps) {
const { activeQuestionIndex, questionStates, onReview, onComplete } = props;
const states = Object.values(questionStates);
return (
<div className="fixed right-0 bottom-0 w-[calc(100vw-255px)] border-t border-gray-200 bg-white p-3">
<div className="flex items-center justify-between gap-2">
<div className="flex w-full gap-2">
{states.map((state, quizIndex) => (
<QuizStateButton
key={quizIndex}
state={state}
quizIndex={quizIndex}
isActive={quizIndex === activeQuestionIndex}
onReview={onReview}
/>
))}
</div>
<button
className="flex shrink-0 items-center gap-2 rounded-xl bg-black px-4 py-2 text-white hover:bg-gray-900 disabled:opacity-70"
onClick={onComplete}
>
Show Results <ArrowRightIcon className="h-4 w-4" />
</button>
</div>
</div>
);
}
type QuizStateButtonProps = {
state: QuestionState;
quizIndex: number;
@@ -53,33 +83,3 @@ export function QuizStateButton(props: QuizStateButtonProps) {
</button>
);
}
export function AIQuizStripe(props: AIQuizStripeProps) {
const { activeQuestionIndex, questionStates, onReview, onComplete } = props;
const states = Object.values(questionStates);
return (
<div className="fixed right-0 bottom-0 w-[calc(100vw-255px)] border-t border-gray-200 bg-white p-3">
<div className="flex items-center justify-between gap-2">
<div className="flex w-full gap-2">
{states.map((state, quizIndex) => (
<QuizStateButton
key={quizIndex}
state={state}
quizIndex={quizIndex}
isActive={quizIndex === activeQuestionIndex}
onReview={onReview}
/>
))}
</div>
<button
className="flex shrink-0 items-center gap-2 rounded-xl bg-black px-4 py-2 text-white hover:bg-gray-900 disabled:opacity-70"
onClick={onComplete}
>
Show Results <ArrowRightIcon className="h-4 w-4" />
</button>
</div>
</div>
);
}