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

Merge branch 'dev-sabda-v2' of https://gitlab.com/hanifsalafi/mediahub_redesign

This commit is contained in:
hanif salafi 2025-06-22 06:02:06 +07:00
parent d98836494e 1103f5f42f
commit c187ba7486
8 changed files with 523 additions and 309 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
components/form/content/audio-update-form.tsx
View File

@ -244,6 +244,11 @@ export default function FormAudioUpdate() {
const details = response?.data?.data; const details = response?.data?.data;
setDetail(details); setDetail(details);
setSelectedTarget(String(details.category.id));
setValue("title", details.title);
setValue("description", details.description);
setValue("creatorName", details.creatorName);
if (details?.files) { if (details?.files) {
setPrefFiles(details.files); setPrefFiles(details.files);
@ -266,15 +271,15 @@ export default function FormAudioUpdate() {
setTags(details.tags.split(",").map((tag: string) => tag.trim())); setTags(details.tags.split(",").map((tag: string) => tag.trim()));
} }
const matchingCategory = categories.find( // const matchingCategory = categories.find(
(category) => category.id === details.categoryId // (category) => category.id === details.categoryId
); // );
if (matchingCategory) { // if (matchingCategory) {
setSelectedTarget(matchingCategory.name); // setSelectedTarget(matchingCategory.name);
} // }
setSelectedTarget(details.categoryId); // setSelectedTarget(details.categoryId);
const filesData = details.files || []; const filesData = details.files || [];
const fileUrls = filesData.map((file: { secondaryUrl: string }) => const fileUrls = filesData.map((file: { secondaryUrl: string }) =>
@ -350,6 +355,10 @@ export default function FormAudioUpdate() {
const response = await createMedia(requestData); const response = await createMedia(requestData);
console.log("Form Data Submitted:", requestData); console.log("Form Data Submitted:", requestData);
if (response?.error) {
error(response?.message);
return false;
}
const formMedia = new FormData(); const formMedia = new FormData();
const thumbnail = files[0]; const thumbnail = files[0];
@ -403,48 +412,50 @@ export default function FormAudioUpdate() {
"X-XSRF-TOKEN": csrfToken, "X-XSRF-TOKEN": csrfToken,
}; };
const upload = new Upload(file, { if (!file.secondaryUrl || file.secondaryUrl == "") {
endpoint: `${process.env.NEXT_PUBLIC_API}/media/file/upload`, const upload = new Upload(file, {
headers: headers, endpoint: `${process.env.NEXT_PUBLIC_API}/media/file/upload`,
retryDelays: [0, 3000, 6000, 12_000, 24_000], headers: headers,
chunkSize: 20_000, retryDelays: [0, 3000, 6000, 12_000, 24_000],
metadata: { chunkSize: 20_000,
mediaid: id, metadata: {
filename: file.name, mediaid: id,
filetype: file.type, filename: file.name,
duration, filetype: file.type,
isWatermark: "false", // hardcode duration,
}, isWatermark: "false", // hardcode
onBeforeRequest: function (req) { },
var xhr = req.getUnderlyingObject(); onBeforeRequest: function (req) {
xhr.withCredentials = true; var xhr = req.getUnderlyingObject();
}, xhr.withCredentials = true;
onError: async (e: any) => { },
console.log("Error upload :", e); onError: async (e: any) => {
error(e); console.log("Error upload :", e);
}, error(e);
onChunkComplete: ( },
chunkSize: any, onChunkComplete: (
bytesAccepted: any, chunkSize: any,
bytesTotal: any bytesAccepted: any,
) => { bytesTotal: any
const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100); ) => {
progressInfo[idx].percentage = uploadPersen; const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
counterUpdateProgress++; progressInfo[idx].percentage = uploadPersen;
console.log(counterUpdateProgress); counterUpdateProgress++;
setProgressList(progressInfo); console.log(counterUpdateProgress);
setCounterProgress(counterUpdateProgress); setProgressList(progressInfo);
}, setCounterProgress(counterUpdateProgress);
onSuccess: async () => { },
uploadPersen = 100; onSuccess: async () => {
progressInfo[idx].percentage = 100; uploadPersen = 100;
counterUpdateProgress++; progressInfo[idx].percentage = 100;
setCounterProgress(counterUpdateProgress); counterUpdateProgress++;
successTodo(); setCounterProgress(counterUpdateProgress);
}, successTodo();
}); },
});
upload.start(); upload.start();
}
} }
const onSubmit = (data: AudioSchema) => { const onSubmit = (data: AudioSchema) => {
@ -659,7 +670,7 @@ export default function FormAudioUpdate() {
<Input <Input
size="md" size="md"
type="text" type="text"
defaultValue={detail?.title} value={field?.value}
onChange={field.onChange} onChange={field.onChange}
placeholder="Enter Title" placeholder="Enter Title"
/> />
@ -675,7 +686,7 @@ export default function FormAudioUpdate() {
<div className="py-3 w-full space-y-2"> <div className="py-3 w-full space-y-2">
<Label>{t("category")}</Label> <Label>{t("category")}</Label>
<Select <Select
defaultValue={detail?.categoryId.name} // Nilai default berdasarkan detail value={selectedTarget}
onValueChange={(id) => { onValueChange={(id) => {
console.log("Selected Category:", id); console.log("Selected Category:", id);
setSelectedTarget(id); setSelectedTarget(id);
@ -686,7 +697,11 @@ export default function FormAudioUpdate() {
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{categories.map((category) => ( {categories.map((category) => (
<SelectItem key={category.id} value={category.id}> <SelectItem
key={String(category.id)}
value={String(category.id)}
>
{" "}
{category.name} {category.name}
</SelectItem> </SelectItem>
))} ))}
@ -701,10 +716,7 @@ export default function FormAudioUpdate() {
control={control} control={control}
name="description" name="description"
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<CustomEditor <CustomEditor onChange={onChange} initialData={value} />
onChange={onChange}
initialData={detail?.description || value}
/>
)} )}
/> />
{errors.description?.message && ( {errors.description?.message && (
@ -929,7 +941,7 @@ export default function FormAudioUpdate() {
<Input <Input
size="md" size="md"
type="text" type="text"
defaultValue={detail?.creatorName} value={field?.value}
onChange={field.onChange} onChange={field.onChange}
placeholder="Enter Title" placeholder="Enter Title"
/> />

131
components/form/content/image-update-form.tsx
View File

@ -266,6 +266,11 @@ export default function FormImageUpdate() {
const details = response?.data?.data; const details = response?.data?.data;
setDetail(details); setDetail(details);
setSelectedTarget(String(details.category.id));
setValue("title", details.title);
setValue("description", details.description);
setValue("creatorName", details.creatorName);
if (details?.files) { if (details?.files) {
setFiles(details.files); setFiles(details.files);
@ -288,15 +293,15 @@ export default function FormImageUpdate() {
setTags(details.tags.split(",").map((tag: string) => tag.trim())); setTags(details.tags.split(",").map((tag: string) => tag.trim()));
} }
const matchingCategory = categories.find( // const matchingCategory = categories.find(
(category) => category.id === details.categoryId // (category) => category.id === details.categoryId
); // );
if (matchingCategory) { // if (matchingCategory) {
setSelectedTarget(matchingCategory.name); // setSelectedTarget(matchingCategory.name);
} // }
setSelectedTarget(details.categoryId); // Untuk dropdown // setSelectedTarget(details.categoryId); // Untuk dropdown
} }
} }
initState(); initState();
@ -367,6 +372,10 @@ export default function FormImageUpdate() {
const response = await createMedia(requestData); const response = await createMedia(requestData);
console.log("Form Data Submitted:", requestData); console.log("Form Data Submitted:", requestData);
if (response?.error) {
error(response?.message);
return false;
}
const formMedia = new FormData(); const formMedia = new FormData();
const thumbnail = files[0]; const thumbnail = files[0];
@ -387,6 +396,7 @@ export default function FormImageUpdate() {
close(); close();
// showProgress(); // showProgress();
console.log("files:", files);
files.map(async (item: any, index: number) => { files.map(async (item: any, index: number) => {
await uploadResumableFile( await uploadResumableFile(
index, index,
@ -425,48 +435,50 @@ export default function FormImageUpdate() {
"X-XSRF-TOKEN": csrfToken, "X-XSRF-TOKEN": csrfToken,
}; };
const upload = new Upload(file, { if (!file.secondaryUrl || file.secondaryUrl == "") {
endpoint: `${process.env.NEXT_PUBLIC_API}/media/file/upload`, const upload = new Upload(file, {
headers: headers, endpoint: `${process.env.NEXT_PUBLIC_API}/media/file/upload`,
retryDelays: [0, 3000, 6000, 12_000, 24_000], headers: headers,
chunkSize: 20_000, retryDelays: [0, 3000, 6000, 12_000, 24_000],
metadata: { chunkSize: 20_000,
mediaid: id, metadata: {
filename: file.name, mediaid: id,
filetype: file.type, filename: file.name,
duration, filetype: file.type,
isWatermark: "true", // hardcode duration,
}, isWatermark: "true", // hardcode
onBeforeRequest: function (req) { },
var xhr = req.getUnderlyingObject(); onBeforeRequest: function (req) {
xhr.withCredentials = true; var xhr = req.getUnderlyingObject();
}, xhr.withCredentials = true;
onError: async (e: any) => { },
console.log("Error upload :", e); onError: async (e: any) => {
error(e); console.log("Error upload :", e);
}, error(e);
onChunkComplete: ( },
chunkSize: any, onChunkComplete: (
bytesAccepted: any, chunkSize: any,
bytesTotal: any bytesAccepted: any,
) => { bytesTotal: any
const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100); ) => {
progressInfo[idx].percentage = uploadPersen; const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
counterUpdateProgress++; progressInfo[idx].percentage = uploadPersen;
console.log(counterUpdateProgress); counterUpdateProgress++;
setProgressList(progressInfo); console.log(counterUpdateProgress);
setCounterProgress(counterUpdateProgress); setProgressList(progressInfo);
}, setCounterProgress(counterUpdateProgress);
onSuccess: async () => { },
uploadPersen = 100; onSuccess: async () => {
progressInfo[idx].percentage = 100; uploadPersen = 100;
counterUpdateProgress++; progressInfo[idx].percentage = 100;
setCounterProgress(counterUpdateProgress); counterUpdateProgress++;
successTodo(); setCounterProgress(counterUpdateProgress);
}, successTodo();
}); },
});
upload.start(); upload.start();
}
} }
const onSubmit = (data: ImageSchema) => { const onSubmit = (data: ImageSchema) => {
@ -671,7 +683,7 @@ export default function FormImageUpdate() {
<Input <Input
size="md" size="md"
type="text" type="text"
defaultValue={detail?.title} value={field?.value}
onChange={field.onChange} onChange={field.onChange}
placeholder="Enter Title" placeholder="Enter Title"
/> />
@ -687,21 +699,21 @@ export default function FormImageUpdate() {
<div className="py-3 w-full space-y-2"> <div className="py-3 w-full space-y-2">
<Label>{t("category")}</Label> <Label>{t("category")}</Label>
<Select <Select
defaultValue={detail?.category.id} // Gunakan ID sebagai defaultValue value={selectedTarget}
onValueChange={(id) => { onValueChange={(id) => {
console.log("Selected Category ID:", id); console.log("Selected Category ID:", id);
setSelectedTarget(id); // Perbarui ID kategori setSelectedTarget(id);
}} }}
> >
<SelectTrigger size="md"> <SelectTrigger size="md">
<SelectValue placeholder="Pilih"> <SelectValue placeholder="Pilih" />
{categories.find((cat) => cat.id === selectedTarget)
?.name || "Pilih"}
</SelectValue>
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{categories.map((category) => ( {categories.map((category) => (
<SelectItem key={category.id} value={category.id}> <SelectItem
key={String(category.id)}
value={String(category.id)}
>
{category.name} {category.name}
</SelectItem> </SelectItem>
))} ))}
@ -716,10 +728,7 @@ export default function FormImageUpdate() {
control={control} control={control}
name="description" name="description"
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<CustomEditor <CustomEditor onChange={onChange} initialData={value} />
onChange={onChange}
initialData={detail?.description || value}
/>
)} )}
/> />
{errors.description?.message && ( {errors.description?.message && (
@ -892,7 +901,7 @@ export default function FormImageUpdate() {
<Input <Input
size="md" size="md"
type="text" type="text"
defaultValue={detail?.creatorName} value={field?.value}
onChange={field.onChange} onChange={field.onChange}
placeholder="Enter Title" placeholder="Enter Title"
/> />

124
components/form/content/teks-update-form.tsx
View File

@ -239,6 +239,11 @@ export default function FormTeksUpdate() {
const details = response?.data?.data; const details = response?.data?.data;
setDetail(details); setDetail(details);
setSelectedTarget(String(details.category.id));
setValue("title", details.title);
setValue("description", details.description);
setValue("creatorName", details.creatorName);
if (details?.files) { if (details?.files) {
setFiles(details.files); setFiles(details.files);
@ -260,15 +265,15 @@ export default function FormTeksUpdate() {
setTags(details.tags.split(",").map((tag: string) => tag.trim())); setTags(details.tags.split(",").map((tag: string) => tag.trim()));
} }
const matchingCategory = categories.find( // const matchingCategory = categories.find(
(category) => category.id === details.categoryId // (category) => category.id === details.categoryId
); // );
if (matchingCategory) { // if (matchingCategory) {
setSelectedTarget(matchingCategory.name); // setSelectedTarget(matchingCategory.name);
} // }
setSelectedTarget(details.categoryId); // Untuk dropdown // setSelectedTarget(details.categoryId); // Untuk dropdown
} }
} }
initState(); initState();
@ -339,6 +344,10 @@ export default function FormTeksUpdate() {
const response = await createMedia(requestData); const response = await createMedia(requestData);
console.log("Form Data Submitted:", requestData); console.log("Form Data Submitted:", requestData);
if (response?.error) {
error(response?.message);
return false;
}
const formMedia = new FormData(); const formMedia = new FormData();
const thumbnail = files[0]; const thumbnail = files[0];
@ -397,48 +406,50 @@ export default function FormTeksUpdate() {
"X-XSRF-TOKEN": csrfToken, "X-XSRF-TOKEN": csrfToken,
}; };
const upload = new Upload(file, { if (!file.secondaryUrl || file.secondaryUrl == "") {
endpoint: `${process.env.NEXT_PUBLIC_API}/media/file/upload`, const upload = new Upload(file, {
headers: headers, endpoint: `${process.env.NEXT_PUBLIC_API}/media/file/upload`,
retryDelays: [0, 3000, 6000, 12_000, 24_000], headers: headers,
chunkSize: 20_000, retryDelays: [0, 3000, 6000, 12_000, 24_000],
metadata: { chunkSize: 20_000,
mediaid: id, metadata: {
filename: file.name, mediaid: id,
filetype: file.type, filename: file.name,
duration, filetype: file.type,
isWatermark: "true", // hardcode duration,
}, isWatermark: "true", // hardcode
onBeforeRequest: function (req) { },
var xhr = req.getUnderlyingObject(); onBeforeRequest: function (req) {
xhr.withCredentials = true; var xhr = req.getUnderlyingObject();
}, xhr.withCredentials = true;
onError: async (e: any) => { },
console.log("Error upload :", e); onError: async (e: any) => {
error(e); console.log("Error upload :", e);
}, error(e);
onChunkComplete: ( },
chunkSize: any, onChunkComplete: (
bytesAccepted: any, chunkSize: any,
bytesTotal: any bytesAccepted: any,
) => { bytesTotal: any
const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100); ) => {
progressInfo[idx].percentage = uploadPersen; const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
counterUpdateProgress++; progressInfo[idx].percentage = uploadPersen;
console.log(counterUpdateProgress); counterUpdateProgress++;
setProgressList(progressInfo); console.log(counterUpdateProgress);
setCounterProgress(counterUpdateProgress); setProgressList(progressInfo);
}, setCounterProgress(counterUpdateProgress);
onSuccess: async () => { },
uploadPersen = 100; onSuccess: async () => {
progressInfo[idx].percentage = 100; uploadPersen = 100;
counterUpdateProgress++; progressInfo[idx].percentage = 100;
setCounterProgress(counterUpdateProgress); counterUpdateProgress++;
successTodo(); setCounterProgress(counterUpdateProgress);
}, successTodo();
}); },
});
upload.start(); upload.start();
}
} }
const onSubmit = (data: TeksSchema) => { const onSubmit = (data: TeksSchema) => {
@ -615,7 +626,7 @@ export default function FormTeksUpdate() {
<Input <Input
size="md" size="md"
type="text" type="text"
defaultValue={detail?.title} value={field?.value}
onChange={field.onChange} onChange={field.onChange}
placeholder="Enter Title" placeholder="Enter Title"
/> />
@ -631,7 +642,7 @@ export default function FormTeksUpdate() {
<div className="py-3 w-full space-y-2"> <div className="py-3 w-full space-y-2">
<Label>{t("category")}</Label> <Label>{t("category")}</Label>
<Select <Select
defaultValue={detail?.categoryId.name} // Nilai default berdasarkan detail value={selectedTarget}
onValueChange={(id) => { onValueChange={(id) => {
console.log("Selected Category:", id); console.log("Selected Category:", id);
setSelectedTarget(id); setSelectedTarget(id);
@ -642,7 +653,11 @@ export default function FormTeksUpdate() {
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{categories.map((category) => ( {categories.map((category) => (
<SelectItem key={category.id} value={category.id}> <SelectItem
key={String(category.id)}
value={String(category.id)}
>
{" "}
{category.name} {category.name}
</SelectItem> </SelectItem>
))} ))}
@ -656,10 +671,7 @@ export default function FormTeksUpdate() {
control={control} control={control}
name="description" name="description"
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<CustomEditor <CustomEditor onChange={onChange} initialData={value} />
onChange={onChange}
initialData={detail?.description || value}
/>
)} )}
/> />
{errors.description?.message && ( {errors.description?.message && (
@ -832,7 +844,7 @@ export default function FormTeksUpdate() {
<Input <Input
size="md" size="md"
type="text" type="text"
defaultValue={detail?.creatorName} value={field?.value}
onChange={field.onChange} onChange={field.onChange}
placeholder="Enter Title" placeholder="Enter Title"
/> />

37
components/form/content/video-update-form.tsx
View File

@ -262,6 +262,11 @@ export default function FormVideoUpdate() {
const details = response?.data?.data; const details = response?.data?.data;
setDetail(details); setDetail(details);
setSelectedTarget(String(details.category.id));
setValue("title", details.title);
setValue("description", details.description);
setValue("creatorName", details.creatorName);
if (details?.files) { if (details?.files) {
setFiles(details.files); setFiles(details.files);
@ -283,15 +288,15 @@ export default function FormVideoUpdate() {
setTags(details.tags.split(",").map((tag: string) => tag.trim())); setTags(details.tags.split(",").map((tag: string) => tag.trim()));
} }
const matchingCategory = categories.find( // const matchingCategory = categories.find(
(category) => category.id === details.categoryId // (category) => category.id === details.categoryId
); // );
// console.log("LALALALAL", matchingCategory)
// if (matchingCategory) {
// setSelectedTarget(String(matchingCategory.id));
// }
if (matchingCategory) { // setSelectedTarget(details.categoryId); // Untuk dropdown
setSelectedTarget(matchingCategory.name);
}
setSelectedTarget(details.categoryId); // Untuk dropdown
const filesData = details.files || []; const filesData = details.files || [];
const fileUrls = filesData.map((files: { url: string }) => const fileUrls = filesData.map((files: { url: string }) =>
@ -727,7 +732,7 @@ export default function FormVideoUpdate() {
<Input <Input
size="md" size="md"
type="text" type="text"
defaultValue={detail?.title} value={field?.value}
onChange={field.onChange} onChange={field.onChange}
placeholder="Enter Title" placeholder="Enter Title"
/> />
@ -743,7 +748,7 @@ export default function FormVideoUpdate() {
<div className="py-3 w-full space-y-2"> <div className="py-3 w-full space-y-2">
<Label>{t("category")}</Label> <Label>{t("category")}</Label>
<Select <Select
defaultValue={detail?.categoryId.name} // Nilai default berdasarkan detail value={selectedTarget} // Nilai default berdasarkan detail
onValueChange={(id) => { onValueChange={(id) => {
console.log("Selected Category:", id); console.log("Selected Category:", id);
setSelectedTarget(id); setSelectedTarget(id);
@ -754,7 +759,10 @@ export default function FormVideoUpdate() {
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{categories.map((category) => ( {categories.map((category) => (
<SelectItem key={category.id} value={category.id}> <SelectItem
key={String(category.id)}
value={String(category.id)}
>
{category.name} {category.name}
</SelectItem> </SelectItem>
))} ))}
@ -769,10 +777,7 @@ export default function FormVideoUpdate() {
control={control} control={control}
name="description" name="description"
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<CustomEditor <CustomEditor onChange={onChange} initialData={value} />
onChange={onChange}
initialData={detail?.description || value}
/>
)} )}
/> />
{errors.description?.message && ( {errors.description?.message && (
@ -945,7 +950,7 @@ export default function FormVideoUpdate() {
<Input <Input
size="md" size="md"
type="text" type="text"
defaultValue={detail?.creatorName} value={field?.value}
onChange={field.onChange} onChange={field.onChange}
placeholder="Enter Title" placeholder="Enter Title"
/> />

10
components/form/task-ta/task-ta-detail-form.tsx
View File

@ -113,6 +113,7 @@ export type taskDetail = {
broadcastType: string; broadcastType: string;
narration: string; narration: string;
is_active: string; is_active: string;
isAssignmentAccepted: boolean;
isDone: any; isDone: any;
}; };
@ -1340,7 +1341,7 @@ export default function FormTaskTaDetail() {
"" ""
)} )}
</div> */} </div> */}
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap justify-end gap-2">
{/* <div className=""> {/* <div className="">
<Button <Button
type="button" type="button"
@ -1351,13 +1352,14 @@ export default function FormTaskTaDetail() {
Beri Tanggapan Beri Tanggapan
</Button> </Button>
</div> */} </div> */}
{/* <div className=""> <div className="">
<Button <Button
type="button" type="button"
className="btn btn-primary lg:mx-3" className="btn btn-primary lg:mx-3"
style={ style={
statusAcceptance || statusAcceptance ||
detail?.createdBy?.id !== Number(userId) detail?.isAssignmentAccepted == true ||
detail?.createdBy?.id == Number(userId)
? { ? {
display: "none", display: "none",
} }
@ -1367,7 +1369,7 @@ export default function FormTaskTaDetail() {
> >
Terima Tugas Terima Tugas
</Button> </Button>
</div> */} </div>
<div <div
className="task-response w-100 lg:px-3" className="task-response w-100 lg:px-3"
// style={ // style={

40
components/landing-page/hero-new.tsx
View File

@ -8,7 +8,6 @@ import {
listPopUp, listPopUp,
listStaticBanner, listStaticBanner,
} from "@/service/landing/landing"; } from "@/service/landing/landing";
import Link from "next/link";
import { useParams, usePathname, useRouter } from "next/navigation"; import { useParams, usePathname, useRouter } from "next/navigation";
import { import {
Carousel, Carousel,
@ -48,6 +47,7 @@ import "swiper/css";
import "swiper/css/navigation"; import "swiper/css/navigation";
import "swiper/css/pagination"; import "swiper/css/pagination";
import { ChevronLeft, ChevronRight } from "lucide-react"; import { ChevronLeft, ChevronRight } from "lucide-react";
import { Link } from "@/i18n/routing";
type HeroModalProps = { type HeroModalProps = {
onClose: () => void; onClose: () => void;
@ -67,6 +67,12 @@ const HeroModal = ({
const locale = params?.locale; const locale = params?.locale;
const swiperRef = useRef<SwiperClass | null>(null); const swiperRef = useRef<SwiperClass | null>(null);
let prefixPath = poldaName
? `/polda/${poldaName}`
: satkerName
? `/satker/${satkerName}`
: "";
useEffect(() => { useEffect(() => {
async function fetchCategories() { async function fetchCategories() {
const url = "https://netidhub.com/api/csrf"; const url = "https://netidhub.com/api/csrf";
@ -167,7 +173,7 @@ const HeroModal = ({
{list?.categoryName || "Liputan Kegiatan"} {list?.categoryName || "Liputan Kegiatan"}
</span> </span>
<Link href={`${locale}/image/detail/${list?.slug}`}> <Link href={`${prefixPath}/image/detail/${list?.slug}`}>
<h2 className="text-lg leading-tight">{list?.title}</h2> <h2 className="text-lg leading-tight">{list?.title}</h2>
</Link> </Link>
@ -226,6 +232,12 @@ const HeroNew = (props: { group?: string }) => {
const [newContent, setNewContent] = useState<any>(); const [newContent, setNewContent] = useState<any>();
const [selectedTab, setSelectedTab] = useState("image"); const [selectedTab, setSelectedTab] = useState("image");
let prefixPath = poldaName
? `/polda/${poldaName}`
: satkerName
? `/satker/${satkerName}`
: "";
useEffect(() => { useEffect(() => {
fecthNewContent(); fecthNewContent();
}, [selectedTab]); }, [selectedTab]);
@ -263,7 +275,6 @@ const HeroNew = (props: { group?: string }) => {
setNewContent(response?.data?.data?.content); setNewContent(response?.data?.data?.content);
}; };
useEffect(() => { useEffect(() => {
const timer = setTimeout(() => { const timer = setTimeout(() => {
setIsLoading(false); setIsLoading(false);
@ -415,7 +426,18 @@ const HeroNew = (props: { group?: string }) => {
<div className="absolute inset-0 bg-black/40 z-10" /> <div className="absolute inset-0 bg-black/40 z-10" />
{/* Konten judul, dll */} {/* Konten judul, dll */}
<div className="absolute bottom-20 left-8 lg:left-32 z-20 text-white w-[85%] lg:w-[45%]"> <Link
href={
Number(list?.fileTypeId) == 1
? `${prefixPath}/image/detail/${list?.slug}`
: Number(list?.fileTypeId) == 2
? `${prefixPath}/video/detail/${list?.slug}`
: Number(list?.fileTypeId) == 3
? `${prefixPath}/document/detail/${list?.slug}`
: `${prefixPath}/audio/detail/${list?.slug}`
}
className="absolute bottom-20 left-8 lg:left-32 z-20 text-white w-[85%] lg:w-[45%] cursor-pointer"
>
<span className="text-red-600 text-lg font-bold uppercase"> <span className="text-red-600 text-lg font-bold uppercase">
{list?.categoryName} {list?.categoryName}
</span> </span>
@ -424,7 +446,7 @@ const HeroNew = (props: { group?: string }) => {
{formatDateToIndonesian(new Date(list?.createdAt))}{" "} {formatDateToIndonesian(new Date(list?.createdAt))}{" "}
{list?.timezone || "WIB"} | 👁 {list?.clickCount} {list?.timezone || "WIB"} | 👁 {list?.clickCount}
</p> </p>
</div> </Link>
{/* Tombol navigasi di atas gambar */} {/* Tombol navigasi di atas gambar */}
<CarouselPrevious className="absolute left-6 top-[45%] z-30 -translate-y-1/2 hover:bg-black/70 text-white p-2 rounded-full"> <CarouselPrevious className="absolute left-6 top-[45%] z-30 -translate-y-1/2 hover:bg-black/70 text-white p-2 rounded-full">
@ -458,12 +480,12 @@ const HeroNew = (props: { group?: string }) => {
<Link <Link
href={ href={
Number(item?.fileTypeId) == 1 Number(item?.fileTypeId) == 1
? `${locale}/image/detail/${item?.slug}` ? `${prefixPath}/image/detail/${item?.slug}`
: Number(item?.fileTypeId) == 2 : Number(item?.fileTypeId) == 2
? `${locale}/video/detail/${item?.slug}` ? `${prefixPath}/video/detail/${item?.slug}`
: Number(item?.fileTypeId) == 3 : Number(item?.fileTypeId) == 3
? `${locale}/document/detail/${item?.slug}` ? `${prefixPath}/document/detail/${item?.slug}`
: `${locale}/audio/detail/${item?.slug}` : `${prefixPath}/audio/detail/${item?.slug}`
} }
> >
<span className="py-1 rounded-lg flex text-red-600 font-bold uppercase w-fit"> <span className="py-1 rounded-lg flex text-red-600 font-bold uppercase w-fit">

362
components/landing-page/search-section-new.tsx
View File

@ -4,7 +4,14 @@ import { useParams, useRouter } from "next/navigation";
import router from "next/router"; import router from "next/router";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Icon } from "@iconify/react/dist/iconify.js"; import { Icon } from "@iconify/react/dist/iconify.js";
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select"; import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
} from "../ui/select";
import Image from "next/image"; import Image from "next/image";
import { getHeroData } from "@/service/landing/landing"; import { getHeroData } from "@/service/landing/landing";
import { title } from "process"; import { title } from "process";
@ -21,7 +28,16 @@ const ScrollableContent = () => {
const params = useParams(); const params = useParams();
const locale = params?.locale; const locale = params?.locale;
const t = useTranslations("LandingPage"); const t = useTranslations("LandingPage");
const [content, setContent] = useState<any>(); const [contentPolda, setContentPolda] = useState<any>();
const [contentSatker, setContentSatker] = useState<any>();
const poldaName = params?.polda_name;
const satkerName = params?.satker_name;
let prefixPath = poldaName
? `/polda/${poldaName}`
: satkerName
? `/satker/${satkerName}`
: "";
useEffect(() => { useEffect(() => {
async function fetchCategories() { async function fetchCategories() {
@ -42,15 +58,23 @@ const ScrollableContent = () => {
} }
fetchCategories(); fetchCategories();
initFetch(); initFetchPolda();
initFetchSatker();
}, []); }, []);
const initFetch = async () => { const initFetchPolda = async () => {
const response = await getHeroData(locale == "en"); const response = await getHeroData(locale == "en", "polda");
console.log(response); console.log(response);
let data = response?.data?.data?.content; let data = response?.data?.data?.content;
setContent(data); setContentPolda(data);
};
const initFetchSatker = async () => {
const response = await getHeroData(locale == "en", "satker");
console.log(response);
let data = response?.data?.data?.content;
setContentSatker(data);
}; };
return ( return (
@ -66,14 +90,23 @@ const ScrollableContent = () => {
</h1> </h1>
<div className="w-[10%] h-1 bg-[#bb3523] mt-2"></div> <div className="w-[10%] h-1 bg-[#bb3523] mt-2"></div>
<div className="w-full h-1 bg-[#bb3523] mx-auto"></div> <div className="w-full h-1 bg-[#bb3523] mx-auto"></div>
<p className="text-sm md:text-base text-black dark:text-gray-100 mt-4">{t("officialCoverage")}</p> <p className="text-sm md:text-base text-black dark:text-gray-100 mt-4">
{t("officialCoverage")}
</p>
<div className="mt-6 flex flex-col md:flex-row justify-center gap-4"> <div className="mt-6 flex flex-col md:flex-row justify-center gap-4">
<div className="flex flex-row items-center w-full rounded-lg gap-2 overflow-hidden"> <div className="flex flex-row items-center w-full rounded-lg gap-2 overflow-hidden">
<Select value={contentType} onValueChange={setContentType}> <Select value={contentType} onValueChange={setContentType}>
<SelectTrigger className="w-[180px] h-[55px]"> <SelectTrigger className="w-[180px] h-[55px]">
<span className="text-black"> <span className="text-black">
<svg className="mx-2 dark:" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg
className="mx-2 dark:"
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path <path
d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z" d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
fill="currentColor" fill="currentColor"
@ -94,17 +127,32 @@ const ScrollableContent = () => {
</Select> </Select>
<div className="flex items-center flex-1 border border-gray-300 rounded-lg overflow-hidden"> <div className="flex items-center flex-1 border border-gray-300 rounded-lg overflow-hidden">
<span className="material-icons text-black dark:text-white px-4"> <span className="material-icons text-black dark:text-white px-4">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"> <svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path <path
fill="currentColor" fill="currentColor"
d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14" d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
/> />
</svg> </svg>
</span> </span>
<input type="text" placeholder={t("searchCoverageHere")} className="w-full py-4 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none" onChange={(e) => setSearch(e.target.value)} /> <input
type="text"
placeholder={t("searchCoverageHere")}
className="w-full py-4 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none"
onChange={(e) => setSearch(e.target.value)}
/>
</div> </div>
</div> </div>
<button onClick={() => router.push(`/${contentType}/filter?title=${search}`)} className="flex justify-center items-center px-6 w-full lg:w-[20%] py-4 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700"> <button
onClick={() =>
router.push(`/${contentType}/filter?title=${search}`)
}
className="flex justify-center items-center px-6 w-full lg:w-[20%] py-4 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700"
>
{t("searchCoverage")} {t("searchCoverage")}
<Icon icon="ri:arrow-right-s-line" fontSize={20} /> <Icon icon="ri:arrow-right-s-line" fontSize={20} />
</button> </button>
@ -113,82 +161,133 @@ const ScrollableContent = () => {
<div className="flex flex-col md:flex-row gap-6 py-8"> <div className="flex flex-col md:flex-row gap-6 py-8">
{/* Berita Polda */} {/* Berita Polda */}
<div className="w-full md:w-1/2 px-4"> <div className="w-full md:w-1/2 px-4">
<h2 className="text-lg md:text-xl font-bold text-[#bb3523] mb-2 uppercase">{t("regionNews")}</h2> <h2 className="text-lg md:text-xl font-bold text-[#bb3523] mb-2 uppercase">
{t("regionNews")}
</h2>
<div className="w-[10%] h-1 bg-[#bb3523]"></div> <div className="w-[10%] h-1 bg-[#bb3523]"></div>
<div className="w-full h-1 bg-[#bb3523] mx-auto mb-4"></div> <div className="w-full h-1 bg-[#bb3523] mx-auto mb-4"></div>
<div className="grid gap-4"> <div className="grid gap-4">
{(seeAllValuePolda ? content : content?.slice(0, 3))?.map((item: any, index: number) => ( {(seeAllValuePolda ? contentPolda : contentPolda?.slice(0, 3))?.map(
<div key={index} className={`bg-white rounded-lg shadow-md overflow-hidden ${index === 0 ? "" : "flex"}`}> (item: any, index: number) => (
<div className={`relative ${index === 0 ? "w-full h-48" : " w-1/2 h-[150px]"}`}> <div
key={index}
className={`bg-white rounded-lg shadow-md overflow-hidden ${
index === 0 ? "" : "flex"
}`}
>
<div
className={`relative ${
index === 0 ? "w-full h-48" : " w-1/2 h-[150px]"
}`}
>
<Link
href={
Number(item?.fileTypeId) == 1
? `${prefixPath}/image/detail/${item?.slug}`
: Number(item?.fileTypeId) == 2
? `${prefixPath}/video/detail/${item?.slug}`
: Number(item?.fileTypeId) == 3
? `${prefixPath}/document/detail/${item?.slug}`
: `${prefixPath}/audio/detail/${item?.slug}`
}
>
<Image
src={item?.smallThumbnailLink}
alt={item?.title}
layout="fill"
objectFit="cover"
/>
<div className="absolute top-2 right-2 bg-[#c03724] rounded-full p-1 shadow">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<g fill="none">
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
<path
fill="white"
d="M20 6a2 2 0 0 1 2 2v11.333a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm-8.268 7.944L7.136 18.54l-.066.06l-.07.054v.68h13v-.68l-.07-.053l-.066-.06l-2.24-2.24l-.353.354l.055.055a1 1 0 0 1-1.32 1.497l-.094-.083zM17 3a2 2 0 0 1 1.995 1.85L19 5H5a1 1 0 0 0-.993.883L4 6v12a2 2 0 0 1-1.995-1.85L2 16V6a3 3 0 0 1 2.824-2.995L5 3zm3 5H7v7.848L10.848 12a1.25 1.25 0 0 1 1.768 0l3.241 3.24l.884-.883a1.25 1.25 0 0 1 1.768 0L20 15.848zm-3.5 1.5a1.5 1.5 0 1 1 0 3a1.5 1.5 0 0 1 0-3"
/>
</g>
</svg>
</div>
</Link>
</div>
{/* <Link
href={
Number(item?.fileTypeId) == 1
? `${prefixPath}/image/detail/${item?.slug}`
: Number(item?.fileTypeId) == 2
? `${prefixPath}/video/detail/${item?.slug}`
: Number(item?.fileTypeId) == 3
? `${prefixPath}/document/detail/${item?.slug}`
: `${prefixPath}/audio/detail/${item?.slug}`
}
> */}
<Link <Link
href={ href={
Number(item?.fileTypeId) == 1 Number(item?.fileTypeId) == 1
? `${locale}/image/detail/${item?.slug}` ? `${prefixPath}/image/detail/${item?.slug}`
: Number(item?.fileTypeId) == 2 : Number(item?.fileTypeId) == 2
? `${locale}/video/detail/${item?.slug}` ? `${prefixPath}/video/detail/${item?.slug}`
: Number(item?.fileTypeId) == 3 : Number(item?.fileTypeId) == 3
? `${locale}/document/detail/${item?.slug}` ? `${prefixPath}/document/detail/${item?.slug}`
: `${locale}/audio/detail/${item?.slug}` : `${prefixPath}/audio/detail/${item?.slug}`
} }
className={`${
index === 0 ? "p-4" : "p-3 w-[50%] cursor-pointer"
}`}
> >
<Image src={item?.smallThumbnailLink} alt={item?.title} layout="fill" objectFit="cover" /> <p className="text-sm text-[#bb3523] font-bold mb-1">
<div className="absolute top-2 right-2 bg-[#c03724] rounded-full p-1 shadow"> {item.categoryName}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> </p>
<g fill="none"> <h3 className="text-sm font-semibold text-gray-800">
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" /> {item.title}
<path </h3>
fill="white" <p className="text-xs text-gray-500 mt-1 truncate">
d="M20 6a2 2 0 0 1 2 2v11.333a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm-8.268 7.944L7.136 18.54l-.066.06l-.07.054v.68h13v-.68l-.07-.053l-.066-.06l-2.24-2.24l-.353.354l.055.055a1 1 0 0 1-1.32 1.497l-.094-.083zM17 3a2 2 0 0 1 1.995 1.85L19 5H5a1 1 0 0 0-.993.883L4 6v12a2 2 0 0 1-1.995-1.85L2 16V6a3 3 0 0 1 2.824-2.995L5 3zm3 5H7v7.848L10.848 12a1.25 1.25 0 0 1 1.768 0l3.241 3.24l.884-.883a1.25 1.25 0 0 1 1.768 0L20 15.848zm-3.5 1.5a1.5 1.5 0 1 1 0 3a1.5 1.5 0 0 1 0-3" {htmlToString(item.description)}
/> </p>
</g>
</svg>
</div>
</Link> </Link>
</div> </div>
{/* <Link )
href={ )}
Number(item?.fileTypeId) == 1 {contentPolda?.length > 3 && (
? `${locale}/image/detail/${item?.slug}` <div className="flex items-center flex-row justify-start mt-6">
: Number(item?.fileTypeId) == 2 <Button
? `${locale}/video/detail/${item?.slug}` onClick={() => setSeeAllValuePolda(!seeAllValuePolda)}
: Number(item?.fileTypeId) == 3 className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]"
? `${locale}/document/detail/${item?.slug}` >
: `${locale}/audio/detail/${item?.slug}` {seeAllValuePolda ? t("seeLess") : t("seeMore")}{" "}
} <span className="text-[#bb3523] hover:text-white">
> */} <svg
<div className={`${index === 0 ? "p-4" : "p-3 w-[50%]"}`}> xmlns="http://www.w3.org/2000/svg"
<p className="text-sm text-[#bb3523] font-bold mb-1">{item.categoryName}</p> width="24"
<h3 className="text-sm font-semibold text-gray-800">{item.title}</h3> height="24"
<p className="text-xs text-gray-500 mt-1 truncate">{htmlToString(item.description)}</p> viewBox="0 0 24 24"
</div> >
<path
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2.5"
d="m10 17l5-5m0 0l-5-5"
/>
</svg>
</span>
</Button>
</div> </div>
))} )}
{/* <button className="w-fit px-2 mt-2 py-2 border flex flex-row gap-2 border-[#bb3523] bg-white text-[#bb3523] rounded-lg font-semibold hover:bg-[#bb3523] hover:border-white hover:text-white transition">
LEBIH SEDIKIT
<span className="text-[#bb3523] hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="m10 17l5-5m0 0l-5-5" />
</svg>
</span>
</button>{" "} */}
{/* Tombol See More / See Less */}
{content?.length > 3 && (
<div className="flex items-center flex-row justify-start mt-6">
<Button onClick={() => setSeeAllValuePolda(!seeAllValuePolda)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
{seeAllValuePolda ? t("seeLess") : t("seeMore")} <span className="text-[#bb3523] hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="m10 17l5-5m0 0l-5-5" />
</svg>
</span>
</Button>
</div>
)}
</div> </div>
</div> </div>
{/* Berita SATKER */} {/* Berita SATKER */}
<div className="w-full md:w-1/2 px-4"> <div className="w-full md:w-1/2 px-4">
<h2 className="text-lg md:text-xl font-bold mb-2 text-[#bb3523] uppercase">{t("divisionNews")}</h2> <h2 className="text-lg md:text-xl font-bold mb-2 text-[#bb3523] uppercase">
{t("divisionNews")}
</h2>
<div className="w-[10%] h-1 bg-[#bb3523]"></div> <div className="w-[10%] h-1 bg-[#bb3523]"></div>
<div className="w-full h-1 bg-[#bb3523] mx-auto mb-4"></div> <div className="w-full h-1 bg-[#bb3523] mx-auto mb-4"></div>
<div className="grid gap-4"> <div className="grid gap-4">
@ -201,12 +300,12 @@ const ScrollableContent = () => {
<Link <Link
href={ href={
Number(item?.fileTypeId) == 1 Number(item?.fileTypeId) == 1
? `${locale}/image/detail/${item?.slug}` ? `${prefixPath}/image/detail/${item?.slug}`
: Number(item?.fileTypeId) == 2 : Number(item?.fileTypeId) == 2
? `${locale}/video/detail/${item?.slug}` ? `${prefixPath}/video/detail/${item?.slug}`
: Number(item?.fileTypeId) == 3 : Number(item?.fileTypeId) == 3
? `${locale}/document/detail/${item?.slug}` ? `${prefixPath}/document/detail/${item?.slug}`
: `${locale}/audio/detail/${item?.slug}` : `${prefixPath}/audio/detail/${item?.slug}`
} }
> >
<Image src={item.thumbnailLink} alt={item.title} layout="fill" objectFit="cover" /> <Image src={item.thumbnailLink} alt={item.title} layout="fill" objectFit="cover" />
@ -238,23 +337,45 @@ const ScrollableContent = () => {
</svg> </svg>
</span> </span>
</button> */} </button> */}
{(seeAllValueSatker ? content : content?.slice(0, 3))?.map((item: any, index: number) => ( {(seeAllValueSatker
<div key={index} className={`bg-white rounded-lg shadow-md overflow-hidden ${index === 0 ? "" : "flex"}`}> ? contentSatker
<div className={`relative ${index === 0 ? "w-full h-48" : " w-1/2 h-[150px]"}`}> : contentSatker?.slice(0, 3)
)?.map((item: any, index: number) => (
<div
key={index}
className={`bg-white rounded-lg shadow-md overflow-hidden ${
index === 0 ? "" : "flex"
}`}
>
<div
className={`relative ${
index === 0 ? "w-full h-48" : " w-1/2 h-[150px]"
}`}
>
<Link <Link
href={ href={
Number(item?.fileTypeId) == 1 Number(item?.fileTypeId) == 1
? `${locale}/image/detail/${item?.slug}` ? `${prefixPath}/image/detail/${item?.slug}`
: Number(item?.fileTypeId) == 2 : Number(item?.fileTypeId) == 2
? `${locale}/video/detail/${item?.slug}` ? `${prefixPath}/video/detail/${item?.slug}`
: Number(item?.fileTypeId) == 3 : Number(item?.fileTypeId) == 3
? `${locale}/document/detail/${item?.slug}` ? `${prefixPath}/document/detail/${item?.slug}`
: `${locale}/audio/detail/${item?.slug}` : `${prefixPath}/audio/detail/${item?.slug}`
} }
> >
<Image src={item?.smallThumbnailLink} alt={item?.title} layout="fill" objectFit="cover" /> <Image
src={item?.smallThumbnailLink}
alt={item?.title}
layout="fill"
objectFit="cover"
/>
<div className="absolute top-2 right-2 bg-[#c03724] rounded-full p-1 shadow"> <div className="absolute top-2 right-2 bg-[#c03724] rounded-full p-1 shadow">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<g fill="none"> <g fill="none">
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" /> <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
<path <path
@ -269,35 +390,66 @@ const ScrollableContent = () => {
{/* <Link {/* <Link
href={ href={
Number(item?.fileTypeId) == 1 Number(item?.fileTypeId) == 1
? `${locale}/image/detail/${item?.slug}` ? `${prefixPath}/image/detail/${item?.slug}`
: Number(item?.fileTypeId) == 2 : Number(item?.fileTypeId) == 2
? `${locale}/video/detail/${item?.slug}` ? `${prefixPath}/video/detail/${item?.slug}`
: Number(item?.fileTypeId) == 3 : Number(item?.fileTypeId) == 3
? `${locale}/document/detail/${item?.slug}` ? `${prefixPath}/document/detail/${item?.slug}`
: `${locale}/audio/detail/${item?.slug}` : `${prefixPath}/audio/detail/${item?.slug}`
} }
> */} > */}
<div className={`${index === 0 ? "p-4" : "p-3 w-[50%]"}`}> <Link
<p className="text-sm text-[#bb3523] font-bold mb-1">{item.categoryName}</p> href={
<h3 className="text-sm font-semibold text-gray-800">{item.title}</h3> Number(item?.fileTypeId) == 1
<p className="text-xs text-gray-500 mt-1 truncate">{htmlToString(item.description)}</p> ? `${prefixPath}/image/detail/${item?.slug}`
</div> : Number(item?.fileTypeId) == 2
? `${prefixPath}/video/detail/${item?.slug}`
: Number(item?.fileTypeId) == 3
? `${prefixPath}/document/detail/${item?.slug}`
: `${prefixPath}/audio/detail/${item?.slug}`
}
className={`${index === 0 ? "p-4" : "p-3 w-[50%]"}`}
>
<p className="text-sm text-[#bb3523] font-bold mb-1">
{item.categoryName}
</p>
<h3 className="text-sm font-semibold text-gray-800">
{item.title}
</h3>
<p className="text-xs text-gray-500 mt-1 truncate">
{htmlToString(item.description)}
</p>
</Link>
</div> </div>
))} ))}
{/* Tombol See More / See Less */} {/* Tombol See More / See Less */}
{content?.length > 3 && ( {contentSatker?.length > 3 && (
<div className="flex items-center flex-row justify-start mt-6"> <div className="flex items-center flex-row justify-start mt-6">
<Button onClick={() => setSeeAllValueSatker(!seeAllValueSatker)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]"> <Button
onClick={() => setSeeAllValueSatker(!seeAllValueSatker)}
className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]"
{seeAllValueSatker ? t("seeLess") : t("seeMore")} <span className="text-[#bb3523] hover:text-white"> >
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> {seeAllValueSatker ? t("seeLess") : t("seeMore")}{" "}
<path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="m10 17l5-5m0 0l-5-5" /> <span className="text-[#bb3523] hover:text-white">
</svg> <svg
</span> xmlns="http://www.w3.org/2000/svg"
</Button> width="24"
</div> height="24"
)} viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2.5"
d="m10 17l5-5m0 0l-5-5"
/>
</svg>
</span>
</Button>
</div>
)}
</div> </div>
</div> </div>
</div> </div>

4
service/landing/landing.ts
View File

@ -31,9 +31,9 @@ export async function getCsrfToken() {
// } // }
} }
export async function getHeroData(isInt: Boolean = false) { export async function getHeroData(isInt: Boolean = false, unitType= "") {
return await httpGetInterceptor( return await httpGetInterceptor(
`media/public/list?enablePage=1&sort=desc&sortBy=createdAt&size=5&page=0&typeId=1&title=&categoryId=&fileFormats=&tags=&group=&startDate=&endDate=&month=&year=&isInt=${isInt}` `media/public/list?enablePage=1&sort=desc&sortBy=createdAt&size=5&page=0&typeId=1&title=&categoryId=&fileFormats=&tags=&group=&startDate=&endDate=&month=&year=&isInt=${isInt}${unitType==""?"":unitType=='polda'?'&isAllPolda=true':'&isAllSatker=true'}`
); );
} }