diff --git a/packages/app/src/components/PostCard/components/content/index.jsx b/packages/app/src/components/PostCard/components/content/index.jsx
index ceb761e4..293b661f 100755
--- a/packages/app/src/components/PostCard/components/content/index.jsx
+++ b/packages/app/src/components/PostCard/components/content/index.jsx
@@ -1,4 +1,5 @@
import React from "react"
+import classnames from "classnames"
import * as antd from "antd"
import Plyr from "plyr-react"
@@ -11,7 +12,11 @@ import PostAttachments from "../attachments"
import "./index.less"
export default React.memo((props) => {
- let { message, attachments, type, data } = props.data
+ let { message, attachments, type, data, flags } = props.data
+
+ const [nsfwAccepted, setNsfwAccepted] = React.useState(false)
+
+ const isNSFW = flags?.includes("nsfw")
if (typeof data === "string") {
try {
@@ -105,7 +110,21 @@ export default React.memo((props) => {
}
}
- return
+ return
+ {isNSFW && !nsfwAccepted &&
+
+
+ This post may contain sensitive content.
+
+
+
setNsfwAccepted(true)}>
+ Show anyways
+
+
+ }
+
{renderContent()}
})
\ No newline at end of file
diff --git a/packages/app/src/components/PostCard/components/content/index.less b/packages/app/src/components/PostCard/components/content/index.less
index c25b5383..1c1a6613 100755
--- a/packages/app/src/components/PostCard/components/content/index.less
+++ b/packages/app/src/components/PostCard/components/content/index.less
@@ -1,4 +1,5 @@
.post_content {
+ position: relative;
display: inline-flex;
flex-direction: column;
align-items: flex-start;
@@ -12,6 +13,26 @@
transition: all 0.2s ease-in-out;
+ .nsfw_alert {
+ position: absolute;
+
+ display: flex;
+ flex-direction: column;
+
+ align-items: center;
+ justify-content: center;
+
+ width: 100%;
+ height: 100%;
+
+ backdrop-filter: blur(25px);
+ background-color: rgba(0, 0, 0, 0.5);
+
+ border-radius: 8px;
+
+ z-index: 200;
+ }
+
.message {
width: 100%;