41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import Dropdown from "@/components/Dropdown";
|
|
import clsx from "clsx";
|
|
|
|
interface Props {
|
|
title: string;
|
|
content: string;
|
|
open: boolean;
|
|
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
|
}
|
|
|
|
const Passage: React.FC<Props> = ({ title, content, open, setIsOpen}) => {
|
|
const paragraphs = content.split('\n\n');
|
|
|
|
return (
|
|
<Dropdown
|
|
title={title}
|
|
className={clsx(
|
|
"bg-white p-6 w-full items-center",
|
|
open ? "rounded-t-lg border-b border-gray-200" : "rounded-lg shadow-lg"
|
|
)}
|
|
titleClassName="text-2xl font-semibold text-gray-800"
|
|
contentWrapperClassName="p-6 bg-white rounded-b-lg shadow-md transition-all duration-300 ease-in-out"
|
|
open={open}
|
|
setIsOpen={setIsOpen}
|
|
>
|
|
<div>
|
|
{paragraphs.map((paragraph, index) => (
|
|
<p
|
|
key={index}
|
|
className={clsx("text-justify", index < paragraphs.length - 1 ? 'mb-4' : 'mb-6')}
|
|
>
|
|
{paragraph.trim()}
|
|
</p>
|
|
))}
|
|
</div>
|
|
</Dropdown>
|
|
);
|
|
}
|
|
|
|
export default Passage;
|