72 lines
2.6 KiB
TypeScript
72 lines
2.6 KiB
TypeScript
import { X } from "lucide-react";
|
||
import type { Comment, User } from "../types";
|
||
import { CommentList } from "./CommentList";
|
||
|
||
interface CommentPanelProps {
|
||
open: boolean;
|
||
onClose: () => void;
|
||
author: User;
|
||
createdAt: string | Date;
|
||
comments: Comment[];
|
||
mounted: boolean;
|
||
}
|
||
|
||
export function CommentPanel({ open, onClose, author, createdAt, comments, mounted }: CommentPanelProps) {
|
||
return (
|
||
<>
|
||
{/* 横屏评论面板：并排分栏 */}
|
||
<aside
|
||
className={`
|
||
hidden landscape:flex
|
||
z-30 flex-col bg-[rgba(22,22,22,0.92)] text-white
|
||
relative h-full overflow-hidden
|
||
${mounted ? "transition-[width] duration-200 ease-out" : ""}
|
||
${open ? "w-[min(420px,36vw)] border-l border-white/10" : "w-0"}
|
||
`}
|
||
>
|
||
<div className="flex items-center justify-between px-3 py-3 border-b border-white/10">
|
||
<button
|
||
className="w-8 h-8 inline-flex items-center justify-center rounded-full bg-white/15 text-white/90 border border-white/20 hover:bg-white/25 transition-colors"
|
||
onClick={onClose}
|
||
aria-label="关闭评论"
|
||
>
|
||
<X size={18} />
|
||
</button>
|
||
<div className="text-white font-semibold">评论 {comments.length > 0 ? `(${comments.length})` : ""}</div>
|
||
</div>
|
||
|
||
<div className="p-3 overflow-auto">
|
||
<CommentList author={author} createdAt={createdAt} comments={comments} />
|
||
</div>
|
||
</aside>
|
||
|
||
{/* 竖屏评论面板：bottom sheet */}
|
||
<aside
|
||
className={`
|
||
landscape:hidden
|
||
z-30 flex flex-col bg-[rgba(22,22,22,0.92)] text-white
|
||
fixed inset-x-0 bottom-0 w-full h-[min(80vh,88dvh)]
|
||
${mounted ? "transition-transform duration-200 ease-out" : ""}
|
||
border-t border-white/10
|
||
${open ? "translate-y-0" : "translate-y-full"}
|
||
`}
|
||
>
|
||
<div className="flex items-center justify-between px-3 py-3 border-b border-white/10">
|
||
<div className="text-white font-semibold">评论 {comments.length > 0 ? `(${comments.length})` : ""}</div>
|
||
<button
|
||
className="w-8 h-8 inline-flex items-center justify-center rounded-full bg-white/15 text-white/90 border border-white/20 hover:bg-white/25 transition-colors"
|
||
onClick={onClose}
|
||
aria-label="关闭评论"
|
||
>
|
||
<X size={18} />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="p-3 overflow-auto">
|
||
<CommentList author={author} createdAt={createdAt} comments={comments} />
|
||
</div>
|
||
</aside>
|
||
</>
|
||
);
|
||
}
|