origin/apps/web/src/components/common/container/CollapsibleContent.tsx

import React, { useEffect, useRef, useState } from "react";
import Quill from "quill";
import "quill/dist/quill.snow.css"; // 引入默认样式
interface CollapsibleContentProps {
	content: string;
	maxHeight?: number;
}

const CollapsibleContent: React.FC<CollapsibleContentProps> = ({
	content,
	maxHeight = 150,
}) => {
	const contentWrapperRef = useRef(null);
	const [isExpanded, setIsExpanded] = useState(false);
	const [shouldCollapse, setShouldCollapse] = useState(false);

	useEffect(() => {
		if (contentWrapperRef.current) {
			const shouldCollapse =
				contentWrapperRef.current.scrollHeight > maxHeight;
			setShouldCollapse(shouldCollapse);
		}
	}, [content]);

	return (
		<div className=" text-base ">
			<div className=" flex flex-col gap-4  border border-white hover:ring-1 ring-white transition-all duration-300 ease-in-out rounded-xl p-6 ">
				{/* 包装整个内容区域的容器 */}
				<div
					ref={contentWrapperRef}
					style={{
						maxHeight:
							shouldCollapse && !isExpanded
								? maxHeight
								: undefined,
					}}
					className={`duration-300 ${
						shouldCollapse && !isExpanded
							? ` overflow-hidden relative`
							: ""
					}`}>
					{/* 内容区域 */}
					<div
						className="ql-editor p-0 space-y-1 leading-relaxed"
						dangerouslySetInnerHTML={{
							__html: content || "",
						}}
					/>

					{/* 渐变遮罩 */}
					{shouldCollapse && !isExpanded && (
						<div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-white to-transparent" />
					)}
				</div>

				{/* 展开/收起按钮 */}
				{shouldCollapse && (
					<button
						onClick={() => setIsExpanded(!isExpanded)}
						className="mt-2 text-blue-500 hover:text-blue-700">
						{isExpanded ? "收起" : "展开"}
					</button>
				)}
				{/* PostResources 组件 */}
				{/* <PostResources post={post} /> */}
			</div>
		</div>
	);
};

export default CollapsibleContent;