feat:curated content
This commit is contained in:
commit
93912c6c8f
|
|
@ -0,0 +1,131 @@
|
|||
import { Link } from "@/i18n/routing";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
const ContactUs = () => {
|
||||
return (
|
||||
<div className="bg-[#fbfbfb] text-black px-4 lg:px-20 mb-10 mt-10">
|
||||
<div className="container mx-auto py-8">
|
||||
<div className="flex flex-col md:flex-row justify-between items-start gap-4">
|
||||
{/* Logo */}
|
||||
<div className="flex flex-col items-center space-x-4">
|
||||
<Image src="/assets/img/logo-bawah.png" alt="" width={400} height={300} className="" />
|
||||
<p className="text-[#bb3523] font-bold">Copyright @TribrataNews Kaltara</p>
|
||||
</div>
|
||||
|
||||
{/* Contact Us */}
|
||||
<div className="mt-8 md:mt-0 w-full lg:w-[500px]">
|
||||
<h2 className="text-[#bb3523] text-lg font-bold">Kontak Kami</h2>
|
||||
<hr className="border-t-2 border-dotted border-[#bb3523] my-2" />
|
||||
<p className="flex items-center text-sm gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path fill="#000" d="M12 11.5A2.5 2.5 0 0 1 9.5 9A2.5 2.5 0 0 1 12 6.5A2.5 2.5 0 0 1 14.5 9a2.5 2.5 0 0 1-2.5 2.5M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7" />
|
||||
</svg>
|
||||
Jalan Komjen Dr. H.M. Jasin No.86, Bumi Rahayu, Kec. Tj. Selor, Kabupaten Bulungan, Kalimantan Utara 77212
|
||||
</p>
|
||||
<p className="flex items-center text-sm mt-2 gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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="#000"
|
||||
d="M6.857 2.445C8 3.278 8.89 4.415 9.65 5.503l.442.644l.417.615a1.504 1.504 0 0 1-.256 1.986l-1.951 1.449a.48.48 0 0 0-.142.616c.442.803 1.228 1.999 2.128 2.899s2.153 1.738 3.012 2.23a.483.483 0 0 0 .644-.162l1.27-1.933a1.503 1.503 0 0 1 2.056-.332l.663.459c1.239.86 2.57 1.837 3.588 3.14a1.47 1.47 0 0 1 .189 1.484c-.837 1.953-2.955 3.616-5.158 3.535l-.3-.017l-.233-.02l-.258-.03l-.281-.038l-.305-.05l-.16-.03l-.336-.072l-.176-.04l-.366-.094l-.385-.11l-.402-.13c-1.846-.626-4.189-1.856-6.593-4.26s-3.633-4.746-4.259-6.592l-.13-.402l-.11-.385l-.094-.366l-.078-.346a12 12 0 0 1-.063-.326l-.05-.305l-.04-.281l-.029-.258l-.02-.233l-.016-.3c-.081-2.196 1.6-4.329 3.544-5.162a1.47 1.47 0 0 1 1.445.159m8.135 3.595l.116.013a3.5 3.5 0 0 1 2.858 2.96a1 1 0 0 1-1.958.393l-.023-.115a1.5 1.5 0 0 0-1.07-1.233l-.155-.035a1 1 0 0 1 .232-1.983M15 3a6 6 0 0 1 6 6a1 1 0 0 1-1.993.117L19 9a4 4 0 0 0-3.738-3.991L15 5a1 1 0 1 1 0-2"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
Hotline Divisi HumasPolri (021) 72120599
|
||||
</p>
|
||||
<p className="flex items-center text-sm mt-2 gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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="#000"
|
||||
d="M6.857 2.445C8 3.278 8.89 4.415 9.65 5.503l.442.644l.417.615a1.504 1.504 0 0 1-.256 1.986l-1.951 1.449a.48.48 0 0 0-.142.616c.442.803 1.228 1.999 2.128 2.899s2.153 1.738 3.012 2.23a.483.483 0 0 0 .644-.162l1.27-1.933a1.503 1.503 0 0 1 2.056-.332l.663.459c1.239.86 2.57 1.837 3.588 3.14a1.47 1.47 0 0 1 .189 1.484c-.837 1.953-2.955 3.616-5.158 3.535l-.3-.017l-.233-.02l-.258-.03l-.281-.038l-.305-.05l-.16-.03l-.336-.072l-.176-.04l-.366-.094l-.385-.11l-.402-.13c-1.846-.626-4.189-1.856-6.593-4.26s-3.633-4.746-4.259-6.592l-.13-.402l-.11-.385l-.094-.366l-.078-.346a12 12 0 0 1-.063-.326l-.05-.305l-.04-.281l-.029-.258l-.02-.233l-.016-.3c-.081-2.196 1.6-4.329 3.544-5.162a1.47 1.47 0 0 1 1.445.159m8.135 3.595l.116.013a3.5 3.5 0 0 1 2.858 2.96a1 1 0 0 1-1.958.393l-.023-.115a1.5 1.5 0 0 0-1.07-1.233l-.155-.035a1 1 0 0 1 .232-1.983M15 3a6 6 0 0 1 6 6a1 1 0 0 1-1.993.117L19 9a4 4 0 0 0-3.738-3.991L15 5a1 1 0 1 1 0-2"
|
||||
/>
|
||||
</g>
|
||||
</svg>{" "}
|
||||
Call Center 110
|
||||
</p>
|
||||
<p className="flex items-center mt-2 gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
|
||||
<path fill="#000" d="M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm8-7l8-5V6l-8 5l-8-5v2z" />
|
||||
</svg>
|
||||
ppid@polri.go.id
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Links */}
|
||||
<div className="mt-8 md:mt-0">
|
||||
<h2 className="text-xl font-bold text-[#bb3523]">Tautan</h2>
|
||||
<hr className="border-t-2 border-dotted border-[#bb3523] my-2" />
|
||||
<div className="flex flex-col">
|
||||
<Link href="https://polri.go.id/" className="flex items-center gap-2 text-sm">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
|
||||
<path
|
||||
fill="#000"
|
||||
d="M11 16c0-1.393.078-2.734.222-4h9.556c.144 1.266.222 2.607.222 4s-.078 2.734-.222 4h-9.556A36 36 0 0 1 11 16m-1.79 4A38 38 0 0 1 9 16c0-1.379.073-2.72.21-4H2.58A14 14 0 0 0 2 16c0 1.39.203 2.733.58 4zm-5.863 2h6.138c.314 1.86.771 3.547 1.344 4.978c.369.922.793 1.758 1.272 2.472A14.04 14.04 0 0 1 3.347 22m8.168 0h8.97c-.29 1.6-.69 3.032-1.17 4.235c-.516 1.288-1.104 2.262-1.706 2.9c-.6.634-1.144.865-1.609.865s-1.009-.231-1.609-.866c-.602-.637-1.19-1.611-1.705-2.899c-.481-1.203-.881-2.636-1.171-4.235m11 0c-.314 1.86-.771 3.547-1.344 4.978c-.369.922-.793 1.758-1.272 2.472A14.04 14.04 0 0 0 28.653 22zm6.905-2c.377-1.267.58-2.61.58-4s-.203-2.733-.58-4h-6.63c.137 1.28.21 2.621.21 4s-.073 2.72-.21 4zM19.314 5.765c.481 1.203.881 2.636 1.171 4.235h-8.97c.29-1.6.69-3.032 1.17-4.235c.516-1.288 1.104-2.263 1.706-2.9c.598-.631 1.14-.863 1.604-.865h.008c.464 0 1.007.233 1.606.866c.602.636 1.19 1.611 1.705 2.899M22.515 10h6.138a14.04 14.04 0 0 0-8.754-7.45c.479.714.903 1.55 1.272 2.472c.573 1.431 1.03 3.118 1.344 4.978M3.347 10h6.138c.314-1.86.771-3.547 1.344-4.978c.369-.922.793-1.758 1.272-2.472A14.04 14.04 0 0 0 3.347 10"
|
||||
/>
|
||||
</svg>
|
||||
Tentang Kami{" "}
|
||||
</Link>
|
||||
<Link href="https://tribratanews.polri.go.id/" className="flex items-center mt-2 text-sm gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
|
||||
<path
|
||||
fill="#000"
|
||||
d="M11 16c0-1.393.078-2.734.222-4h9.556c.144 1.266.222 2.607.222 4s-.078 2.734-.222 4h-9.556A36 36 0 0 1 11 16m-1.79 4A38 38 0 0 1 9 16c0-1.379.073-2.72.21-4H2.58A14 14 0 0 0 2 16c0 1.39.203 2.733.58 4zm-5.863 2h6.138c.314 1.86.771 3.547 1.344 4.978c.369.922.793 1.758 1.272 2.472A14.04 14.04 0 0 1 3.347 22m8.168 0h8.97c-.29 1.6-.69 3.032-1.17 4.235c-.516 1.288-1.104 2.262-1.706 2.9c-.6.634-1.144.865-1.609.865s-1.009-.231-1.609-.866c-.602-.637-1.19-1.611-1.705-2.899c-.481-1.203-.881-2.636-1.171-4.235m11 0c-.314 1.86-.771 3.547-1.344 4.978c-.369.922-.793 1.758-1.272 2.472A14.04 14.04 0 0 0 28.653 22zm6.905-2c.377-1.267.58-2.61.58-4s-.203-2.733-.58-4h-6.63c.137 1.28.21 2.621.21 4s-.073 2.72-.21 4zM19.314 5.765c.481 1.203.881 2.636 1.171 4.235h-8.97c.29-1.6.69-3.032 1.17-4.235c.516-1.288 1.104-2.263 1.706-2.9c.598-.631 1.14-.863 1.604-.865h.008c.464 0 1.007.233 1.606.866c.602.636 1.19 1.611 1.705 2.899M22.515 10h6.138a14.04 14.04 0 0 0-8.754-7.45c.479.714.903 1.55 1.272 2.472c.573 1.431 1.03 3.118 1.344 4.978M3.347 10h6.138c.314-1.86.771-3.547 1.344-4.978c.369-.922.793-1.758 1.272-2.472A14.04 14.04 0 0 0 3.347 10"
|
||||
/>
|
||||
</svg>
|
||||
Redaksi
|
||||
</Link>
|
||||
<Link href="https://www.humas.polri.go.id/" className="flex items-center mt-2 text-sm gap-2 ">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
|
||||
<path
|
||||
fill="#000"
|
||||
d="M11 16c0-1.393.078-2.734.222-4h9.556c.144 1.266.222 2.607.222 4s-.078 2.734-.222 4h-9.556A36 36 0 0 1 11 16m-1.79 4A38 38 0 0 1 9 16c0-1.379.073-2.72.21-4H2.58A14 14 0 0 0 2 16c0 1.39.203 2.733.58 4zm-5.863 2h6.138c.314 1.86.771 3.547 1.344 4.978c.369.922.793 1.758 1.272 2.472A14.04 14.04 0 0 1 3.347 22m8.168 0h8.97c-.29 1.6-.69 3.032-1.17 4.235c-.516 1.288-1.104 2.262-1.706 2.9c-.6.634-1.144.865-1.609.865s-1.009-.231-1.609-.866c-.602-.637-1.19-1.611-1.705-2.899c-.481-1.203-.881-2.636-1.171-4.235m11 0c-.314 1.86-.771 3.547-1.344 4.978c-.369.922-.793 1.758-1.272 2.472A14.04 14.04 0 0 0 28.653 22zm6.905-2c.377-1.267.58-2.61.58-4s-.203-2.733-.58-4h-6.63c.137 1.28.21 2.621.21 4s-.073 2.72-.21 4zM19.314 5.765c.481 1.203.881 2.636 1.171 4.235h-8.97c.29-1.6.69-3.032 1.17-4.235c.516-1.288 1.104-2.263 1.706-2.9c.598-.631 1.14-.863 1.604-.865h.008c.464 0 1.007.233 1.606.866c.602.636 1.19 1.611 1.705 2.899M22.515 10h6.138a14.04 14.04 0 0 0-8.754-7.45c.479.714.903 1.55 1.272 2.472c.573 1.431 1.03 3.118 1.344 4.978M3.347 10h6.138c.314-1.86.771-3.547 1.344-4.978c.369-.922.793-1.758 1.272-2.472A14.04 14.04 0 0 0 3.347 10"
|
||||
/>
|
||||
</svg>
|
||||
Pedoman Media Siber
|
||||
</Link>
|
||||
<Link href="https://mediahub.polri.go.id/" className="flex items-center mt-2 text-sm gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
|
||||
<path
|
||||
fill="#000"
|
||||
d="M11 16c0-1.393.078-2.734.222-4h9.556c.144 1.266.222 2.607.222 4s-.078 2.734-.222 4h-9.556A36 36 0 0 1 11 16m-1.79 4A38 38 0 0 1 9 16c0-1.379.073-2.72.21-4H2.58A14 14 0 0 0 2 16c0 1.39.203 2.733.58 4zm-5.863 2h6.138c.314 1.86.771 3.547 1.344 4.978c.369.922.793 1.758 1.272 2.472A14.04 14.04 0 0 1 3.347 22m8.168 0h8.97c-.29 1.6-.69 3.032-1.17 4.235c-.516 1.288-1.104 2.262-1.706 2.9c-.6.634-1.144.865-1.609.865s-1.009-.231-1.609-.866c-.602-.637-1.19-1.611-1.705-2.899c-.481-1.203-.881-2.636-1.171-4.235m11 0c-.314 1.86-.771 3.547-1.344 4.978c-.369.922-.793 1.758-1.272 2.472A14.04 14.04 0 0 0 28.653 22zm6.905-2c.377-1.267.58-2.61.58-4s-.203-2.733-.58-4h-6.63c.137 1.28.21 2.621.21 4s-.073 2.72-.21 4zM19.314 5.765c.481 1.203.881 2.636 1.171 4.235h-8.97c.29-1.6.69-3.032 1.17-4.235c.516-1.288 1.104-2.263 1.706-2.9c.598-.631 1.14-.863 1.604-.865h.008c.464 0 1.007.233 1.606.866c.602.636 1.19 1.611 1.705 2.899M22.515 10h6.138a14.04 14.04 0 0 0-8.754-7.45c.479.714.903 1.55 1.272 2.472c.573 1.431 1.03 3.118 1.344 4.978M3.347 10h6.138c.314-1.86.771-3.547 1.344-4.978c.369-.922.793-1.758 1.272-2.472A14.04 14.04 0 0 0 3.347 10"
|
||||
/>
|
||||
</svg>
|
||||
Index
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social Media */}
|
||||
{/* <div className="mt-8 md:mt-0">
|
||||
<h2 className="text-lg font-bold">Sosial Media Humas</h2>
|
||||
<hr className="border-t-2 border-dotted border-black my-2" />
|
||||
<div className="flex gap-4">
|
||||
<a href="#">
|
||||
<Icon icon="fa6-brands:square-x-twitter" className="w-6 h-6" />
|
||||
</a>
|
||||
<a href="#">
|
||||
<Icon icon="skill-icons:instagram" className="w-6 h-6" />
|
||||
</a>
|
||||
<a href="#">
|
||||
<Icon icon="devicon:facebook" className="w-6 h-6" />
|
||||
</a>
|
||||
<a href="#">
|
||||
<Icon icon="hugeicons:tiktok" className="w-6 h-6" />
|
||||
</a>
|
||||
<a href="#">
|
||||
<Icon icon="fa-brands:youtube-square" className="w-6 h-6" />
|
||||
</a>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactUs;
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
"use client";
|
||||
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { getHeroData } from "@/service/landing/landing";
|
||||
import { formatDateToIndonesian } from "@/utils/globals";
|
||||
import Image from "next/image";
|
||||
import { useParams } from "next/navigation";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
const HeroKaltara = () => {
|
||||
const [isLoading, setIsLoading] = useState<any>(true);
|
||||
const params = useParams();
|
||||
const locale = params?.locale;
|
||||
const [heroData, setHeroData] = useState<any>();
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
}, 3000);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchCategories() {
|
||||
const url = "https://netidhub.com/api/csrf";
|
||||
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return data; // Menampilkan data yang diterima dari API
|
||||
} catch (error) {
|
||||
console.error("Fetch error: ", error);
|
||||
}
|
||||
}
|
||||
|
||||
fetchCategories();
|
||||
initFetch();
|
||||
}, []);
|
||||
|
||||
const initFetch = async () => {
|
||||
const response = await getHeroData();
|
||||
console.log(response);
|
||||
setHeroData(response?.data?.data?.content);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-10 py-4 w-auto mt-36">
|
||||
{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" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-full lg:w-2/3 lg:h-full">
|
||||
{heroData?.length > 0 && (
|
||||
<div className="flex flex-col gap-3">
|
||||
<Image src={heroData[0]?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full lg:w-[950px] h-[310px] lg:h-[420px] rounded-sm object-cover" />{" "}
|
||||
<h1 className="font-bold text-xl">{heroData[0]?.title}</h1>
|
||||
<div className="flex flex-row gap-3">
|
||||
<p className="text-[#c03724] text-sm">{heroData[0]?.categoryName}</p>
|
||||
<p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
|
||||
{formatDateToIndonesian(new Date(heroData[0]?.createdAt))} {heroData[0]?.timezone ? heroData[0]?.timezone : "WIB"}|{" "}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
|
||||
/>
|
||||
</svg>{" "}
|
||||
{heroData[0]?.clickCount}{" "}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-light text-justify hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae eum consectetur cum placeat non aperiam suscipit libero ipsa commodi. Quam dicta eligendi voluptate, ab sunt ratione accusamus esse animi vel libero veniam
|
||||
nulla tenetur ipsum provident minus. Error ad eligendi quasi autem neque ex, iste perspiciatis magnam. Magni, quos sequi. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit rem veniam doloribus saepe atque quia
|
||||
ut quaerat fugit harum. Velit quia quisquam consectetur blanditiis porro itaque perferendis. Voluptatibus fuga ipsam maxime, hic doloribus inventore, odio eos molestiae velit cum placeat! Est nostrum quas veritatis deserunt
|
||||
itaque illum alias. Assumenda deleniti similique id.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-4 max-w-sm mx-auto mb-3">
|
||||
<Skeleton className="h-[73px] w-16 rounded-md" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="items-center hidden md:block gap-4 max-w-sm mx-auto mb-3 lg:flex">
|
||||
<Skeleton className="h-[73px] w-16 rounded-md" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
|
||||
<Skeleton className="h-[73px] w-16 rounded-md" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
|
||||
<Skeleton className="h-[73px] w-16 rounded-md" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto lg:flex">
|
||||
<Skeleton className="h-[73px] w-16 rounded-md" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="py-4 lg:py-0 flex flex-col gap-4 flex-nowrap w-[95vw] lg:w-auto overflow-x-auto">
|
||||
{heroData?.slice(0, 3).map((item: any) => (
|
||||
<div className="flex gap-3 flex-col lg:w-full">
|
||||
<div className="flex-shrink-0 rounded-lg">
|
||||
<Image width={720} height={480} src={item?.thumbnailLink} alt="" className="w-full h-[105px] object-cover rounded-sm" />
|
||||
</div>
|
||||
<div className="w-[280px] lg:w-auto flex flex-col">
|
||||
<h3 className="font-bold text-lg">{item?.title}</h3>
|
||||
<div className="flex flex-row gap-5">
|
||||
<p className="text-[#c03724] text-sm">{item?.categoryName}</p>
|
||||
<p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
|
||||
{formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
|
||||
/>
|
||||
</svg>{" "}
|
||||
{item?.clickCount}{" "}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroKaltara;
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
"use client";
|
||||
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { getHeroData } from "@/service/landing/landing";
|
||||
import { formatDateToIndonesian } from "@/utils/globals";
|
||||
import Image from "next/image";
|
||||
import { useParams } from "next/navigation";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
const LatestNews = () => {
|
||||
const [isLoading, setIsLoading] = useState<any>(true);
|
||||
const params = useParams();
|
||||
const locale = params?.locale;
|
||||
const [heroData, setHeroData] = useState<any>();
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
}, 3000);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchCategories() {
|
||||
const url = "https://netidhub.com/api/csrf";
|
||||
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return data; // Menampilkan data yang diterima dari API
|
||||
} catch (error) {
|
||||
console.error("Fetch error: ", error);
|
||||
}
|
||||
}
|
||||
|
||||
fetchCategories();
|
||||
initFetch();
|
||||
}, []);
|
||||
|
||||
const initFetch = async () => {
|
||||
const response = await getHeroData();
|
||||
console.log(response);
|
||||
setHeroData(response?.data?.data?.content);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="my-5 px-4 lg:px-28 gap-3">
|
||||
<div className="bg-[#c03724] rounded-md p-3 w-fit">
|
||||
<p className="text-white font-semibold">Berita Terbaru</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-11 w-auto">
|
||||
{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" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-full lg:w-2/3 lg:h-full">
|
||||
{heroData?.length > 0 && (
|
||||
<div className="flex flex-col gap-3">
|
||||
<Image src={heroData[0]?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full lg:w-[950px] h-[310px] lg:h-[420px] rounded-sm object-cover" />{" "}
|
||||
<h1 className="font-bold text-xl">{heroData[0]?.title}</h1>
|
||||
<div className="flex flex-row gap-3">
|
||||
<p className="text-[#c03724] text-xs">{heroData[0]?.categoryName}</p>
|
||||
<p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
|
||||
{formatDateToIndonesian(new Date(heroData[0]?.createdAt))} {heroData[0]?.timezone ? heroData[0]?.timezone : "WIB"}|{" "}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
|
||||
/>
|
||||
</svg>{" "}
|
||||
{heroData[0]?.clickCount}{" "}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-light text-justify hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae eum consectetur cum placeat non aperiam suscipit libero ipsa commodi. Quam dicta eligendi voluptate, ab sunt ratione accusamus esse animi vel libero
|
||||
veniam nulla tenetur ipsum provident minus. Error ad eligendi quasi autem neque ex, iste perspiciatis magnam. Magni, quos sequi. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit rem veniam doloribus saepe
|
||||
atque quia ut quaerat fugit harum. Velit quia quisquam consectetur blanditiis porro itaque perferendis. Voluptatibus fuga ipsam maxime, hic doloribus inventore, odio eos molestiae velit cum placeat! Est nostrum quas
|
||||
veritatis deserunt itaque illum alias. Assumenda deleniti similique id.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-4 max-w-sm mx-auto mb-3">
|
||||
<Skeleton className="h-[73px] w-16 rounded-md" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="items-center hidden md:block gap-4 max-w-sm mx-auto mb-3 lg:flex">
|
||||
<Skeleton className="h-[73px] w-16 rounded-md" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
|
||||
<Skeleton className="h-[73px] w-16 rounded-md" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
|
||||
<Skeleton className="h-[73px] w-16 rounded-md" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto lg:flex">
|
||||
<Skeleton className="h-[73px] w-16 rounded-md" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="py-4 lg:py-0 flex flex-col gap-4 flex-nowrap w-[95vw] lg:w-auto overflow-x-auto">
|
||||
{heroData?.map((item: any) => (
|
||||
<div className="flex gap-3 flex-col lg:w-full">
|
||||
{/* <div className="flex-shrink-0 rounded-lg">
|
||||
<Image width={720} height={480} src={item?.thumbnailLink} alt="" className="w-full h-[105px] object-cover rounded-sm" />
|
||||
</div> */}
|
||||
<div className="w-[280px] lg:w-auto flex flex-col">
|
||||
<h3 className="font-bold text-lg">{item?.title}</h3>
|
||||
<div className="flex flex-row gap-5">
|
||||
<p className="text-[#c03724] text-sm">{item?.categoryName}</p>
|
||||
<p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
|
||||
{formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
|
||||
/>
|
||||
</svg>{" "}
|
||||
{item?.clickCount}{" "}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default LatestNews;
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
"use client";
|
||||
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { getHeroData } from "@/service/landing/landing";
|
||||
import { formatDateToIndonesian } from "@/utils/globals";
|
||||
import Image from "next/image";
|
||||
import { useParams } from "next/navigation";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
const NationalNews = () => {
|
||||
const [isLoading, setIsLoading] = useState<any>(true);
|
||||
const params = useParams();
|
||||
const locale = params?.locale;
|
||||
const [heroData, setHeroData] = useState<any>();
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
}, 3000);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchCategories() {
|
||||
const url = "https://netidhub.com/api/csrf";
|
||||
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return data; // Menampilkan data yang diterima dari API
|
||||
} catch (error) {
|
||||
console.error("Fetch error: ", error);
|
||||
}
|
||||
}
|
||||
|
||||
fetchCategories();
|
||||
initFetch();
|
||||
}, []);
|
||||
|
||||
const initFetch = async () => {
|
||||
const response = await getHeroData();
|
||||
console.log(response);
|
||||
setHeroData(response?.data?.data?.content);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="my-5 px-4 lg:px-28 gap-3">
|
||||
<div className="bg-[#c03724] rounded-md p-3 w-fit">
|
||||
<p className="text-white font-semibold">Berita Nasional</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-11 w-auto">
|
||||
{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" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-full lg:w-2/3 lg:h-full">
|
||||
{heroData?.length > 0 && (
|
||||
<div className="flex flex-col gap-3">
|
||||
<Image src={heroData[0]?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full lg:w-[950px] h-[310px] lg:h-[420px] rounded-sm object-cover" />{" "}
|
||||
<h1 className="font-bold text-xl">{heroData[0]?.title}</h1>
|
||||
<div className="flex flex-row gap-3">
|
||||
<p className="text-[#c03724] text-xs">{heroData[0]?.categoryName}</p>
|
||||
<p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
|
||||
{formatDateToIndonesian(new Date(heroData[0]?.createdAt))} {heroData[0]?.timezone ? heroData[0]?.timezone : "WIB"}|{" "}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
|
||||
/>
|
||||
</svg>{" "}
|
||||
{heroData[0]?.clickCount}{" "}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-light text-justify hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae eum consectetur cum placeat non aperiam suscipit libero ipsa commodi. Quam dicta eligendi voluptate, ab sunt ratione accusamus esse animi vel libero
|
||||
veniam nulla tenetur ipsum provident minus. Error ad eligendi quasi autem neque ex, iste perspiciatis magnam. Magni, quos sequi. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit rem veniam doloribus saepe
|
||||
atque quia ut quaerat fugit harum. Velit quia quisquam consectetur blanditiis porro itaque perferendis. Voluptatibus fuga ipsam maxime, hic doloribus inventore, odio eos molestiae velit cum placeat! Est nostrum quas
|
||||
veritatis deserunt itaque illum alias. Assumenda deleniti similique id.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-4 max-w-sm mx-auto mb-3">
|
||||
<Skeleton className="h-[73px] w-16 rounded-md" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="items-center hidden md:block gap-4 max-w-sm mx-auto mb-3 lg:flex">
|
||||
<Skeleton className="h-[73px] w-16 rounded-md" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
|
||||
<Skeleton className="h-[73px] w-16 rounded-md" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
|
||||
<Skeleton className="h-[73px] w-16 rounded-md" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto lg:flex">
|
||||
<Skeleton className="h-[73px] w-16 rounded-md" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="py-4 lg:py-0 flex flex-col gap-4 flex-nowrap w-[95vw] lg:w-auto overflow-x-auto">
|
||||
{heroData?.map((item: any) => (
|
||||
<div className="flex gap-3 flex-col lg:w-full">
|
||||
{/* <div className="flex-shrink-0 rounded-lg">
|
||||
<Image width={720} height={480} src={item?.thumbnailLink} alt="" className="w-full h-[105px] object-cover rounded-sm" />
|
||||
</div> */}
|
||||
<div className="w-[280px] lg:w-auto flex flex-col">
|
||||
<h3 className="font-bold text-lg">{item?.title}</h3>
|
||||
<div className="flex flex-row gap-5">
|
||||
<p className="text-[#c03724] text-sm">{item?.categoryName}</p>
|
||||
<p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
|
||||
{formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
|
||||
/>
|
||||
</svg>{" "}
|
||||
{item?.clickCount}{" "}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default NationalNews;
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { Icon } from "@/components/ui/icon";
|
||||
import { Link } from "@/i18n/routing";
|
||||
import Image from "next/image";
|
||||
import React, { useState } from "react";
|
||||
|
||||
const category = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Nasional",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Kaltara",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Keamanan",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Kesehatan",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Olahraga",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "PPA",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "MediaHub",
|
||||
},
|
||||
];
|
||||
|
||||
const categoryLinks: any = {
|
||||
Nasional: "/news/nasional",
|
||||
Kaltara: "/news/kaltara",
|
||||
Keamanan: "/security",
|
||||
Kesehatan: "/health",
|
||||
Olahraga: "/sports",
|
||||
PPA: "/ppa",
|
||||
MediaHub: "https://mediahub.polri.go.id/",
|
||||
};
|
||||
|
||||
const NavbarKaltara = () => {
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="bg-[#c03724] w-full py-3 px-4 lg:px-20 flex justify-between items-center fixed top-0 z-50">
|
||||
<div className="flex flex-row items-center">
|
||||
<Image width={2560} height={1440} src="/assets/img/logo-new-tbnews.png" alt="image" className="h-28 w-72" />
|
||||
<div className="text-white font-semibold hidden lg:flex flex-row gap-14 items-center">
|
||||
{category?.map((data: any) => (
|
||||
<Link key={data?.id} href={categoryLinks[data?.name] || "#"}>
|
||||
{data?.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<Button className="hidden lg:flex justify-center items-center bg-white rounded-full gap-3 ml-7 p-2 w-fit h-fit">
|
||||
<Icon icon="material-symbols:lock" className="text-[#c03724]" />
|
||||
<p className="text-[#c03724]">Login</p>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Toggle */}
|
||||
<button className="text-black dark:text-white right-0 size-20 h-10 w-10 lg:hidden" onClick={() => setMenuOpen(!menuOpen)}>
|
||||
{menuOpen ? (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="m13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29l-4.3 4.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l4.29-4.3l4.29 4.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42Z" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M4 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m0 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m1 5a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2z" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{menuOpen && (
|
||||
<div className="lg:hidden absolute bg-[#c03724] dark:bg-slate-600 px-4 py-3 space-y-3 z-50 top-36 items-center w-[300px]">
|
||||
<div className="text-white font-semibold gap-5 items-center grid grid-cols-2">
|
||||
{category?.map((data: any) => (
|
||||
<Link key={data?.id} href={categoryLinks[data?.name] || "#"}>
|
||||
{data?.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<Button className="flex justify-center items-center bg-white rounded-full gap-3 ml-7 p-2 w-fit h-fit">
|
||||
<Icon icon="material-symbols:lock" className="text-[#c03724]" />
|
||||
<p className="text-[#c03724]">Login</p>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavbarKaltara;
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
"use client";
|
||||
import { Link } from "@/i18n/routing";
|
||||
import { getHeroData, listCarousel } from "@/service/landing/landing";
|
||||
import { formatDateToIndonesian, textEllipsis } from "@/utils/globals";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Icon } from "@/components/ui/icon";
|
||||
|
||||
export default function NewsTickerKaltara() {
|
||||
const [article, setArticle] = useState<any>([]);
|
||||
const [currentNewsIndex, setCurrentNewsIndex] = useState(0);
|
||||
const [animate, setAnimate] = useState(false);
|
||||
const [tanggal, setTanggal] = useState("");
|
||||
const t = useTranslations("LandingPage");
|
||||
|
||||
useEffect(() => {
|
||||
const options: Intl.DateTimeFormatOptions = {
|
||||
weekday: "long",
|
||||
day: "2-digit",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
};
|
||||
const today = new Date().toLocaleDateString("id-ID", options);
|
||||
setTanggal(today);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
async function getArticle() {
|
||||
const response = await getHeroData();
|
||||
setArticle(response?.data?.data?.content);
|
||||
}
|
||||
getArticle();
|
||||
}, []);
|
||||
|
||||
const triggerAnimation = (newIndex: number) => {
|
||||
setAnimate(true);
|
||||
setTimeout(() => {
|
||||
setCurrentNewsIndex(newIndex);
|
||||
setAnimate(false);
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const handlePrev = () => {
|
||||
const newIndex = (currentNewsIndex - 1 + article.length) % article.length;
|
||||
triggerAnimation(newIndex);
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
const newIndex = (currentNewsIndex + 1) % article.length;
|
||||
triggerAnimation(newIndex);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
triggerAnimation((currentNewsIndex + 1) % article.length);
|
||||
}, 7000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [article?.length]);
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-0 z-50 flex flex-row h-[60px] gap-3 w-full justify-between dark:bg-stone-800 bg-[#bb3523]">
|
||||
<div className="relative px-4 py-2 text-xs lg:text-sm flex items-center bg-[#bb3523] text-white w-[30%] lg:w-[300px]">
|
||||
<span className="mr-2"></span> {tanggal}
|
||||
<div className="absolute right-0 top-0 h-full w-4 bg-[#bb3523] transform translate-x-full clip-path-triangle"></div>
|
||||
</div>
|
||||
<div className="text-sm lg:text-base w-full lg:w-[200px] text-white font-semibold ml-5 flex items-center">{t("breakingNews")} :</div>
|
||||
<div className={`w-full px-5 py-1 flex flex-col gap-1 transition-transform duration-300 ${animate ? "opacity-0 translate-y-5" : "opacity-100 translate-y-0"}`}>
|
||||
<Link href={`news/detail/${article[currentNewsIndex]?.id}`} className="hidden lg:block">
|
||||
<p className="text-sm text-white lg:text-base">{article[currentNewsIndex]?.title}</p>
|
||||
</Link>
|
||||
<Link href={`news/detail/${article[currentNewsIndex]?.id}`} className="lg:hidden">
|
||||
<p className="text-sm text-white lg:text-base">{textEllipsis(article[currentNewsIndex]?.title, 28)}</p>
|
||||
</Link>
|
||||
<p className="text-xs">{formatDateToIndonesian(article[currentNewsIndex]?.createdAt)}</p>
|
||||
</div>
|
||||
<div className="flex flex-row text-white h-full gap-[1px]">
|
||||
<a className="bg-[#bb3523] h-full flex items-center" onClick={() => handlePrev()}>
|
||||
<Icon icon="ic:twotone-arrow-left" fontSize={30} />
|
||||
</a>
|
||||
<a className="bg-[#bb3523] h-full flex items-center" onClick={() => handleNext()}>
|
||||
<Icon icon="ic:twotone-arrow-right" fontSize={30} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
"use client";
|
||||
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { getHeroData } from "@/service/landing/landing";
|
||||
import { formatDateToIndonesian } from "@/utils/globals";
|
||||
import Image from "next/image";
|
||||
import { useParams } from "next/navigation";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
const PopularNews = () => {
|
||||
const [isLoading, setIsLoading] = useState<any>(true);
|
||||
const params = useParams();
|
||||
const locale = params?.locale;
|
||||
const [heroData, setHeroData] = useState<any>();
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
}, 3000);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchCategories() {
|
||||
const url = "https://netidhub.com/api/csrf";
|
||||
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return data; // Menampilkan data yang diterima dari API
|
||||
} catch (error) {
|
||||
console.error("Fetch error: ", error);
|
||||
}
|
||||
}
|
||||
|
||||
fetchCategories();
|
||||
initFetch();
|
||||
}, []);
|
||||
|
||||
const initFetch = async () => {
|
||||
const response = await getHeroData();
|
||||
console.log(response);
|
||||
setHeroData(response?.data?.data?.content);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="my-5 px-4 lg:px-28 gap-3">
|
||||
<div className="bg-[#c03724] rounded-md p-3 w-fit">
|
||||
<p className="text-white font-semibold">Berita Terpopuler</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-11 w-auto">
|
||||
{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" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-full lg:w-2/3 lg:h-full">
|
||||
{heroData?.length > 0 && (
|
||||
<div className="flex flex-col gap-3">
|
||||
<Image src={heroData[0]?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full lg:w-[950px] h-[310px] lg:h-[420px] rounded-sm object-cover" />{" "}
|
||||
<h1 className="font-bold text-xl">{heroData[0]?.title}</h1>
|
||||
<div className="flex flex-row gap-3">
|
||||
<p className="text-[#c03724] text-xs">{heroData[0]?.categoryName}</p>
|
||||
<p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
|
||||
{formatDateToIndonesian(new Date(heroData[0]?.createdAt))} {heroData[0]?.timezone ? heroData[0]?.timezone : "WIB"}|{" "}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
|
||||
/>
|
||||
</svg>{" "}
|
||||
{heroData[0]?.clickCount}{" "}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-light text-justify hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae eum consectetur cum placeat non aperiam suscipit libero ipsa commodi. Quam dicta eligendi voluptate, ab sunt ratione accusamus esse animi vel libero
|
||||
veniam nulla tenetur ipsum provident minus. Error ad eligendi quasi autem neque ex, iste perspiciatis magnam. Magni, quos sequi. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit rem veniam doloribus saepe
|
||||
atque quia ut quaerat fugit harum. Velit quia quisquam consectetur blanditiis porro itaque perferendis. Voluptatibus fuga ipsam maxime, hic doloribus inventore, odio eos molestiae velit cum placeat! Est nostrum quas
|
||||
veritatis deserunt itaque illum alias. Assumenda deleniti similique id.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-4 max-w-sm mx-auto mb-3">
|
||||
<Skeleton className="h-[73px] w-16 rounded-md" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="items-center hidden md:block gap-4 max-w-sm mx-auto mb-3 lg:flex">
|
||||
<Skeleton className="h-[73px] w-16 rounded-md" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
|
||||
<Skeleton className="h-[73px] w-16 rounded-md" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
|
||||
<Skeleton className="h-[73px] w-16 rounded-md" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto lg:flex">
|
||||
<Skeleton className="h-[73px] w-16 rounded-md" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="py-4 lg:py-0 flex flex-col gap-4 flex-nowrap w-[95vw] lg:w-auto overflow-x-auto">
|
||||
{heroData?.map((item: any) => (
|
||||
<div className="flex gap-3 flex-col lg:w-full">
|
||||
{/* <div className="flex-shrink-0 rounded-lg">
|
||||
<Image width={720} height={480} src={item?.thumbnailLink} alt="" className="w-full h-[105px] object-cover rounded-sm" />
|
||||
</div> */}
|
||||
<div className="w-[280px] lg:w-auto flex flex-col">
|
||||
<h3 className="font-bold text-lg">{item?.title}</h3>
|
||||
<div className="flex flex-row gap-5">
|
||||
<p className="text-[#c03724] text-sm">{item?.categoryName}</p>
|
||||
<p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
|
||||
{formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
|
||||
/>
|
||||
</svg>{" "}
|
||||
{item?.clickCount}{" "}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PopularNews;
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
"use client";
|
||||
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { getHeroData } from "@/service/landing/landing";
|
||||
import { formatDateToIndonesian } from "@/utils/globals";
|
||||
import Image from "next/image";
|
||||
import { useParams } from "next/navigation";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
const RegionalNews = () => {
|
||||
const [isLoading, setIsLoading] = useState<any>(true);
|
||||
const params = useParams();
|
||||
const locale = params?.locale;
|
||||
const [heroData, setHeroData] = useState<any>();
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
}, 3000);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchCategories() {
|
||||
const url = "https://netidhub.com/api/csrf";
|
||||
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return data; // Menampilkan data yang diterima dari API
|
||||
} catch (error) {
|
||||
console.error("Fetch error: ", error);
|
||||
}
|
||||
}
|
||||
|
||||
fetchCategories();
|
||||
initFetch();
|
||||
}, []);
|
||||
|
||||
const initFetch = async () => {
|
||||
const response = await getHeroData();
|
||||
console.log(response);
|
||||
setHeroData(response?.data?.data?.content);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="my-5 px-4 lg:px-28 gap-3">
|
||||
<div className="bg-[#c03724] rounded-md p-3 w-fit">
|
||||
<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-11 w-auto">
|
||||
{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" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-full lg:w-2/3 lg:h-full">
|
||||
{heroData?.length > 0 && (
|
||||
<div className="flex flex-col gap-3">
|
||||
<Image src={heroData[0]?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full lg:w-[950px] h-[310px] lg:h-[420px] rounded-sm object-cover" />{" "}
|
||||
<h1 className="font-bold text-xl">{heroData[0]?.title}</h1>
|
||||
<div className="flex flex-row gap-3">
|
||||
<p className="text-[#c03724] text-xs">{heroData[0]?.categoryName}</p>
|
||||
<p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
|
||||
{formatDateToIndonesian(new Date(heroData[0]?.createdAt))} {heroData[0]?.timezone ? heroData[0]?.timezone : "WIB"}|{" "}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
|
||||
/>
|
||||
</svg>{" "}
|
||||
{heroData[0]?.clickCount}{" "}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-light text-justify hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae eum consectetur cum placeat non aperiam suscipit libero ipsa commodi. Quam dicta eligendi voluptate, ab sunt ratione accusamus esse animi vel libero
|
||||
veniam nulla tenetur ipsum provident minus. Error ad eligendi quasi autem neque ex, iste perspiciatis magnam. Magni, quos sequi. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit rem veniam doloribus saepe
|
||||
atque quia ut quaerat fugit harum. Velit quia quisquam consectetur blanditiis porro itaque perferendis. Voluptatibus fuga ipsam maxime, hic doloribus inventore, odio eos molestiae velit cum placeat! Est nostrum quas
|
||||
veritatis deserunt itaque illum alias. Assumenda deleniti similique id.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-4 max-w-sm mx-auto mb-3">
|
||||
<Skeleton className="h-[73px] w-16 rounded-md" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="items-center hidden md:block gap-4 max-w-sm mx-auto mb-3 lg:flex">
|
||||
<Skeleton className="h-[73px] w-16 rounded-md" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
|
||||
<Skeleton className="h-[73px] w-16 rounded-md" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
|
||||
<Skeleton className="h-[73px] w-16 rounded-md" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto lg:flex">
|
||||
<Skeleton className="h-[73px] w-16 rounded-md" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="py-4 lg:py-0 flex flex-col gap-4 flex-nowrap w-[95vw] lg:w-auto overflow-x-auto">
|
||||
{heroData?.map((item: any) => (
|
||||
<div className="flex gap-3 flex-col lg:w-full">
|
||||
{/* <div className="flex-shrink-0 rounded-lg">
|
||||
<Image width={720} height={480} src={item?.thumbnailLink} alt="" className="w-full h-[105px] object-cover rounded-sm" />
|
||||
</div> */}
|
||||
<div className="w-[280px] lg:w-auto flex flex-col">
|
||||
<h3 className="font-bold text-lg">{item?.title}</h3>
|
||||
<div className="flex flex-row gap-5">
|
||||
<p className="text-[#c03724] text-sm">{item?.categoryName}</p>
|
||||
<p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
|
||||
{formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
|
||||
/>
|
||||
</svg>{" "}
|
||||
{item?.clickCount}{" "}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default RegionalNews;
|
||||
|
|
@ -0,0 +1,219 @@
|
|||
import React, { useState } from "react";
|
||||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import Image from "next/image";
|
||||
import { Icon } from "@/components/ui/icon";
|
||||
import { Link } from "@/i18n/routing";
|
||||
|
||||
const SocialMedia = () => {
|
||||
const [selectedTab, setSelectedTab] = useState("x");
|
||||
|
||||
return (
|
||||
<div className="px-4 lg:px-28 mt-5">
|
||||
<div className="bg-[#c03724] rounded-md p-3 w-fit text-white">Media Sosial</div>
|
||||
<div className="mx-auto w-full max-w-7xl 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
|
||||
value="x"
|
||||
className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
|
||||
>
|
||||
X{" "}
|
||||
</TabsTrigger>
|
||||
<div className="text-[#bb3523] text-lg hidden md:inline-block">|</div>
|
||||
<TabsTrigger
|
||||
value="instagram"
|
||||
className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
|
||||
>
|
||||
Instagram
|
||||
</TabsTrigger>
|
||||
<div className="text-[#bb3523] text-lg hidden md:inline-block">|</div>
|
||||
<TabsTrigger
|
||||
value="facebook"
|
||||
className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
|
||||
>
|
||||
Facebook
|
||||
</TabsTrigger>
|
||||
<div className="text-[#bb3523] text-lg hidden md:inline-block">|</div>
|
||||
<TabsTrigger
|
||||
value="tiktok"
|
||||
className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
|
||||
>
|
||||
Tiktok
|
||||
</TabsTrigger>
|
||||
<div className="text-[#bb3523] text-lg hidden md:inline-block">|</div>
|
||||
<TabsTrigger
|
||||
value="youtube"
|
||||
className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
|
||||
>
|
||||
Youtube
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
</div>
|
||||
<div className="flex flex-col lg:flex-row px-0 lg:px-10">
|
||||
{selectedTab == "x" ? (
|
||||
<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">
|
||||
{" "}
|
||||
<Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex flex-row gap-2">
|
||||
<p className="font-bold">Humas_PoldaKaltara</p>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
|
||||
<path
|
||||
fill="#53b0ff"
|
||||
d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-slate-500 text-sm">@HumasKaltara</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col w-full px-3">
|
||||
<div className="my-3">
|
||||
<p className="text-sm text-justify">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et dolor ut
|
||||
ullam tempora deserunt dolore consequatur!
|
||||
</p>
|
||||
<Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : selectedTab == "instagram" ? (
|
||||
<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">
|
||||
{" "}
|
||||
<Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex flex-row gap-2">
|
||||
<p className="font-bold">TBNews Mabes Polri</p>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
|
||||
<path
|
||||
fill="#53b0ff"
|
||||
d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-slate-500 text-sm">@TBNewsMabes</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col w-full px-3">
|
||||
<div className="my-3">
|
||||
<p className="text-sm text-justify">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et dolor ut
|
||||
ullam tempora deserunt dolore consequatur!
|
||||
</p>
|
||||
<Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : selectedTab == "facebook" ? (
|
||||
<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">
|
||||
{" "}
|
||||
<Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex flex-row gap-2">
|
||||
<p className="font-bold">TBNews Mabes Polri</p>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
|
||||
<path
|
||||
fill="#53b0ff"
|
||||
d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-slate-500 text-sm">@TBNewsMabes</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col w-full px-3">
|
||||
<div className="my-3">
|
||||
<p className="text-sm text-justify">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et dolor ut
|
||||
ullam tempora deserunt dolore consequatur!
|
||||
</p>
|
||||
<Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : selectedTab == "tiktok" ? (
|
||||
<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">
|
||||
{" "}
|
||||
<Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex flex-row gap-2">
|
||||
<p className="font-bold">TBNews Mabes Polri</p>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
|
||||
<path
|
||||
fill="#53b0ff"
|
||||
d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-slate-500 text-sm">@TBNewsMabes</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col w-full px-3">
|
||||
<div className="my-3">
|
||||
<p className="text-sm text-justify">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et dolor ut
|
||||
ullam tempora deserunt dolore consequatur!
|
||||
</p>
|
||||
<Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : selectedTab == "youtube" ? (
|
||||
<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">
|
||||
{" "}
|
||||
<Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex flex-row gap-2">
|
||||
<p className="font-bold">TBNews Mabes Polri</p>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
|
||||
<path
|
||||
fill="#53b0ff"
|
||||
d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-slate-500 text-sm">@TBNewsMabes</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col w-full px-3">
|
||||
<div className="my-3">
|
||||
<p className="text-sm text-justify">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et dolor ut
|
||||
ullam tempora deserunt dolore consequatur!
|
||||
</p>
|
||||
<Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="flex items-center justify-center">
|
||||
<Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center flex-row justify-center">
|
||||
<Link href="#" className="border text-[#bb3523] rounded-lg text-sm lg:text-md px-4 py-1 border-[#bb3523]">
|
||||
Lihat Semua
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SocialMedia;
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import NavbarKaltara from "./components/navbar-kaltara";
|
||||
import HeroKaltara from "./components/hero-kaltara";
|
||||
import LatestNews from "./components/latest-news";
|
||||
import PopularNews from "./components/popular-news";
|
||||
import NationalNews from "./components/national-news";
|
||||
import RegionalNews from "./components/regional-news";
|
||||
import ContactUs from "./components/contact-us";
|
||||
import SocialMedia from "./components/social-media";
|
||||
import NewsTickerKaltara from "./components/news-tickers-kaltara";
|
||||
|
||||
const PoldaKaltara = () => {
|
||||
return (
|
||||
<div>
|
||||
<NavbarKaltara />
|
||||
<HeroKaltara />
|
||||
<LatestNews />
|
||||
<PopularNews />
|
||||
<SocialMedia />
|
||||
<NationalNews />
|
||||
<RegionalNews />
|
||||
<ContactUs />
|
||||
<NewsTickerKaltara />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PoldaKaltara;
|
||||
|
|
@ -22,6 +22,7 @@ import { Skeleton } from "@/components/ui/skeleton";
|
|||
import { useTranslations } from "next-intl";
|
||||
import Image from "next/image";
|
||||
|
||||
|
||||
interface Size {
|
||||
label: string;
|
||||
value: string;
|
||||
|
|
@ -60,6 +61,10 @@ const DetailInfo = () => {
|
|||
const [visibleInput, setVisibleInput] = useState(null);
|
||||
let typeString = "image";
|
||||
const t = useTranslations("LandingPage");
|
||||
const poldaName = params?.polda_name;
|
||||
const satkerName = params?.satker_name;
|
||||
|
||||
let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/";
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
|||
|
|
@ -79,7 +79,9 @@ const Coverage: React.FC = () => {
|
|||
{/* <h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">
|
||||
Liputan <span className="text-[#bb3523]">Wilayah</span>
|
||||
</h2> */}
|
||||
|
||||
<div className="h-1 w-48 bg-[#bb3523] mx-auto mb-6 rounded"></div>
|
||||
|
||||
{/* Pencarian */}
|
||||
<div className="flex items-center justify-center gap-4 mb-6">
|
||||
<input onChange={(e) => setSearchTerm(e.target.value)} type="text" placeholder={t("search")} className="w-4/5 px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#bb3523] focus:outline-none" />
|
||||
|
|
@ -88,12 +90,19 @@ const Coverage: React.FC = () => {
|
|||
<Icon icon="ri:arrow-right-s-line" fontSize={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Grid Wilayah */}
|
||||
<div className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-9 gap-6">
|
||||
<div className="flex flex-col items-center text-center group">
|
||||
<Link href="/polda/polda-kaltara" className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
|
||||
<img src="/assets/polda/polda-kalut.png" alt="polda-kaltara" className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
|
||||
</Link>
|
||||
<p className="text-md font-semibold">Polda Kalimantan Utara</p>
|
||||
</div>
|
||||
{filteredList && filteredList.length > 0 ? (
|
||||
filteredList.map((region, index) =>
|
||||
!seeAllValue ? (
|
||||
index < 9 ? (
|
||||
index < 8 ? (
|
||||
<Link href={`/polda/${region.slug}`} key={index} className="flex flex-col items-center text-center group">
|
||||
<div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
|
||||
<img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
|
||||
|
|
@ -116,7 +125,8 @@ const Coverage: React.FC = () => {
|
|||
<p className="text-center text-[#bb3523] font-semibold">{t("notFound")}</p>
|
||||
)}
|
||||
</div>
|
||||
{filteredList && filteredList.length > 9 && (
|
||||
|
||||
{filteredList && filteredList.length > 8 && (
|
||||
<div className="flex justify-center py-5">
|
||||
<Button onClick={() => setSeeAllValue(!seeAllValue)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
|
||||
{seeAllValue ? t("seeLess") : t("seeMore")}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,24 @@
|
|||
"use client";
|
||||
import { listData } from "@/service/landing/landing";
|
||||
import { useParams, usePathname, useRouter } from "next/navigation";
|
||||
import { useParams } from "next/navigation";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
|
||||
import { Link } from "@/i18n/routing";
|
||||
import { formatDateToIndonesian, getPublicLocaleTimestamp, textEllipsis } from "@/utils/globals";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
|
||||
import Image from "next/image";
|
||||
import { useRouter } from "@/i18n/routing";
|
||||
|
||||
const HeaderBanner = () => {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const poldaName: any = params?.polda_name;
|
||||
const asPath: any = usePathname();
|
||||
const [content, setContent] = useState([]);
|
||||
const [isBannerLoading, setIsBannerLoading] = useState(true);
|
||||
const [centerPadding, setCenterPadding] = useState<any>();
|
||||
const satkerName = params?.satker_name;
|
||||
|
||||
let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/";
|
||||
|
||||
useEffect(() => {
|
||||
// async function initState() {
|
||||
|
|
@ -89,19 +91,9 @@ const HeaderBanner = () => {
|
|||
<Image src={row?.thumbnailLink} alt="" width={1920} height={1080} className="w-full h-[310px] lg:h-full rounded-lg object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
|
||||
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{row?.categoryName}</span>
|
||||
<Link
|
||||
href={
|
||||
Number(row.fileType?.id) == 1
|
||||
? `${asPath.includes("/polda/") == true ? asPath : ""}/image/detail/${row.slug}`
|
||||
: Number(row.fileType?.id) == 2
|
||||
? `/video/detail/${row.slug}`
|
||||
: Number(row.fileType?.id) == 3
|
||||
? `/document/detail/${row.slug}`
|
||||
: `/audio/detail/${row.slug}`
|
||||
}
|
||||
>
|
||||
<div onClick={() => router.push(prefixPath + `/image/detail/${row?.slug}`)} className="cursor-pointer">
|
||||
<h3>{row.title}</h3>
|
||||
</Link>
|
||||
</div>
|
||||
<p className="text-xs flex flex-row items-center gap-1 mt-1 text-white">
|
||||
{getPublicLocaleTimestamp(new Date(row?.createdAt))} WIB {" | "}
|
||||
<Icon icon="formkit:eye" width="15" height="15" /> {row?.clickCount}
|
||||
|
|
@ -165,19 +157,9 @@ const HeaderBanner = () => {
|
|||
</div>
|
||||
<div className="w-[280px] lg:w-auto">
|
||||
<span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg flex text-[8px] font-bold uppercase w-fit">{item?.categoryName}</span>
|
||||
<Link
|
||||
href={
|
||||
Number(item?.fileType?.id) == 1
|
||||
? `${asPath.includes("/polda/") == true ? asPath : ""}/image/detail/${item?.slug}`
|
||||
: Number(item?.fileType?.id) == 2
|
||||
? `/video/detail/${item?.slug}`
|
||||
: Number(item?.fileType?.id) == 3
|
||||
? `/document/detail/${item?.slug}`
|
||||
: `/audio/detail/${item?.slug}`
|
||||
}
|
||||
>
|
||||
<div onClick={() => router.push(prefixPath + `/image/detail/${item?.slug}`)} className="cursor-pointer">
|
||||
<h3 className="text-base font-bold mt-2">{textEllipsis(item?.title, 30)}</h3>
|
||||
</Link>
|
||||
</div>
|
||||
<p className="text-[10px] flex flex-row items-center gap-1 text-gray-500 mt-1">
|
||||
{formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"} |{" "}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
|
||||
|
|
|
|||
|
|
@ -46,11 +46,13 @@ const Hero: React.FC = () => {
|
|||
fetchCategories();
|
||||
initFetch();
|
||||
}, []);
|
||||
|
||||
const initFetch = async () => {
|
||||
const response = await getHeroData();
|
||||
console.log(response);
|
||||
setHeroData(response?.data?.data?.content);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20 py-4 mx-auto w-auto mt-6">
|
||||
{/* Section Gambar Utama */}
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
|
||||
import { useParams, usePathname, useRouter } from "next/navigation";
|
||||
import { useParams, usePathname } from "next/navigation";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { formatDateToIndonesian, secondToTimes } from "@/utils/globals";
|
||||
import { getListContent } from "@/service/landing/landing";
|
||||
import { Link } from "@/i18n/routing";
|
||||
import { Link, useRouter } from "@/i18n/routing";
|
||||
import { Reveal } from "./Reveal";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Skeleton } from "../ui/skeleton";
|
||||
|
|
@ -25,6 +25,8 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
const satkerName = params?.satker_name;
|
||||
const t = useTranslations("LandingPage");
|
||||
|
||||
let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/";
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
|
|
@ -117,7 +119,7 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
<CarouselContent>
|
||||
{newContent?.map((image: any) => (
|
||||
<CarouselItem key={image?.id} className="md:basis-1/2 lg:basis-1/3">
|
||||
<Link href={`/image/detail/${image?.slug}`} className="relative group overflow-hidden shadow-md hover:shadow-lg">
|
||||
<div onClick={() => router.push(prefixPath + `/image/detail/${image?.slug}`)} className="cursor-pointer relative group overflow-hidden shadow-md hover:shadow-lg">
|
||||
<Image width={2560} height={1440} alt="image" src={image?.thumbnailLink} className="w-full rounded-lg h-48 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
|
||||
<p className="text-sm lg:text-base mb-2 font-semibold h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{image?.title}</p>
|
||||
|
|
@ -125,7 +127,7 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
{formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {image.clickCount}{" "}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
|
|
@ -144,7 +146,7 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
{newContent?.map((audio: any) => (
|
||||
<CarouselItem key={audio?.id} className="md:basis-1/2 lg:basis-1/3">
|
||||
<div className="flex flex-row gap-6">
|
||||
<Link href={`/audio/detail/${audio?.slug}`} className="flex flex-col sm:flex-row items-center bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
|
||||
<div onClick={() => router.push(prefixPath + `/audio/detail/${audio?.slug}`)} className="cursor-pointer flex flex-col sm:flex-row items-center bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 gap-4 w-full">
|
||||
<div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-24 h-8 lg:h-16">
|
||||
<svg width="32" height="34" viewBox="0 0 32 34" fill="null" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
|
|
@ -162,7 +164,7 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
<div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{audio?.title}</div>
|
||||
<p className="text-sm"> {audio?.duration ? secondToTimes(Number(audio?.duration)) : "00:00:00"}</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
|
|
@ -181,7 +183,7 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
<CarouselContent>
|
||||
{newContent?.map((video: any) => (
|
||||
<CarouselItem key={video?.id} className="md:basis-1/2 lg:basis-1/3">
|
||||
<Link href={`/video/detail/${video?.slug}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
|
||||
<div onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
|
||||
<Image alt="video" width={2560} height={1440} src={video?.thumbnailLink} className="w-full h-40 lg:h-60 object-cover rounded-lg group-hover:scale-100 transition-transform duration-300" />
|
||||
<div className="absolute bottom-0 rounded-lg left-0 right-0 border-l-4 border-[#bb3523] bg-gray-600 text-white p-2">
|
||||
<p className="text-sm lg:text-base mb-2 font-semibold h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{video?.title}</p>
|
||||
|
|
@ -189,7 +191,7 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
{formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" /> {video?.clickCount}{" "}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
|
|
@ -207,7 +209,7 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
{newContent?.map((text: any) => (
|
||||
<CarouselItem key={text?.id} className="md:basis-1/2 lg:basis-1/3">
|
||||
<div className="md:basis-1/2 lg:basis-1/3">
|
||||
<Link href={`/document/detail/${text?.slug}`} className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4">
|
||||
<div onClick={() => router.push(prefixPath + `/document/detail/${text?.slug}`)} className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4">
|
||||
<div className="flex items-center justify-center rounded-lg w-16 h-2 lg:h-16">
|
||||
<svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
|
|
@ -232,7 +234,7 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
Download {t("document")}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
|
|
@ -249,9 +251,9 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
)}
|
||||
</div>
|
||||
<div className="flex items-center flex-row justify-center">
|
||||
<Link href={`/${selectedTab}/filter?sortBy=${props.type}`} className="border text-[#bb3523] rounded-lg text-sm lg:text-md px-4 py-1 border-[#bb3523]">
|
||||
<div onClick={() => router.push(prefixPath + `/${selectedTab}/filter?sortBy=${props.type}`)} className="cursor-pointer border text-[#bb3523] rounded-lg text-sm lg:text-md px-4 py-1 border-[#bb3523]">
|
||||
{t("seeAll")}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
|
|||
import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Input } from "../ui/input";
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
|
||||
const WelcomePolda = () => {
|
||||
const router = useRouter();
|
||||
|
|
@ -13,6 +13,8 @@ const WelcomePolda = () => {
|
|||
const poldaName: any = params?.polda_name;
|
||||
const [categorySelect, setCategorySelect] = useState("0");
|
||||
const t = useTranslations("LandingPage");
|
||||
const [contentType, setContentType] = useState("all");
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
function initState() {
|
||||
|
|
@ -35,9 +37,9 @@ const WelcomePolda = () => {
|
|||
</p>
|
||||
|
||||
{/* Search Form */}
|
||||
<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"> */}
|
||||
{/* Dropdown */}
|
||||
<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">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<a className="text-black dark:text-white flex flex-row justify-center items-center ml-5 cursor-pointer">
|
||||
|
|
@ -91,11 +93,48 @@ const WelcomePolda = () => {
|
|||
</span>
|
||||
<Input type="text" placeholder={t("search")} className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none" />
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* Button */}
|
||||
<button className="flex justify-center items-center px-6 w-full lg:w-[20%] py-2 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700">
|
||||
{/* <button className="flex justify-center items-center px-6 w-full lg:w-[20%] py-2 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700">
|
||||
{t("searchCoverage")} <Icon icon="ri:arrow-right-s-line" fontSize={20} />
|
||||
</button> */}
|
||||
{/* </div> */}
|
||||
|
||||
<div className="mt-6 flex flex-col md:flex-row justify-center gap-4">
|
||||
{/* Dropdown */}
|
||||
<div className="flex flex-row items-center w-full rounded-lg gap-2 overflow-hidden">
|
||||
<Select value={contentType} onValueChange={setContentType}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="all">{t("allContent")}</SelectItem>
|
||||
<SelectItem value="image">{t("image")}</SelectItem>
|
||||
<SelectItem value="video">{t("video")}</SelectItem>
|
||||
<SelectItem value="document">{t("text")}</SelectItem>
|
||||
<SelectItem value="audio">{t("audio")}</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<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">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
||||
<path
|
||||
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"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input type="text" placeholder={t("search")} className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none" onChange={(e) => setSearch(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search Input */}
|
||||
<button onClick={() => router.push(`/${contentType}/filter?title=${search}`)} className="flex justify-center items-center px-6 w-full lg:w-[20%] py-2 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700">
|
||||
{t("searchCoverage")}
|
||||
<Icon icon="ri:arrow-right-s-line" fontSize={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
|
|||
import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
|
||||
const WelcomeSatker = () => {
|
||||
const router = useRouter();
|
||||
|
|
@ -14,6 +15,8 @@ const WelcomeSatker = () => {
|
|||
const satkerName: any = params?.satker_name;
|
||||
const [categorySelect, setCategorySelect] = useState("0");
|
||||
const t = useTranslations("LandingPage");
|
||||
const [contentType, setContentType] = useState("all");
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
function initState() {
|
||||
|
|
@ -36,9 +39,9 @@ const WelcomeSatker = () => {
|
|||
</p>
|
||||
|
||||
{/* Search Form */}
|
||||
<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"> */}
|
||||
{/* Dropdown */}
|
||||
<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">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<a className="text-black dark:text-white flex flex-row justify-center items-center ml-5 cursor-pointer">
|
||||
|
|
@ -92,11 +95,48 @@ const WelcomeSatker = () => {
|
|||
</span>
|
||||
<input type="text" placeholder={t("search")} className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none" />
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* Button */}
|
||||
<button className="flex justify-center items-center px-6 w-full lg:w-[20%] py-2 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700">
|
||||
{/* <button className="flex justify-center items-center px-6 w-full lg:w-[20%] py-2 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700">
|
||||
{t("searchCoverage")} <Icon icon="ri:arrow-right-s-line" fontSize={20} />
|
||||
</button> */}
|
||||
{/* </div> */}
|
||||
|
||||
<div className="mt-6 flex flex-col md:flex-row justify-center gap-4">
|
||||
{/* Dropdown */}
|
||||
<div className="flex flex-row items-center w-full rounded-lg gap-2 overflow-hidden">
|
||||
<Select value={contentType} onValueChange={setContentType}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="all">{t("allContent")}</SelectItem>
|
||||
<SelectItem value="image">{t("image")}</SelectItem>
|
||||
<SelectItem value="video">{t("video")}</SelectItem>
|
||||
<SelectItem value="document">{t("text")}</SelectItem>
|
||||
<SelectItem value="audio">{t("audio")}</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<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">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
||||
<path
|
||||
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"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input type="text" placeholder={t("search")} className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none" onChange={(e) => setSearch(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search Input */}
|
||||
<button onClick={() => router.push(`/${contentType}/filter?title=${search}`)} className="flex justify-center items-center px-6 w-full lg:w-[20%] py-2 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700">
|
||||
{t("searchCoverage")}
|
||||
<Icon icon="ri:arrow-right-s-line" fontSize={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Loading…
Reference in New Issue