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

feat:static banner

This commit is contained in:
Anang Yusman 2025-05-20 15:08:49 +08:00
parent 0817edd57a
commit ba5eb3aa7b
8 changed files with 181 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/[locale]/(protected)/admin/settings/banner/component/banner-column.tsx
View File

@ -59,12 +59,12 @@ const columns: ColumnDef<any>[] = [
),
},
{
accessorKey: "static",
accessorKey: "isStaticBanner",
header: "Static Banner",
cell: ({ row }) => (
<StaticToogle
id={row.original.id}
initChecked={row.original.staticPage}
initChecked={row.original.isStaticBanner}
/>
),
},

19
app/[locale]/(protected)/admin/settings/banner/component/banner-table.tsx
View File

@ -96,22 +96,9 @@ const BannerListTable = () => {
let temp: any;
const response = await listBanner();
temp = response?.data?.data;
const response2 = await listStaticBanner();
console.log("sadadddd", response2?.data?.data.length);
for (let i = 0; i < response2?.data?.data.length; i++) {
for (let j = 0; j < temp.length; j++) {
console.log("temp", j, temp[j].id);
if (response2?.data?.data[i].mediaUploadId === temp[j].id) {
temp[j].staticPage = true;
} else {
temp[j].staticPage = false;
}
}
}
console.log("tesmasdasdasdasd", temp);
setGetData(temp);
const data = response?.data?.data?.content;
console.log("banner", data);
setGetData(data);
close();
}

10
app/[locale]/(protected)/admin/settings/category/component/column.tsx
View File

@ -45,19 +45,17 @@ const columns: ColumnDef<any>[] = [
),
},
{
accessorKey: "contentType",
accessorKey: "mediaTypesString",
header: "Tipe Konten",
cell: ({ row }) => (
<span className="normal-case">{row.getValue("contentType")}</span>
<span className="normal-case">{row.getValue("mediaTypesString")}</span>
),
},
{
accessorKey: "isInternational",
accessorKey: "publishedLocation",
header: "Wilayah",
cell: ({ row }) => (
<span className="normal-case">
{row.getValue("isInternational") ? "INT" : "ID"}
</span>
<span className="normal-case">{row.getValue("publishedLocation")}</span>
),
},
{

2
app/[locale]/page.tsx
View File

@ -20,7 +20,7 @@ const Home = ({ params: { locale } }: { params: { locale: string } }) => {
<ReactLenis root>
<div className="pb-14">
<Navbar />
<Hero />
<Hero group="mabes" />
<SearchSection />
<NewContent group="mabes" type="latest" />
<NewContent group="mabes" type="popular" />

100
components/landing-page/content-category.tsx
View File

@ -1,11 +1,20 @@
import { getCategoryData, getPublicCategoryData } from "@/service/landing/landing";
import {
getCategoryData,
getPublicCategoryData,
} from "@/service/landing/landing";
import React, { useEffect, useState } from "react";
import { Reveal } from "./Reveal";
import { useTranslations } from "next-intl";
import { usePathname } from "next/navigation";
import { useParams } from "next/navigation";
import Image from "next/image";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "../ui/carousel";
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "../ui/carousel";
import { useRouter } from "@/i18n/routing";
import { Button } from "../ui/button";
@ -19,14 +28,26 @@ const ContentCategory = (props: { group?: string; type: string }) => {
const satkerName = params?.satker_name;
const router = useRouter();
let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/";
let prefixPath = poldaName
? `/polda/${poldaName}`
: satkerName
? `/satker/${satkerName}`
: "/";
useEffect(() => {
initFetch();
}, []);
const initFetch = async () => {
const response = await getPublicCategoryData(
props.group == "mabes" ? "" : props.group == "polda" && poldaName && String(poldaName)?.length > 1 ? poldaName : props.group == "satker" && satkerName && String(satkerName)?.length > 1 ? "satker-" + satkerName : "",
props.group == "mabes"
? ""
: props.group == "polda" && poldaName && String(poldaName)?.length > 1
? poldaName
: props.group == "satker" &&
satkerName &&
String(satkerName)?.length > 1
? "satker-" + satkerName
: "",
"",
locale == "en" ? true : false
);
@ -52,7 +73,10 @@ const ContentCategory = (props: { group?: string; type: string }) => {
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
</svg>`;
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
const toBase64 = (str: string) =>
typeof window === "undefined"
? Buffer.from(str).toString("base64")
: window.btoa(str);
return (
<div className="px-4 lg:px-24 py-10">
@ -60,12 +84,16 @@ const ContentCategory = (props: { group?: string; type: string }) => {
<h2 className="text-center text-xl lg:text-3xl font-bold text-[#bb3523] mb-4">
{pathname?.split("/")[1] == "in" ? (
<>
<span className="text-black dark:text-white">{t("category")}&nbsp;</span>
<span className="text-black dark:text-white">
{t("category")}&nbsp;
</span>
{t("content")}
</>
) : (
<>
<span className="text-black dark:text-white">{t("content")}&nbsp;</span>
<span className="text-black dark:text-white">
{t("content")}&nbsp;
</span>
{t("category")}
</>
)}
@ -73,35 +101,51 @@ const ContentCategory = (props: { group?: string; type: string }) => {
<div className="h-1 w-52 bg-[#bb3523] mx-auto mb-6 rounded"></div>
<div className="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-4">
{(seeAllValue ? categories : categories?.slice(0, 4 ))?.map((category: any) => (
<div key={category?.id}>
<div onClick={() => router.push(`${prefixPath}all/filter?category=${category?.id}`)} className="cursor-pointer relative group rounded-md overflow-hidden shadow-md hover:shadow-lg block">
{/* Gambar */}
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
alt="category"
width={2560}
height={1440}
src={category?.thumbnailLink}
className="w-full lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
/>
{(seeAllValue ? categories : categories?.slice(0, 4))?.map(
(category: any) => (
<div key={category?.id}>
<div
onClick={() =>
router.push(
`${prefixPath}all/filter?category=${category?.id}`
)
}
className="cursor-pointer relative group rounded-md overflow-hidden shadow-md hover:shadow-lg block"
>
{/* Gambar */}
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
alt="category"
width={2560}
height={1440}
src={category?.thumbnailLink}
className="w-full lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
/>
{/* Overlay gelap */}
<div className="absolute inset-0 bg-black bg-opacity-25 group-hover:bg-opacity-35 transition-all duration-300 rounded-md"></div>
{/* Overlay gelap */}
<div className="absolute inset-0 bg-black bg-opacity-25 group-hover:bg-opacity-35 transition-all duration-300 rounded-md"></div>
{/* Judul */}
<div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523] z-10 group-hover:scale-x-150 origin-left">
<h3 className="text-sm font-semibold truncate">{category?.name}</h3>
{/* Judul */}
<div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523] z-10 group-hover:scale-x-150 origin-left">
<h3 className="text-sm font-semibold truncate">
{category?.name}
</h3>
</div>
</div>
</div>
</div>
))}
)
)}
</div>
{/* Tombol See More / See Less */}
{categories?.length > 8 && (
{categories?.length > 10 && (
<div className="flex items-center flex-row justify-center mt-6">
<Button onClick={() => setSeeAllValue(!seeAllValue)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
<Button
onClick={() => setSeeAllValue(!seeAllValue)}
className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]"
>
{seeAllValue ? t("seeLess") : t("seeMore")}
</Button>
</div>

30
components/landing-page/hero.tsx
View File

@ -2,7 +2,7 @@ import { formatDateToIndonesian, shimmer, toBase64 } from "@/utils/globals";
import React, { useEffect, useState } from "react";
import "swiper/css/bundle";
import "swiper/css/navigation";
import { getHeroData } from "@/service/landing/landing";
import { getHeroData, listStaticBanner } from "@/service/landing/landing";
import Link from "next/link";
import { useParams, usePathname, useRouter } from "next/navigation";
import {
@ -190,16 +190,19 @@ const SurveyIntroModal = ({ onNext }: { onNext: () => void }) => {
const ONE_MONTH = 30 * 24 * 60 * 60 * 1000;
const Hero: React.FC = () => {
const Hero = (props: { group?: string }) => {
const router = useRouter();
const pathname = usePathname();
const params = useParams();
const locale = params?.locale;
const [isLoading, setIsLoading] = useState<any>(true);
const [heroData, setHeroData] = useState<any>();
const [content, setContent] = useState<any>();
const [showModal, setShowModal] = useState(false);
const [showSurveyModal, setShowSurveyModal] = useState(false);
const [showFormModal, setShowFormModal] = useState(false);
const poldaName = params?.polda_name;
const satkerName = params?.satker_name;
useEffect(() => {
const timer = setTimeout(() => {
@ -274,7 +277,28 @@ const Hero: React.FC = () => {
const initFetch = async () => {
const response = await getHeroData();
console.log(response);
let data = response?.data?.data?.content;
setHeroData(response?.data?.data?.content);
if (data) {
const resStatic = await listStaticBanner(
props.group == "mabes"
? ""
: props.group == "polda" && poldaName && String(poldaName)?.length > 1
? poldaName
: props.group == "satker" &&
satkerName &&
String(satkerName)?.length > 1
? "satker-" + satkerName
: ""
);
for (let i = 0; i < resStatic?.data?.data?.length; i++) {
const media = resStatic?.data.data[i]?.mediaUpload;
media.fileTypeId = media.fileType?.id;
data = data.filter((item: any) => item.id != media.id);
data.splice(0, 0, media);
}
setContent(data);
}
};
const shimmer = (w: number, h: number) => `
@ -322,7 +346,7 @@ const Hero: React.FC = () => {
) : (
<Carousel className="lg:w-2/3 lg:h-full ">
<CarouselContent>
{heroData?.map((list: any) => (
{content?.map((list: any) => (
<CarouselItem key={list?.id}>
<div className="relative h-[310px] lg:h-[460px] mt-1">
<Image

128
lib/menus.ts
View File

@ -3470,70 +3470,70 @@ export function getMenuList(pathname: string, t: any): Group[] {
},
],
},
// {
// groupLabel: "",
// id: "settings",
// menus: [
// {
// id: "settings",
// href: "/admin/settings",
// label: t("settings"),
// active: pathname.includes("/settinng"),
// icon: "material-symbols:settings",
// submenus: [
// {
// href: "/admin/settings/category",
// label: t("category"),
// active: pathname === "/admin/settings/category",
// icon: "heroicons:arrow-trending-up",
// children: [],
// },
// {
// href: "/admin/settings/tag",
// label: "Tag",
// active: pathname === "/admin/settings/tag",
// icon: "heroicons:arrow-trending-up",
// children: [],
// },
// {
// href: "/admin/settings/banner",
// label: "Banner",
// active: pathname === "/admin/settings/banner",
// icon: "heroicons:arrow-trending-up",
// children: [],
// },
// {
// href: "/admin/settings/feedback",
// label: "Feedback",
// active: pathname === "/admin/settings/feedback",
// icon: "heroicons:arrow-trending-up",
// children: [],
// },
// {
// href: "/admin/settings/faq",
// label: "FAQ",
// active: pathname === "/admin/settings/faq",
// icon: "heroicons:arrow-trending-up",
// children: [],
// },
// {
// href: "https://nat-mediahub.polri.go.id/",
// label: "Mediahub 2022",
// active: pathname === "/admin/settings/mediahub-2022",
// icon: "heroicons:arrow-trending-up",
// children: [],
// },
// {
// href: "/admin/settings/privacy",
// label: t("privacy"),
// active: pathname === "/admin/settings/privacy",
// icon: "heroicons:arrow-trending-up",
// children: [],
// },
// ],
// },
// ],
// },
{
groupLabel: "",
id: "settings",
menus: [
{
id: "settings",
href: "/admin/settings",
label: t("settings"),
active: pathname.includes("/settinng"),
icon: "material-symbols:settings",
submenus: [
{
href: "/admin/settings/category",
label: t("category"),
active: pathname === "/admin/settings/category",
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/admin/settings/tag",
label: "Tag",
active: pathname === "/admin/settings/tag",
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/admin/settings/banner",
label: "Banner",
active: pathname === "/admin/settings/banner",
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/admin/settings/feedback",
label: "Feedback",
active: pathname === "/admin/settings/feedback",
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/admin/settings/faq",
label: "FAQ",
active: pathname === "/admin/settings/faq",
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "https://nat-mediahub.polri.go.id/",
label: "Mediahub 2022",
active: pathname === "/admin/settings/mediahub-2022",
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/admin/settings/privacy",
label: t("privacy"),
active: pathname === "/admin/settings/privacy",
icon: "heroicons:arrow-trending-up",
children: [],
},
],
},
],
},
];
} else {
menusSelected = [

8
service/landing/landing.ts
View File

@ -37,6 +37,14 @@ export async function getHeroData() {
);
}
export async function listStaticBanner(
group: any = "",
isInt: Boolean = false
) {
const url = `media/static-banner?&group=${group}&isInt=${isInt}`;
return httpGetInterceptor(url);
}
export async function getPublicCategoryData(
group: any = "",
type: string = "",