update polda-kaltara
This commit is contained in:
parent
fc87dd7211
commit
dfa47788b7
|
|
@ -0,0 +1,169 @@
|
|||
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-16 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 items-center space-x-4">
|
||||
<Image src="/assets/img/logo-bawah.png" alt="" width={300} height={200} className="" />
|
||||
</div>
|
||||
|
||||
{/* Contact Us */}
|
||||
<div className="mt-8 md:mt-0">
|
||||
<h2 className="text-lg font-bold">Kontak Kami</h2>
|
||||
<hr className="border-t-2 border-dotted border-black 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>
|
||||
Jl Trunojoyo No.3, RT.2/RW.1, Selong, Kec. Kebayoran Baru, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12110, Indonesia
|
||||
</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">Tautan</h2>
|
||||
<hr className="border-t-2 border-dotted border-black my-2" />
|
||||
<div className="flex flex-row justify-between gap-16">
|
||||
<div className="flex flex-col">
|
||||
<p 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>
|
||||
Polri.go.id
|
||||
</p>
|
||||
<p 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>
|
||||
TBNews
|
||||
</p>
|
||||
<p 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>
|
||||
Hum Polri
|
||||
</p>
|
||||
<p 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>
|
||||
MediaHub
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<p className="flex items-center 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>
|
||||
Satu Data
|
||||
</p>
|
||||
<p 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>
|
||||
PUSIKNAS
|
||||
</p>
|
||||
<p 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>
|
||||
SPIT
|
||||
</p>
|
||||
<p 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>
|
||||
POLRI TV
|
||||
</p>
|
||||
</div>
|
||||
</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-5">
|
||||
{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 truncate">
|
||||
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-24 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 truncate">
|
||||
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-24 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 truncate">
|
||||
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,69 @@
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { Icon } from "@/components/ui/icon";
|
||||
import { Link } from "@/i18n/routing";
|
||||
import Image from "next/image";
|
||||
import React 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: "/mediahub",
|
||||
};
|
||||
|
||||
const NavbarKaltara = () => {
|
||||
return (
|
||||
<div className="bg-[#c03724] py-4 px-4 lg:px-20 flex justify-between items-center">
|
||||
<div className="flex flex-row items-center">
|
||||
<Image width={2560} height={1440} src="/assets/img/logo-tbnews-kaltara.png" alt="image" className="h-28 w-72" />
|
||||
<div className="text-white font-semibold 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="flex justify-center items-center bg-white rounded-lg gap-3 ml-7 p-3 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,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-24 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 truncate">
|
||||
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-24 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 truncate">
|
||||
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,27 @@
|
|||
"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";
|
||||
|
||||
const PoldaKaltara = () => {
|
||||
return (
|
||||
<div>
|
||||
<NavbarKaltara />
|
||||
<HeroKaltara />
|
||||
<LatestNews />
|
||||
<PopularNews />
|
||||
{/* sosmed */}
|
||||
<NationalNews />
|
||||
<RegionalNews />
|
||||
<ContactUs />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PoldaKaltara;
|
||||
|
|
@ -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")}
|
||||
|
|
|
|||
|
|
@ -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 */}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
{/* Dropdown */}
|
||||
<div className="flex flex-row items-center w-full rounded-lg gap-2 overflow-hidden">
|
||||
{/* <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">
|
||||
<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> */}
|
||||
|
||||
{/* 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">
|
||||
{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>
|
||||
|
||||
{/* 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">
|
||||
{t("searchCoverage")} <Icon icon="ri:arrow-right-s-line" fontSize={20} />
|
||||
{/* 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">
|
||||
{/* Dropdown */}
|
||||
<div className="flex flex-row items-center w-full rounded-lg gap-2 overflow-hidden">
|
||||
{/* <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">
|
||||
<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> */}
|
||||
|
||||
{/* 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">
|
||||
{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>
|
||||
|
||||
{/* 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">
|
||||
{t("searchCoverage")} <Icon icon="ri:arrow-right-s-line" fontSize={20} />
|
||||
{/* 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: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Loading…
Reference in New Issue