31 lines
1.0 KiB
TypeScript
31 lines
1.0 KiB
TypeScript
import {Module} from "@/interfaces";
|
|
import clsx from "clsx";
|
|
import {BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
|
|
|
|
interface Props {
|
|
module: Module;
|
|
children: string;
|
|
}
|
|
|
|
export default function Badge({module, children}: Props) {
|
|
return (
|
|
<div
|
|
key={module}
|
|
className={clsx(
|
|
"flex gap-2 items-center w-fit text-white -md:px-4 xl:px-4 md:px-2 py-2 rounded-xl",
|
|
module === "reading" && "bg-ielts-reading",
|
|
module === "listening" && "bg-ielts-listening",
|
|
module === "writing" && "bg-ielts-writing",
|
|
module === "speaking" && "bg-ielts-speaking",
|
|
module === "level" && "bg-ielts-level",
|
|
)}>
|
|
{module === "reading" && <BsBook className="w-4 h-4" />}
|
|
{module === "listening" && <BsHeadphones className="w-4 h-4" />}
|
|
{module === "writing" && <BsPen className="w-4 h-4" />}
|
|
{module === "speaking" && <BsMegaphone className="w-4 h-4" />}
|
|
{module === "level" && <BsClipboard className="w-4 h-4" />}
|
|
<span className="text-sm">{children}</span>
|
|
</div>
|
|
);
|
|
}
|