Merge pull request #90 from Asadaaaaa/staging

rev
Asadaaaaa · Aug 27, 2024 · f055b97 · f055b97
2 parents 88c4d58 + 13fc692
commit f055b97
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 42 deletions.
diff --git a/src/api/project/search-project-title.js b/src/api/project/search-project-title.js
@@ -1,6 +1,6 @@
 export default async function SearchProjectTitle(title, auth) {
   try {
-    const res = await fetch(process.env.NEXT_PUBLIC_HOST + "/" + process.env.NEXT_PUBLIC_VERSION + "/project/search/title/" + title, {
+    const res = await fetch(process.env.NEXT_PUBLIC_HOST + "/" + process.env.NEXT_PUBLIC_VERSION + "/project/search?text=" + title, {
       method: 'GET',
       headers: {
         'Accept': '*/*',

diff --git a/src/app/(main)/discover/page.js b/src/app/(main)/discover/page.js
@@ -25,7 +25,7 @@ export default function Discover() {
       <Header />
       <div className="w-full relative h-screen">
         <BgGradient />
-        <div className={`${styles.settingsContent} w-full max-w-[calc(100vw-120px)] md:max-w-[calc(100vw-268px)] lg:max-w-[calc(100vw-328px)] xl:max-w-[1016px] overflow-y-auto h-screen`}>
+        <div className={`${styles.settingsContent} w-full max-w-[calc(100vw-120px)] md:max-w-[calc(100vw-268px)] lg:max-w-[calc(100vw-328px)] xl:max-w-[1016px] pb-10 overflow-y-auto h-screen`}>
           {
             contentFilter === 0 ? (
               <Project />

diff --git a/src/app/(main)/home/page.js b/src/app/(main)/home/page.js
@@ -19,7 +19,7 @@ export default function Home() {
       <div className="w-full relative h-screen">
         <BgGradient />
         <div
-          className={`${styles.settingsContent} w-full max-w-[calc(100vw-120px)] md:max-w-[calc(100vw-268px)] lg:max-w-[calc(100vw-328px)] xl:max-w-[1016px] overflow-y-auto h-screen`}
+          className={`${styles.settingsContent} w-full max-w-[calc(100vw-120px)] md:max-w-[calc(100vw-268px)] lg:max-w-[calc(100vw-328px)] xl:max-w-[1016px] pb-10 overflow-y-auto h-screen`}
         >
           {
             contentFilter === 0 ? (

diff --git a/src/app/(main)/project/[...details]/page.js b/src/app/(main)/project/[...details]/page.js
@@ -34,6 +34,7 @@ export default function DetailProject({ params }) {
 	const { isLogin } = useContext(IsLogin);
 
 	const [dataProject, setDataProject] = useState(null);
+	const [nsfwWarning, setNsfwWarning] = useState(false);
   const [toogle, setToogle] = useState(false);
 	const [dataUser, setDataUser] = useState(null);
 	const [deleteLoading, setDeleteLoading] = useState(false);
@@ -226,6 +227,7 @@ export default function DetailProject({ params }) {
 			if (res) {
 				if (res.status === "200") {
 					setDataProject(res.data);
+					setNsfwWarning(res.data.flagged_nsfw);
 					setDataUser(res.data.myIdentity);
 					setcommentsList(res.data.comments);					
 				} else if (res.status === "unauth") {
@@ -423,38 +425,58 @@ export default function DetailProject({ params }) {
 												</div>
 											)
 										}
-										{
-											(dataProject.preview || dataProject.thumbnail)  &&  (
-												<div className={`${styles.detailImages} w-full flex overflow-x-auto`}>
-													<div className="w-fit flex gap-6">
-														{
-															dataProject.thumbnail && (
-																<Image
-																	src={process.env.NEXT_PUBLIC_HOST + "/" + process.env.NEXT_PUBLIC_VERSION + dataProject.thumbnail.url+ "?key=" + Date.now()} 
-																	alt="sersow project preview"
-																	width={512}
-																	height={288}
-																	className="w-[512px] h-[288px] object-cover rounded-lg"
-																/>
-															)
-														}
-														{
-															dataProject.preview && 
-															dataProject.preview.map((item, index) => (
-																<Image 
-																	key={index}
-																	src={process.env.NEXT_PUBLIC_HOST + "/" + process.env.NEXT_PUBLIC_VERSION + item+ "?key=" + Date.now()} 
-																	alt="sersow project preview"
-																	width={512}
-																	height={288}
-																	className="w-[512px] h-[288px] object-cover rounded-lg"
-																/>
-															))
-														}
+										<div className="relative">
+											{
+												(dataProject.preview || dataProject.thumbnail) && (
+													<div className={`${styles.detailImages} w-full flex overflow-x-auto`}>
+														<div className="w-fit flex gap-6">
+															{
+																dataProject.thumbnail && (
+																	<Image
+																		src={process.env.NEXT_PUBLIC_HOST + "/" + process.env.NEXT_PUBLIC_VERSION + dataProject.thumbnail.url+ "?key=" + Date.now()} 
+																		alt="sersow project preview"
+																		width={512}
+																		height={288}
+																		className="w-[512px] h-[288px] object-cover rounded-lg"
+																	/>
+																)
+															}
+															{
+																dataProject.preview && 
+																dataProject.preview.map((item, index) => (
+																	<Image 
+																		key={index}
+																		src={process.env.NEXT_PUBLIC_HOST + "/" + process.env.NEXT_PUBLIC_VERSION + item+ "?key=" + Date.now()} 
+																		alt="sersow project preview"
+																		width={512}
+																		height={288}
+																		className="w-[512px] h-[288px] object-cover rounded-lg"
+																	/>
+																))
+															}
+														</div>
 													</div>
-												</div>
-								 			)
-										}
+												)
+											}
+											{
+												nsfwWarning && (
+													<div className="absolute top-0 left-0 z-10 w-full h-full flex justify-center items-center bg-slate-950/95 border-solid border-slate-700">
+														<div className="flex flex-col p-6 gap-4 bg-slate-900  rounded-xl border-slate-700 border-[1px]">
+															<div className="flex justify-between items-start pb-3 border-b-slate-700 border-b-2 gap-3">
+																<div className={`${font.Satoshi_b2bold} text-white`}>NSFW Warning</div>
+																<div className="cursor-pointer pt-1" onClick={() => setNsfwWarning(false)}>
+																	<FaTimes className="w-4 h-4 text-white" />
+																</div>
+															</div>
+															<div className="flex flex-col gap-2">
+																<div className={`${font.Satoshi_c2medium} text-white`}>This project contains NSFW content.</div>
+																<div className={`${font.Satoshi_c2medium} text-white`}>Please be aware that the content may not be suitable for all audiences.</div>
+															</div>
+														</div>
+													</div>
+												)
+											}
+										</div>
 										<div className="flex flex-col gap-2">
 											<h1 className={`${font.Satoshi_h5bold} text-white`}>Description</h1>
 											<div>

diff --git a/src/components/main/card/Project/ThumbnailProject.js b/src/components/main/card/Project/ThumbnailProject.js
@@ -1,16 +1,48 @@
 import Image from "next/image";
+import { FaTimes } from 'react-icons/fa';
+import { useState, useEffect } from "react";
+
+import font from '@/app/font.module.css';
 
 export default function ThumbnailProject({thumbnail}) {
+  const [nsfwWarning, setNsfwWarning] = useState(false);
+
+  useEffect(() => {
+    if (thumbnail) {
+      setNsfwWarning(thumbnail.flagged_nsfw);
+    }
+  }, [thumbnail])
+
   return (
-    <div className="flex justify-center items-center">
+    <div>
       {thumbnail !== null ? (
-        <Image
-          alt="Thumbnail Project"
-          src={ process.env.NEXT_PUBLIC_HOST + "/" + process.env.NEXT_PUBLIC_VERSION + thumbnail["data"] }
-          width={1020}
-          height={1020}
-          className="h-auto w-80 object-cover "
-        />
+        <div className={"flex justify-center items-center relative " + (nsfwWarning ? "min-h-[195.6px]" : "")}>
+          <Image
+            alt="Thumbnail Project"
+            src={ process.env.NEXT_PUBLIC_HOST + "/" + process.env.NEXT_PUBLIC_VERSION + thumbnail["data"] }
+            width={1020}
+            height={1020}
+            className="h-auto w-80 object-cover "
+          />
+          {
+            nsfwWarning && (
+              <div className="absolute top-0 left-0 z-10 w-full h-full p-4 flex justify-center items-center bg-slate-950/95 border-solid border-slate-700">
+                <div className="flex flex-col p-6 gap-4 bg-slate-900  rounded-xl border-slate-700 border-[1px]">
+                  <div className="flex justify-between items-start pb-3 border-b-slate-700 border-b-2 gap-3">
+                    <div className={`${font.Satoshi_b2bold} text-white`}>NSFW Warning</div>
+                    <div className="cursor-pointer pt-1" onClick={() => setNsfwWarning(false)}>
+                      <FaTimes className="w-4 h-4 text-white" />
+                    </div>
+                  </div>
+                  <div className="flex flex-col gap-2">
+                    <div className={`${font.Satoshi_c2medium} text-white`}>This project contains NSFW content.</div>
+                    <div className={`${font.Satoshi_c2medium} text-white`}>Please be aware that the content may not be suitable for all audiences.</div>
+                  </div>
+                </div>
+              </div>
+            )
+          }
+        </div>
       ) : (null)}
     </div>
   );