mediahub
/
mediahub-fe
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

merge main

This commit is contained in:
Rama Priyanto 2025-01-04 04:20:44 +07:00
parent b91f715e46 a0b50b61b6
commit 7b49ad4c4c
3 changed files with 64 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env Normal file
View File

@ -0,0 +1,2 @@
NEXT_PUBLIC_API=https://netidhub.com/api
NEXT_PUBLIC=https://netidhub.com

4
.gitignore vendored
View File

@ -26,8 +26,8 @@ yarn-debug.log*
yarn-error.log* yarn-error.log*
# local env files # local env files
.env*.local # .env*.local
.env # .env
# vercel # vercel
.vercel .vercel

137
components/form/content/image-detail-form.tsx
View File

@ -33,18 +33,27 @@ import {
import { detailMedia } from "@/service/curated-content/curated-content"; import { detailMedia } from "@/service/curated-content/curated-content";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { MailIcon } from "lucide-react"; import { MailIcon } from "lucide-react";
import { Icon } from "@iconify/react/dist/iconify.js"; import { Swiper, SwiperSlide } from "swiper/react";
import { getCookiesDecrypt } from "@/lib/utils"; import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/thumbs";
import "swiper/css";
import "swiper/css/navigation";
import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
import { import {
DialogHeader,
DialogFooter,
Dialog, Dialog,
DialogContent, DialogContent,
DialogFooter,
DialogHeader,
DialogTitle, DialogTitle,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
import { close, error, loading } from "@/config/swal"; import { close, loading } from "@/config/swal";
import { te } from "date-fns/locale"; import { getCookiesDecrypt } from "@/lib/utils";
import { Icon } from "@iconify/react/dist/iconify.js";
import { error } from "@/lib/swal";
const imageSchema = z.object({ const imageSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }), title: z.string().min(1, { message: "Judul diperlukan" }),
@ -114,6 +123,8 @@ export default function FormImageDetail() {
const [description, setDescription] = useState(""); const [description, setDescription] = useState("");
const [main, setMain] = useState<any>([]); const [main, setMain] = useState<any>([]);
const [filePlacements, setFilePlacements] = useState<string[][]>([]); const [filePlacements, setFilePlacements] = useState<string[][]>([]);
const [detailThumb, setDetailThumb] = useState<any>([]);
const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
const [selectedTarget, setSelectedTarget] = useState(""); const [selectedTarget, setSelectedTarget] = useState("");
const [files, setFiles] = useState<FileType[]>([]); const [files, setFiles] = useState<FileType[]>([]);
@ -232,6 +243,12 @@ export default function FormImageDetail() {
} }
setSelectedTarget(details.categoryId); // Untuk dropdown setSelectedTarget(details.categoryId); // Untuk dropdown
const filesData = details.files || [];
const fileUrls = filesData.map((file: { thumbnailFileUrl: string }) =>
file.thumbnailFileUrl ? file.thumbnailFileUrl : "default-image.jpg"
);
setDetailThumb(fileUrls);
} }
} }
initState(); initState();
@ -462,79 +479,45 @@ export default function FormImageDetail() {
)} )}
</div> </div>
<div className="py-3"> <Label className="text-xl text-black">File Media</Label>
<Label>Files</Label> <div className="w-full ">
{/* Preview Image */} <Swiper
<div className="w-full aspect-video mb-4 rounded-lg overflow-hidden bg-gray-100"> thumbs={{ swiper: thumbsSwiper }}
<img modules={[FreeMode, Navigation, Thumbs]}
src={main.url} navigation={false}
alt="Preview" className="w-full"
className="w-full h-full object-cover transition-all duration-300" >
/> {detailThumb?.map((data: any) => (
</div> <SwiperSlide key={data.id}>
<img
{/* Thumbnail Container with Navigation */} className="object-fill h-full w-full"
<div className="relative group"> src={data}
{/* Scroll Left Button */} alt={` ${data.id}`}
{/* <button />
onClick={scrollLeft} </SwiperSlide>
className="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-black/50 p-2 rounded-r-lg ))}
text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300 </Swiper>
hover:bg-black/70 disabled:opacity-0" <div className=" mt-2 ">
aria-label="Scroll left" <Swiper
> onSwiper={setThumbsSwiper}
<ChevronLeft className="w-6 h-6" /> slidesPerView={6}
</button> */} spaceBetween={8}
pagination={{
{/* Scrollable Thumbnail Container */} clickable: true,
<div
id="thumbnail-container"
className="overflow-x-auto scrollbar-hide scroll-smooth"
style={{
scrollbarWidth: "none",
msOverflowStyle: "none",
}} }}
modules={[Pagination, Thumbs]}
// className="mySwiper2"
> >
<div className="flex space-x-2 px-4"> {detailThumb?.map((data: any) => (
{detail?.files?.map((list: any, index: number) => ( <SwiperSlide key={data.id}>
<button <img
key={index} className="object-cover h-[60px] w-[80px]"
onClick={() => src={data}
handleMain( alt={` ${data.id}`}
"FOTO", />
list.url, </SwiperSlide>
list.fileName, ))}
list.format </Swiper>
)
}
className={`flex-shrink-0 relative aspect-video w-32 rounded-lg overflow-hidden
${
main.url === list.url
? "ring-2 ring-blue-500"
: "hover:opacity-80"
}
transition-all duration-200`}
>
<img
src={list.url}
alt={`Thumbnail ${index + 1}`}
className="w-full h-full object-cover"
/>
</button>
))}
</div>
</div>
{/* Scroll Right Button */}
{/* <button
onClick={scrollRight}
className="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-black/50 p-2 rounded-l-lg
text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300
hover:bg-black/70 disabled:opacity-0"
aria-label="Scroll right"
>
<ChevronRight className="w-6 h-6" />
</button> */}
</div> </div>
</div> </div>
</div> </div>