info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-09-01 05:21:43 +02:00
Code Issues Releases Wiki Activity

fix: responsiveness

Browse Source
This commit is contained in:
Arik Chakma
2025-07-04 00:36:15 +06:00
parent 3948f2cec6
commit c9418b0fa4
4 changed files with 65 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/AIQuiz/AIOpenEndedQuestion.tsx
View File

@@ -57,7 +57,6 @@ export function AIOpenEndedQuestion(props: AIOpenEndedQuestionProps) {
}
setCorrectAnswer(data.feedback || '');
onSubmit(data.status);
},
});

2
src/components/AIQuiz/AIQuiz.tsx
View File

@@ -65,7 +65,7 @@ export function AIQuiz(props: AIQuizProps) {
</div>
)}
<div className="grow overflow-y-auto p-4 pt-0">
<div className="grow">
{quizSlug && !aiQuizError && (
<AIQuizContent
quizSlug={quizSlug}

119
src/components/AIQuiz/AIQuizContent.tsx
View File

@@ -148,69 +148,70 @@ export function AIQuizContent(props: AIQuizContentProps) {
};
return (
<div
className={cn(
'mx-auto w-full max-w-lg py-10',
quizStatus === 'reviewing' && 'pb-24',
)}
>
{shouldShowQuestions && (
<QuizTopNavigation
activeQuestionIndex={activeQuestionIndex}
totalQuestions={totalQuestions}
progressPercentage={progressPercentage}
onPrevious={() => {
if (!hasPreviousQuestion) {
return;
}
<div className="flex h-full w-full flex-col">
<div className="relative flex h-full flex-col overflow-y-auto">
<div className="absolute inset-0 z-10">
<div className="mx-auto max-w-lg bg-white px-4 py-10">
{shouldShowQuestions && (
<QuizTopNavigation
activeQuestionIndex={activeQuestionIndex}
totalQuestions={totalQuestions}
progressPercentage={progressPercentage}
onPrevious={() => {
if (!hasPreviousQuestion) {
return;
}
setActiveQuestionIndex(activeQuestionIndex - 1);
}}
onNext={handleNextQuestion}
/>
)}
setActiveQuestionIndex(activeQuestionIndex - 1);
}}
onNext={handleNextQuestion}
/>
)}
{quizStatus === 'submitted' && (
<AIQuizResults
questionStates={questionStates}
totalQuestions={totalQuestions}
onRetry={handleRetry}
onNewQuiz={() => {
window.location.href = '/ai/quiz';
}}
onReview={(questionIndex) => {
setActiveQuestionIndex(questionIndex);
setQuizStatus('reviewing');
}}
/>
)}
{quizStatus === 'submitted' && (
<AIQuizResults
questionStates={questionStates}
totalQuestions={totalQuestions}
onRetry={handleRetry}
onNewQuiz={() => {
window.location.href = '/ai/quiz';
}}
onReview={(questionIndex) => {
setActiveQuestionIndex(questionIndex);
setQuizStatus('reviewing');
}}
/>
)}
{shouldShowQuestions && (
<>
{activeQuestion && activeQuestion.type === 'mcq' && (
<AIMCQQuestion
question={activeQuestion}
questionState={activeQuestionState}
setSelectedOptions={handleSelectOptions}
onSubmit={handleSubmit}
onNext={handleNextQuestion}
/>
)}
{shouldShowQuestions && (
<>
{activeQuestion && activeQuestion.type === 'mcq' && (
<AIMCQQuestion
question={activeQuestion}
questionState={activeQuestionState}
setSelectedOptions={handleSelectOptions}
onSubmit={handleSubmit}
onNext={handleNextQuestion}
/>
)}
{activeQuestion && activeQuestion.type === 'open-ended' && (
<AIOpenEndedQuestion
key={activeQuestion.id}
quizSlug={quizSlug ?? ''}
question={activeQuestion}
questionState={activeQuestionState}
onSubmit={handleSubmit}
onNext={handleNextQuestion}
setUserAnswer={handleSetUserAnswer}
setCorrectAnswer={handleSetCorrectAnswer}
/>
)}
</>
)}
{activeQuestion && activeQuestion.type === 'open-ended' && (
<AIOpenEndedQuestion
key={activeQuestion.id}
quizSlug={quizSlug ?? ''}
question={activeQuestion}
questionState={activeQuestionState}
onSubmit={handleSubmit}
onNext={handleNextQuestion}
setUserAnswer={handleSetUserAnswer}
setCorrectAnswer={handleSetCorrectAnswer}
/>
)}
</>
)}
</div>
</div>
</div>
{quizStatus === 'reviewing' && (
<AIQuizStripe

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

@@ -20,9 +20,9 @@ export function AIQuizStripe(props: AIQuizStripeProps) {
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">
<div className="border-t border-gray-200 bg-white p-3">
<div className="flex flex-col items-center justify-between gap-2 md:flex-row">
<div className="flex w-full flex-wrap gap-2">
{states.map((state, quizIndex) => (
<QuizStateButton
key={quizIndex}
@@ -35,7 +35,7 @@ export function AIQuizStripe(props: AIQuizStripeProps) {
</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"
className="flex w-full shrink-0 items-center justify-center gap-2 rounded-xl bg-black px-4 py-2 text-white hover:bg-gray-900 disabled:opacity-70 md:w-auto md:justify-start"
onClick={onComplete}
>
Show Results <ArrowRightIcon className="h-4 w-4" />