feat: add polda-kaltara section
This commit is contained in:
parent
b792ada160
commit
91a1b9d84c
|
|
@ -1,26 +1,28 @@
|
|||
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-16 mt-10">
|
||||
<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 items-center space-x-4">
|
||||
<Image src="/assets/img/logo-bawah.png" alt="" width={300} height={200} className="" />
|
||||
<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">
|
||||
<h2 className="text-lg font-bold">Kontak Kami</h2>
|
||||
<hr className="border-t-2 border-dotted border-black my-2" />
|
||||
<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>
|
||||
Jl Trunojoyo No.3, RT.2/RW.1, Selong, Kec. Kebayoran Baru, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12110, Indonesia
|
||||
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">
|
||||
|
|
@ -56,85 +58,45 @@ const ContactUs = () => {
|
|||
|
||||
{/* 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>
|
||||
<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>
|
||||
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ const HeroKaltara = () => {
|
|||
};
|
||||
|
||||
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">
|
||||
<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" />
|
||||
|
|
@ -78,7 +78,7 @@ const HeroKaltara = () => {
|
|||
{heroData[0]?.clickCount}{" "}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-light text-justify truncate">
|
||||
<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
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ const LatestNews = () => {
|
|||
<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">
|
||||
<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" />
|
||||
|
|
@ -84,7 +84,7 @@ const LatestNews = () => {
|
|||
{heroData[0]?.clickCount}{" "}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-light text-justify truncate">
|
||||
<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
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ const NationalNews = () => {
|
|||
<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">
|
||||
<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" />
|
||||
|
|
@ -84,7 +84,7 @@ const NationalNews = () => {
|
|||
{heroData[0]?.clickCount}{" "}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-light text-justify truncate">
|
||||
<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
|
||||
|
|
|
|||
|
|
@ -42,14 +42,14 @@ const categoryLinks: any = {
|
|||
Kesehatan: "/health",
|
||||
Olahraga: "/sports",
|
||||
PPA: "/ppa",
|
||||
MediaHub: "/mediahub",
|
||||
MediaHub: "https://mediahub.polri.go.id/",
|
||||
};
|
||||
|
||||
const NavbarKaltara = () => {
|
||||
return (
|
||||
<div className="bg-[#c03724] py-4 px-4 lg:px-20 flex justify-between items-center">
|
||||
<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-tbnews-kaltara.png" alt="image" className="h-28 w-72" />
|
||||
<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 flex flex-row gap-14 items-center">
|
||||
{category?.map((data: any) => (
|
||||
<Link key={data?.id} href={categoryLinks[data?.name] || "#"}>
|
||||
|
|
@ -57,7 +57,7 @@ const NavbarKaltara = () => {
|
|||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<Button className="flex justify-center items-center bg-white rounded-lg gap-3 ml-7 p-3 h-fit">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -56,7 +56,7 @@ const PopularNews = () => {
|
|||
<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">
|
||||
<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" />
|
||||
|
|
@ -84,7 +84,7 @@ const PopularNews = () => {
|
|||
{heroData[0]?.clickCount}{" "}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-light text-justify truncate">
|
||||
<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
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ const RegionalNews = () => {
|
|||
<p className="text-white font-semibold">Berita Wilayah</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-24 w-auto">
|
||||
<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" />
|
||||
|
|
@ -84,7 +84,7 @@ const RegionalNews = () => {
|
|||
{heroData[0]?.clickCount}{" "}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-light text-justify truncate">
|
||||
<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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -8,6 +8,8 @@ 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 (
|
||||
|
|
@ -16,10 +18,11 @@ const PoldaKaltara = () => {
|
|||
<HeroKaltara />
|
||||
<LatestNews />
|
||||
<PopularNews />
|
||||
{/* sosmed */}
|
||||
<SocialMedia />
|
||||
<NationalNews />
|
||||
<RegionalNews />
|
||||
<ContactUs />
|
||||
<NewsTickerKaltara />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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(() => {
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 86 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: 52 KiB |
Loading…
Reference in New Issue