merge main
This commit is contained in:
Rama Priyanto
commit
7b49ad4c4c
|
|
@ -0,0 +1,2 @@
|
|||
NEXT_PUBLIC_API=https://netidhub.com/api
|
||||
NEXT_PUBLIC=https://netidhub.com
|
||||
|
|
@ -26,8 +26,8 @@ yarn-debug.log*
|
|||
yarn-error.log*
|
||||
|
||||
# local env files
|
||||
.env*.local
|
||||
.env
|
||||
# .env*.local
|
||||
# .env
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
|
|
|||
|
|
@ -33,18 +33,27 @@ import {
|
|||
import { detailMedia } from "@/service/curated-content/curated-content";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { MailIcon } from "lucide-react";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { getCookiesDecrypt } from "@/lib/utils";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
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 {
|
||||
DialogHeader,
|
||||
DialogFooter,
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { close, error, loading } from "@/config/swal";
|
||||
import { te } from "date-fns/locale";
|
||||
import { close, loading } from "@/config/swal";
|
||||
import { getCookiesDecrypt } from "@/lib/utils";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { error } from "@/lib/swal";
|
||||
|
||||
const imageSchema = z.object({
|
||||
title: z.string().min(1, { message: "Judul diperlukan" }),
|
||||
|
|
@ -114,6 +123,8 @@ export default function FormImageDetail() {
|
|||
const [description, setDescription] = useState("");
|
||||
const [main, setMain] = useState<any>([]);
|
||||
const [filePlacements, setFilePlacements] = useState<string[][]>([]);
|
||||
const [detailThumb, setDetailThumb] = useState<any>([]);
|
||||
const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
|
||||
|
||||
const [selectedTarget, setSelectedTarget] = useState("");
|
||||
const [files, setFiles] = useState<FileType[]>([]);
|
||||
|
|
@ -232,6 +243,12 @@ export default function FormImageDetail() {
|
|||
}
|
||||
|
||||
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();
|
||||
|
|
@ -462,79 +479,45 @@ export default function FormImageDetail() {
|
|||
)}
|
||||
</div>
|
||||
|
||||
<div className="py-3">
|
||||
<Label>Files</Label>
|
||||
{/* Preview Image */}
|
||||
<div className="w-full aspect-video mb-4 rounded-lg overflow-hidden bg-gray-100">
|
||||
<img
|
||||
src={main.url}
|
||||
alt="Preview"
|
||||
className="w-full h-full object-cover transition-all duration-300"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Thumbnail Container with Navigation */}
|
||||
<div className="relative group">
|
||||
{/* Scroll Left Button */}
|
||||
{/* <button
|
||||
onClick={scrollLeft}
|
||||
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
|
||||
hover:bg-black/70 disabled:opacity-0"
|
||||
aria-label="Scroll left"
|
||||
>
|
||||
<ChevronLeft className="w-6 h-6" />
|
||||
</button> */}
|
||||
|
||||
{/* Scrollable Thumbnail Container */}
|
||||
<div
|
||||
id="thumbnail-container"
|
||||
className="overflow-x-auto scrollbar-hide scroll-smooth"
|
||||
style={{
|
||||
scrollbarWidth: "none",
|
||||
msOverflowStyle: "none",
|
||||
<Label className="text-xl text-black">File Media</Label>
|
||||
<div className="w-full ">
|
||||
<Swiper
|
||||
thumbs={{ swiper: thumbsSwiper }}
|
||||
modules={[FreeMode, Navigation, Thumbs]}
|
||||
navigation={false}
|
||||
className="w-full"
|
||||
>
|
||||
{detailThumb?.map((data: any) => (
|
||||
<SwiperSlide key={data.id}>
|
||||
<img
|
||||
className="object-fill h-full w-full"
|
||||
src={data}
|
||||
alt={` ${data.id}`}
|
||||
/>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
<div className=" mt-2 ">
|
||||
<Swiper
|
||||
onSwiper={setThumbsSwiper}
|
||||
slidesPerView={6}
|
||||
spaceBetween={8}
|
||||
pagination={{
|
||||
clickable: true,
|
||||
}}
|
||||
modules={[Pagination, Thumbs]}
|
||||
// className="mySwiper2"
|
||||
>
|
||||
<div className="flex space-x-2 px-4">
|
||||
{detail?.files?.map((list: any, index: number) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() =>
|
||||
handleMain(
|
||||
"FOTO",
|
||||
list.url,
|
||||
list.fileName,
|
||||
list.format
|
||||
)
|
||||
}
|
||||
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> */}
|
||||
{detailThumb?.map((data: any) => (
|
||||
<SwiperSlide key={data.id}>
|
||||
<img
|
||||
className="object-cover h-[60px] w-[80px]"
|
||||
src={data}
|
||||
alt={` ${data.id}`}
|
||||
/>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue