fix mobile version polda/kaltara and tbnews
This commit is contained in:
parent
5762845cbc
commit
8812ce02ac
|
|
@ -497,7 +497,7 @@ const DetailInfo = () => {
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<div className="border-b-2 border-slate-300 mt-4 w-auto"></div>
|
||||
<div className="border-b-2 border-slate-300 mt-4 w-auto lg:w-[1230px] self-center"></div>
|
||||
|
||||
<div>
|
||||
{listSuggestion?.map((data: any) => (
|
||||
|
|
|
|||
|
|
@ -129,7 +129,7 @@ const RegionalNews = () => {
|
|||
<p className="text-white font-semibold">Berita Wilayah</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20">
|
||||
<div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20 mb-4 lg:mb-10">
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col space-y-3 mx-auto w-full lg:w-2/3">
|
||||
<Skeleton className="h-[310px] lg:h-[420px] rounded-xl" />
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@ const SocialMedia = () => {
|
|||
</div>
|
||||
<div className="flex flex-col lg:flex-row w-full">
|
||||
{selectedTab == "x" ? (
|
||||
<div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
|
||||
<div className="flex flex-row justify-between gap-5 ">
|
||||
{/* <div className="border border-slate-300 rounded-lg mt-4 w-[350px] h-[500px]">
|
||||
<div className="mt-2 flex flex-row gap-2 mx-1">
|
||||
<div className="h-full">
|
||||
|
|
@ -175,7 +175,7 @@ const SocialMedia = () => {
|
|||
</Carousel>
|
||||
</div>
|
||||
) : selectedTab == "instagram" ? (
|
||||
<div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
|
||||
<div className="flex flex-row justify-between gap-5">
|
||||
<div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
|
||||
<div className="mt-2 flex flex-row gap-2 mx-1">
|
||||
<div className="h-full">
|
||||
|
|
@ -207,7 +207,7 @@ const SocialMedia = () => {
|
|||
</div>
|
||||
</div>
|
||||
) : selectedTab == "facebook" ? (
|
||||
<div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
|
||||
<div className="flex flex-row justify-between gap-5">
|
||||
<div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
|
||||
<div className="mt-2 flex flex-row gap-2 mx-1">
|
||||
<div className="h-full">
|
||||
|
|
@ -239,7 +239,7 @@ const SocialMedia = () => {
|
|||
</div>
|
||||
</div>
|
||||
) : selectedTab == "tiktok" ? (
|
||||
<div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
|
||||
<div className="flex flex-row justify-between gap-5">
|
||||
<div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
|
||||
<div className="mt-2 flex flex-row gap-2 mx-1">
|
||||
<div className="h-full">
|
||||
|
|
@ -271,7 +271,7 @@ const SocialMedia = () => {
|
|||
</div>
|
||||
</div>
|
||||
) : selectedTab == "youtube" ? (
|
||||
<div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
|
||||
<div className="flex flex-row justify-between gap-5">
|
||||
<div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
|
||||
<div className="mt-2 flex flex-row gap-2 mx-1">
|
||||
<div className="h-full">
|
||||
|
|
|
|||
|
|
@ -813,7 +813,7 @@ const DetailInfo = () => {
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<div className="border-b-2 border-slate-300 mt-4 w-auto"></div>
|
||||
<div className="border-b-2 border-slate-300 mt-4 w-auto lg:w-[1600px] self-center"></div>
|
||||
|
||||
<div>
|
||||
{listSuggestion?.map((data: any) => (
|
||||
|
|
|
|||
|
|
@ -72,7 +72,21 @@ const ContentCategory = (props: { group?: string }) => {
|
|||
{categories?.map((category: any, index: number) =>
|
||||
!seeAllValue ? (
|
||||
index < 4 ? (
|
||||
// <Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
|
||||
// <Image
|
||||
// placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
|
||||
// alt="category"
|
||||
// width={2560}
|
||||
// height={1440}
|
||||
// src={category?.thumbnailLink}
|
||||
// className="w-full lg:w-[315px] lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
|
||||
// />
|
||||
// <div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523]">
|
||||
// <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
|
||||
// </div>
|
||||
// </Link>
|
||||
<Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
|
||||
{/* Gambar */}
|
||||
<Image
|
||||
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
|
||||
alt="category"
|
||||
|
|
@ -81,7 +95,12 @@ const ContentCategory = (props: { group?: string }) => {
|
|||
src={category?.thumbnailLink}
|
||||
className="w-full lg:w-[315px] lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523]">
|
||||
|
||||
{/* 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">
|
||||
<h3 className="text-sm font-semibold truncate">{category?.name}</h3>
|
||||
</div>
|
||||
</Link>
|
||||
|
|
@ -89,16 +108,35 @@ const ContentCategory = (props: { group?: string }) => {
|
|||
""
|
||||
)
|
||||
) : (
|
||||
// <Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
|
||||
// <Image
|
||||
// placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
|
||||
// alt="category"
|
||||
// width={2560}
|
||||
// height={1440}
|
||||
// src={category?.thumbnailLink}
|
||||
// className="w-fulllg:w-[315px] lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
|
||||
// />
|
||||
// <div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523]">
|
||||
// <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
|
||||
// </div>
|
||||
// </Link>
|
||||
<Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
|
||||
{/* Gambar */}
|
||||
<Image
|
||||
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
|
||||
alt="category"
|
||||
width={2560}
|
||||
height={1440}
|
||||
src={category?.thumbnailLink}
|
||||
className="w-fulllg:w-[315px] lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
|
||||
className="w-full lg:w-[315px] lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523]">
|
||||
|
||||
{/* Overlay Gelap */}
|
||||
<div className="absolute inset-0 bg-black bg-opacity-25 group-hover:bg-opacity-35 transition-all duration-300"></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">
|
||||
<h3 className="text-sm font-semibold truncate">{category?.name}</h3>
|
||||
</div>
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -89,8 +89,9 @@ const HeaderBannerKaltara = () => {
|
|||
<CarouselContent>
|
||||
{content?.map((row: any) => (
|
||||
<CarouselItem key={row?.id}>
|
||||
<div className="relative h-[310px] lg:h-[580px]">
|
||||
<Image src={row?.thumbnailLink} alt="" width={1920} height={1080} className="w-full h-[540px] lg:h-full rounded-lg object-cover" />
|
||||
<div className="relative h-[310px] lg:h-[580px] overflow-hidden rounded-lg">
|
||||
<Image src={row?.thumbnailLink} alt="" width={1920} height={1080} className="w-full h-[540px] lg:h-full object-cover" />
|
||||
<div className="absolute inset-0 bg-black bg-opacity-30"></div> {/* Overlay */}
|
||||
<div className="absolute bottom-5 left-5 right-5 bg-black bg-opacity-50 text-white p-4 rounded-r-lg border-l-2 border-[#bb3523]">
|
||||
<span className="text-[#bb3523] font-sans bg-[#b0b0af] border border-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-[10px] lg:text-[14px] px-[10px] py-[5px]">{row?.categoryName}</span>
|
||||
<div onClick={() => router.push(prefixPath + `/image/detail/${row?.slug}`)} className="cursor-pointer mt-2 lg:mt-0">
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
|
|||
<Reveal>
|
||||
<div className="px-4 lg:px-20 my-10">
|
||||
<div className="bg-[#c03724] rounded-md p-3 w-fit text-white">Berita {props.type == "popular" ? "Terpopuler" : props.type == "latest" ? t("new") : "Serupa"}</div>
|
||||
<div className="mx-auto w-full max-w-7xl justify-center flex px-5 flex-col lg:flex-row gap-5 mb-4">
|
||||
<div className="mx-auto w-full justify-center flex px-5 flex-col lg:flex-row gap-5 mb-4">
|
||||
<Tabs value={selectedTab} onValueChange={setSelectedTab}>
|
||||
<TabsList className="grid grid-cols-2 lg:flex lg:flex-row">
|
||||
<TabsTrigger
|
||||
|
|
@ -130,40 +130,70 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
|
|||
<div className="">
|
||||
{selectedTab == "image" ? (
|
||||
content?.length > 0 ? (
|
||||
<Carousel className="w-[90%] mx-auto">
|
||||
// <Carousel className="">
|
||||
// <CarouselContent>
|
||||
// {content?.map((image: any) => (
|
||||
// <CarouselItem key={image?.id} className="basis-1/2 md:basis-1/3 lg:basis-1/4">
|
||||
// <div onClick={() => router.push(prefixPath + `/video/detail/${image?.slug}`)} className="cursor-pointer relative group rounded-md overflow-hidden">
|
||||
// {/* Gambar */}
|
||||
// <Image
|
||||
// placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
|
||||
// alt="image"
|
||||
// width={2560}
|
||||
// height={1440}
|
||||
// src={image?.thumbnailLink}
|
||||
// className="w-full lg:w-[390px] h-48 md:h-56 lg:h-[490px] object-cover rounded-md"
|
||||
// />
|
||||
|
||||
// {/* Kategori - Sekarang Berada di Atas */}
|
||||
// <span className="absolute top-2 left-2 z-10 text-xs md:text-sm font-sans font-semibold uppercase px-2 py-1 bg-white bg-opacity-20 border border-[#c03724] text-[#c03724] rounded-md">{image?.categoryName}</span>
|
||||
|
||||
// {/* Overlay Konten (Informasi di Bawah) */}
|
||||
// <div className="absolute bottom-0 left-0 right-0 p-4 bg-transparent rounded-md">
|
||||
// {/* Judul */}
|
||||
// <p className="text-white text-sm md:text-[20px] font-sans font-semibold mb-2">{image?.title}</p>
|
||||
|
||||
// {/* Info Tambahan */}
|
||||
// {/* <p className="flex items-center text-xs md:text-sm text-white mt-1 gap-2">
|
||||
// {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {video?.clickCount}
|
||||
// </p> */}
|
||||
// </div>
|
||||
// </div>
|
||||
// </CarouselItem>
|
||||
// ))}
|
||||
// </CarouselContent>
|
||||
// {/* <CarouselPrevious className="hover:bg-black" />
|
||||
// <CarouselNext className="hover:bg-black -mr-6" /> */}
|
||||
// </Carousel>
|
||||
<Carousel className="">
|
||||
<CarouselContent>
|
||||
{content?.map((video: any) => (
|
||||
<CarouselItem key={video?.id} className="basis-1/2 md:basis-1/3 lg:basis-1/4">
|
||||
<div onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group rounded-md overflow-hidden">
|
||||
{content?.map((image: any) => (
|
||||
<CarouselItem key={image?.id} className="basis-1/2 md:basis-1/3 lg:basis-1/4">
|
||||
<div onClick={() => router.push(prefixPath + `/image/detail/${image?.slug}`)} className="cursor-pointer relative group rounded-md overflow-hidden">
|
||||
{/* Gambar */}
|
||||
<Image
|
||||
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
|
||||
alt="video"
|
||||
width={2560}
|
||||
height={1440}
|
||||
src={video?.thumbnailLink}
|
||||
src={image?.thumbnailLink}
|
||||
className="w-full lg:w-[390px] h-48 md:h-56 lg:h-[490px] object-cover rounded-md"
|
||||
/>
|
||||
|
||||
{/* Kategori - Sekarang Berada di Atas */}
|
||||
<span className="absolute top-2 left-2 z-10 text-xs md:text-sm font-sans font-semibold uppercase px-2 py-1 bg-white bg-opacity-20 border border-[#c03724] text-[#c03724] rounded-md">{video?.categoryName}</span>
|
||||
{/* Overlay gelap */}
|
||||
<div className="absolute inset-0 bg-black bg-opacity-30 group-hover:bg-opacity-40 transition-all duration-300 rounded-md"></div>
|
||||
|
||||
{/* Overlay Konten (Informasi di Bawah) */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-4 bg-transparent rounded-md">
|
||||
{/* Judul */}
|
||||
<p className="text-white text-sm md:text-[20px] font-sans font-semibold mb-2">{video?.title}</p>
|
||||
{/* Kategori */}
|
||||
<span className="absolute top-2 left-2 z-10 text-xs md:text-sm font-sans font-semibold uppercase px-2 py-1 bg-white bg-opacity-20 border border-[#c03724] text-[#c03724] rounded-md">{image?.categoryName}</span>
|
||||
|
||||
{/* Info Tambahan */}
|
||||
{/* <p className="flex items-center text-xs md:text-sm text-white mt-1 gap-2">
|
||||
{formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {video?.clickCount}
|
||||
</p> */}
|
||||
{/* Konten Informasi */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-4 z-10">
|
||||
<p className="text-white text-sm md:text-[20px] font-sans font-semibold mb-2">{image?.title}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
<CarouselPrevious className="hover:bg-black" />
|
||||
<CarouselNext className="hover:bg-black -mr-6" />
|
||||
</Carousel>
|
||||
) : (
|
||||
<p className="flex items-center justify-center">
|
||||
|
|
@ -200,8 +230,8 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
|
|||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
{/* <CarouselPrevious />
|
||||
<CarouselNext /> */}
|
||||
</Carousel>
|
||||
) : (
|
||||
<p className="flex items-center justify-center">
|
||||
|
|
@ -210,10 +240,45 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
|
|||
)
|
||||
) : selectedTab == "video" ? (
|
||||
content?.length > 0 ? (
|
||||
<Carousel className="w-[90%] mx-auto">
|
||||
// <Carousel className="">
|
||||
// <CarouselContent>
|
||||
// {content?.map((video: any) => (
|
||||
// <CarouselItem key={video?.id} className=" md:basis-1/3 lg:basis-1/4">
|
||||
// <div onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group rounded-lg overflow-hidden">
|
||||
// {/* Gambar */}
|
||||
// <Image
|
||||
// placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
|
||||
// alt="video"
|
||||
// width={2560}
|
||||
// height={1440}
|
||||
// src={video?.thumbnailLink}
|
||||
// className="w-full lg:w-[315px] h-48 md:h-56 lg:h-[490px] object-cover rounded-lg transition-transform duration-300"
|
||||
// />
|
||||
|
||||
// {/* Kategori - Sekarang Berada di Atas */}
|
||||
// <span className="absolute top-2 left-2 z-10 text-xs md:text-sm font-sans font-semibold uppercase px-2 py-1 bg-white bg-opacity-20 border border-[#c03724] text-[#c03724] rounded-md">{video?.categoryName}</span>
|
||||
|
||||
// {/* Overlay Konten (Informasi di Bawah) */}
|
||||
// <div className="absolute bottom-0 left-0 right-0 p-4 bg-transparent rounded-lg">
|
||||
// {/* Judul */}
|
||||
// <p className="text-white text-sm md:text-[20px] font-sans font-semibold mb-2">{video?.title}</p>
|
||||
|
||||
// {/* Info Tambahan */}
|
||||
// {/* <p className="flex items-center text-xs md:text-sm text-white mt-1 gap-2">
|
||||
// {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {video?.clickCount}
|
||||
// </p> */}
|
||||
// </div>
|
||||
// </div>
|
||||
// </CarouselItem>
|
||||
// ))}
|
||||
// </CarouselContent>
|
||||
// {/* <CarouselPrevious className="hover:bg-black" />
|
||||
// <CarouselNext className="hover:bg-black -mr-6" /> */}
|
||||
// </Carousel>
|
||||
<Carousel className="">
|
||||
<CarouselContent>
|
||||
{content?.map((video: any) => (
|
||||
<CarouselItem key={video?.id} className=" md:basis-1/3 lg:basis-1/4">
|
||||
<CarouselItem key={video?.id} className="md:basis-1/3 lg:basis-1/4">
|
||||
<div onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group rounded-lg overflow-hidden">
|
||||
{/* Gambar */}
|
||||
<Image
|
||||
|
|
@ -225,25 +290,20 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
|
|||
className="w-full lg:w-[315px] h-48 md:h-56 lg:h-[490px] object-cover rounded-lg transition-transform duration-300"
|
||||
/>
|
||||
|
||||
{/* Kategori - Sekarang Berada di Atas */}
|
||||
{/* Overlay Gelap */}
|
||||
<div className="absolute inset-0 bg-black bg-opacity-30 group-hover:bg-opacity-40 transition-all duration-300 rounded-lg"></div>
|
||||
|
||||
{/* Kategori */}
|
||||
<span className="absolute top-2 left-2 z-10 text-xs md:text-sm font-sans font-semibold uppercase px-2 py-1 bg-white bg-opacity-20 border border-[#c03724] text-[#c03724] rounded-md">{video?.categoryName}</span>
|
||||
|
||||
{/* Overlay Konten (Informasi di Bawah) */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-4 bg-transparent rounded-lg">
|
||||
{/* Judul */}
|
||||
<p className="text-white text-sm md:text-[20px] font-sans font-semibold mb-2">{video?.title}</p>
|
||||
|
||||
{/* Info Tambahan */}
|
||||
{/* <p className="flex items-center text-xs md:text-sm text-white mt-1 gap-2">
|
||||
{formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {video?.clickCount}
|
||||
</p> */}
|
||||
{/* Overlay Konten (Judul) */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-4 z-10">
|
||||
<p className="text-white text-sm md:text-[20px] font-sans font-semibold mb-2 line-clamp-2">{video?.title}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
<CarouselPrevious className="hover:bg-black" />
|
||||
<CarouselNext className="hover:bg-black -mr-6" />
|
||||
</Carousel>
|
||||
) : (
|
||||
<p className="flex items-center justify-center">
|
||||
|
|
@ -286,8 +346,8 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
|
|||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
{/* <CarouselPrevious />
|
||||
<CarouselNext /> */}
|
||||
</Carousel>
|
||||
) : (
|
||||
<p className="flex items-center justify-center">
|
||||
|
|
|
|||
Loading…
Reference in New Issue