happyz
/
memos
mirror of https://github.com/usememos/memos.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(web): extract NsfwOverlay into standalone component with flexbox centering

This commit is contained in:
Steven 2026-02-12 23:19:54 +08:00
parent aeb1e5fe40
commit 861b58cbf3
1 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
web/src/components/MemoView/components/MemoBody.tsx
View File

@ -7,9 +7,21 @@ import { useMemoViewContext } from "../MemoViewContext";
import type { MemoBodyProps } from "../types";
import { AttachmentList, LocationDisplay, RelationList } from "./metadata";
const MemoBody: React.FC<MemoBodyProps> = ({ compact, onContentClick, onContentDoubleClick, onToggleNsfwVisibility }) => {
const NsfwOverlay: React.FC<{ onClick?: () => void }> = ({ onClick }) => {
const t = useTranslate();
return (
<div className="absolute inset-0 z-10 pt-4 flex items-center justify-center" onClick={onClick}>
<button
type="button"
className="rounded-lg border border-border bg-card px-2 py-1 text-xs text-muted-foreground transition-colors hover:border-accent hover:bg-accent hover:text-foreground"
>
{t("memo.click-to-show-nsfw-content")}
</button>
</div>
);
};
const MemoBody: React.FC<MemoBodyProps> = ({ compact, onContentClick, onContentDoubleClick, onToggleNsfwVisibility }) => {
const { memo, parentPage, showNSFWContent, nsfw } = useMemoViewContext();
const referencedMemos = memo.relations.filter((relation) => relation.type === MemoRelation_Type.REFERENCE);
@ -35,19 +47,7 @@ const MemoBody: React.FC<MemoBodyProps> = ({ compact, onContentClick, onContentD
<MemoReactionListView memo={memo} reactions={memo.reactions} />
</div>
{/* NSFW content overlay */}
{nsfw && !showNSFWContent && (
<>
<div className="absolute inset-0 bg-transparent" />
<button
type="button"
className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 py-2 px-4 text-sm text-muted-foreground hover:text-foreground hover:bg-accent hover:border-accent border border-border rounded-lg bg-card transition-colors"
onClick={onToggleNsfwVisibility}
>
{t("memo.click-to-show-nsfw-content")}
</button>
</>
)}
{nsfw && !showNSFWContent && <NsfwOverlay onClick={onToggleNsfwVisibility} />}
</>
);
};