50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
import { useState } from "react";
|
|
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: externalOpen, setIsOpen: externalSetIsOpen }) => {
|
|
const [internalOpen, setInternalOpen] = useState(false);
|
|
|
|
const isOpen = externalOpen ?? internalOpen;
|
|
const setIsOpen = externalSetIsOpen ?? setInternalOpen;
|
|
|
|
const paragraphs = content.split('\n\n');
|
|
|
|
return (
|
|
<Dropdown
|
|
title={title}
|
|
className={clsx(
|
|
"bg-white p-6 w-full items-center",
|
|
isOpen ? "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={isOpen}
|
|
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;
|