components/MDX/Modes.tsx

import { MdCheck, MdClose } from "react-icons/md";

type ModesProps = {
    modes: Array<"legacy" | "interaction">;
};

export default function Modes({ modes }: ModesProps) {
    return (
        <div>
            <div className="flex items-center gap-2">
                {modes.includes("legacy") ? (
                    <MdCheck className="text-green-500" />
                ) : (
                    <MdClose className="text-red-500" />
                )}{" "}
                Legacy
            </div>
            <div className="flex items-center gap-2">
                {modes.includes("interaction") ? (
                    <MdCheck className="text-green-500" />
                ) : (
                    <MdClose className="text-red-500" />
                )}{" "}
                Interactions
            </div>
        </div>
    );
}
1	rakinar2	575	import { MdCheck, MdClose } from "react-icons/md";
2
3			type ModesProps = {
4			modes: Array<"legacy" \| "interaction">;
5			};
6
7			export default function Modes({ modes }: ModesProps) {
8			return (
9			<div>
10			<div className="flex items-center gap-2">
11			{modes.includes("legacy") ? (
12			<MdCheck className="text-green-500" />
13			) : (
14			<MdClose className="text-red-500" />
15			)}{" "}
16			Legacy
17			</div>
18			<div className="flex items-center gap-2">
19			{modes.includes("interaction") ? (
20			<MdCheck className="text-green-500" />
21			) : (
22			<MdClose className="text-red-500" />
23			)}{" "}
24			Interactions
25			</div>
26			</div>
27			);
28			}