21 lines
558 B
TypeScript
21 lines
558 B
TypeScript
import classNames from "classnames";
|
|
import { useState } from "react";
|
|
|
|
interface Props {
|
|
content: string;
|
|
}
|
|
|
|
const Spoiler: React.FC<Props> = ({ content }: Props) => {
|
|
const [isRevealed, setIsRevealed] = useState(false);
|
|
|
|
return (
|
|
<span
|
|
className={classNames("inline cursor-pointer select-none", isRevealed ? "" : "bg-gray-200 dark:bg-zinc-700")}
|
|
onClick={() => setIsRevealed(!isRevealed)}
|
|
>
|
|
<span className={classNames(isRevealed ? "opacity-100" : "opacity-0")}>{content}</span>
|
|
</span>
|
|
);
|
|
};
|
|
|
|
export default Spoiler;
|