48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import { Question } from "@/models/quizQuestions.model";
|
|
import React from "react";
|
|
|
|
interface IQuizTabProps {
|
|
steps: {
|
|
tapgyr: number;
|
|
questions: Question[];
|
|
}[];
|
|
setStep: React.Dispatch<React.SetStateAction<number | string>>;
|
|
tab: number | string;
|
|
}
|
|
|
|
function QuizResultsTabs({ steps, setStep, tab }: IQuizTabProps) {
|
|
return (
|
|
<div className="flex gap-[10px] w-full md:w-1/2 self-center">
|
|
{steps.map((item) => (
|
|
<button
|
|
onClick={() => {
|
|
setStep(item.tapgyr - 1);
|
|
}}
|
|
key={item.tapgyr}
|
|
className={`flex-1 py-[5px] rounded-lg transition-all duration-300 ${
|
|
tab === item.tapgyr - 1
|
|
? "bg-lightPrimary text-white"
|
|
: "bg-lightPrimaryContainer text-textLight"
|
|
}`}
|
|
>
|
|
{item.tapgyr}
|
|
</button>
|
|
))}
|
|
<button
|
|
onClick={() => {
|
|
setStep("results");
|
|
}}
|
|
className={`flex-1 py-[5px] rounded-lg transition-all duration-300 ${
|
|
tab === "results"
|
|
? "bg-lightPrimary text-white"
|
|
: "bg-lightPrimaryContainer text-textLight"
|
|
}`}
|
|
>
|
|
Netije
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default QuizResultsTabs;
|