feat : Commits, add component
This commit is contained in:
parent
93e7fe96c8
commit
03c7e9d80a
|
|
@ -3,7 +3,11 @@
|
|||
import Navbar from "@/components/landing-page/Navbar";
|
||||
import Hero from "@/components/landing-page/Hero";
|
||||
import SearchSection from "@/components/landing-page/SearchSection";
|
||||
import Carousel from "@/components/landing-page/Carousel";
|
||||
import KontenTerbaru from "@/components/landing-page/KontenTerbaru";
|
||||
import KontenTerpopuler from "@/components/landing-page/KontenTerpopuler";
|
||||
import KategoriKonten from "@/components/landing-page/KategoriKonten";
|
||||
import LiputanWilayah from "@/components/landing-page/LiputanWilayah";
|
||||
import Footer from "@/components/landing-page/Footer";
|
||||
|
||||
|
||||
const Home = ({ params: { locale } }: { params: { locale: string } }) => {
|
||||
|
|
@ -12,7 +16,12 @@ const Home = ({ params: { locale } }: { params: { locale: string } }) => {
|
|||
<Navbar />
|
||||
<Hero />
|
||||
<SearchSection />
|
||||
<Carousel />
|
||||
<KontenTerbaru />
|
||||
<KontenTerpopuler />
|
||||
<KategoriKonten />
|
||||
<LiputanWilayah />
|
||||
<Footer />
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,21 +0,0 @@
|
|||
import React from "react";
|
||||
|
||||
const Carousel = () => {
|
||||
return (
|
||||
<div className="max-w-5xl mx-auto p-4">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-xl font-bold bg-[#bb3523] px-4 py-1 rounded-full text-white">
|
||||
<span className="text-black">Konten</span> Terbaru
|
||||
</h2>
|
||||
<div className="flex space-x-4">
|
||||
<button className="text-sm font-medium">Audio Visual</button>
|
||||
<button className="text-sm font-medium">Audio</button>
|
||||
<button className="text-sm font-medium">Foto</button>
|
||||
<button className="text-sm font-medium">Teks</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Carousel;
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import React from "react";
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className="bg-red-600 text-white text-sm py-4">
|
||||
<div className="container mx-auto flex flex-col md:flex-row justify-between items-center space-y-2 md:space-y-0 px-4">
|
||||
{/* Hak Cipta */}
|
||||
<div className="text-center md:text-left">Hak Cipta © 2023 Divisi Humas Polri. All Right Reserved.</div>
|
||||
|
||||
{/* Menu Links */}
|
||||
<div className="flex flex-wrap justify-center items-center space-x-3">
|
||||
<a href="#" className="hover:underline">
|
||||
FeedBack
|
||||
</a>
|
||||
<span className="hidden md:inline-block">|</span>
|
||||
<a href="#" className="hover:underline">
|
||||
Hubungi Kami
|
||||
</a>
|
||||
<span className="hidden md:inline-block">|</span>
|
||||
<a href="#" className="hover:underline">
|
||||
FAQ
|
||||
</a>
|
||||
<span className="hidden md:inline-block">|</span>
|
||||
<a href="#" className="hover:underline">
|
||||
Privacy
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Social Media Icons */}
|
||||
<div className="flex justify-center items-center space-x-3">
|
||||
<span className="text-sm">Follow Us:</span>
|
||||
<a href="#" aria-label="Facebook">
|
||||
<img src="/assets/facebook.svg" alt="Facebook" className="w-5 h-5" />
|
||||
</a>
|
||||
<a href="#" aria-label="Instagram">
|
||||
<img src="/assets/instagram.svg" alt="Instagram" className="w-5 h-5" />
|
||||
</a>
|
||||
<a href="#" aria-label="Twitter">
|
||||
<img src="/assets/twitter.svg" alt="Instagram" className="w-5 h-5" />
|
||||
</a>
|
||||
<a href="#" aria-label="TikTok">
|
||||
<img src="/assets/tiktok.svg" alt="TikTok" className="w-5 h-5" />
|
||||
</a>
|
||||
<a href="#" aria-label="YouTube">
|
||||
<img src="/assets/youtube.svg" alt="YouTube" className="w-5 h-5" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
|
|
@ -3,19 +3,10 @@ import React, { useEffect, useState } from "react";
|
|||
const images = ["/assets/banner-sample.png", "/assets/img-header-blog.png"];
|
||||
|
||||
const Hero: React.FC = () => {
|
||||
const [currentImageIndex, setCurrentImageIndex] = useState(0);
|
||||
useEffect(() => {
|
||||
const intervalId = setInterval(() => {
|
||||
setCurrentImageIndex((prevIndex) => (prevIndex + 1) % images.length);
|
||||
}, 10000);
|
||||
return () => clearInterval(intervalId);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col lg:flex-row items-start gap-4 p-4 max-w-screen-xl h-fit mx-auto">
|
||||
<div className="flex flex-col lg:flex-row items-start gap-4 p-4 max-w-screen-xl h-fit mx-auto">
|
||||
{/* Section Gambar Utama */}
|
||||
<div className="lg:w-2/3 w-full">
|
||||
<div className="lg:w-2/3 w-full lg:h-full">
|
||||
<div className="relative">
|
||||
<img src="/assets/banner-sample.png" alt="Gambar Utama" className="w-full rounded-lg" />
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-4 rounded-b-lg">
|
||||
|
|
@ -27,7 +18,7 @@ const Hero: React.FC = () => {
|
|||
</div>
|
||||
|
||||
{/* Section Daftar Artikel */}
|
||||
<div className="lg:w-1/3 w-full">
|
||||
<div className="lg:w-1/3 lg:h-full w-full">
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
{
|
||||
|
|
@ -35,34 +26,34 @@ const Hero: React.FC = () => {
|
|||
title: "Doa Bersama Lintas Agama Jelang Pilkada di Papua",
|
||||
time: "26 November 2024 16:33 WIT",
|
||||
views: 13,
|
||||
src: "https://mediahub.polri.go.id/api/media/view?id=113865&operation=thumbnail&isSmall=true¤tMilis=1732784412735",
|
||||
},
|
||||
{
|
||||
label: "OPS MANTAP PRAJA & PILKADA 2024",
|
||||
title: "Potret Pengawalan Distribusi Logistik Pilkada ke Distrik-distrik di Kabupaten Yahukimo",
|
||||
time: "26 November 2024 16:29 WIT",
|
||||
views: 29,
|
||||
src: "https://mediahub.polri.go.id/api/media/view?id=113948&operation=thumbnail&isSmall=true¤tMilis=1732784412735",
|
||||
},
|
||||
{
|
||||
label: "INFOGRAFIS",
|
||||
title: "Dirgahayu ke-62 Seskoal",
|
||||
time: "26 November 2024 16:26 WIB",
|
||||
views: 2,
|
||||
src: "https://mediahub.polri.go.id/api/media/view?id=113624&operation=thumbnail&isSmall=true¤tMilis=1732784412736",
|
||||
},
|
||||
{
|
||||
label: "UNGKAP KASUS",
|
||||
title: "Evakuasi 30 Korban Kecelakaan Maut Truk di Tolikara",
|
||||
time: "26 November 2024 16:25 WIT",
|
||||
views: 26,
|
||||
src: "https://mediahub.polri.go.id/api/media/view?id=113815&operation=thumbnail&isSmall=true¤tMilis=1732784412736",
|
||||
},
|
||||
].map((item, index) => (
|
||||
<li key={index} className="flex gap-4 items-start bg-white shadow rounded-lg p-4">
|
||||
<div className="flex-shrink-0 w-24 h-16 bg-gray-200 rounded-lg">
|
||||
{/* Placeholder Thumbnail */}
|
||||
<img
|
||||
src="/"
|
||||
alt={item.title}
|
||||
className="w-full h-full object-cover rounded-lg"
|
||||
/>
|
||||
<img src={item.src} alt={item.title} className="w-full h-full object-cover rounded-lg" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg text-xs font-bold uppercase">{item.label}</span>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,93 @@
|
|||
import Link from "next/link";
|
||||
import React from "react";
|
||||
|
||||
const KategoriKonten = () => {
|
||||
return (
|
||||
<div className="max-w-screen-xl mx-auto px-4 py-10">
|
||||
<h2 className="text-center text-xl lg:text-2xl font-bold text-red-600 mb-4">
|
||||
Kategori <span className="text-black">Konten</span>
|
||||
</h2>
|
||||
<div className="w-48 h-1 bg-red-600 mx-auto mb-6"></div>
|
||||
<div className="grid my-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<Link href="#" className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
|
||||
<img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125¤tMilis=1732769540018" className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent text-white p-2">
|
||||
<h3 className="text-sm font-semibold truncate">PON XXI</h3>
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="#" className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
|
||||
<img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=128¤tMilis=1732769540018" className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent text-white p-2">
|
||||
<h3 className="text-sm font-semibold truncate">OPS LILIN NATARU 2024</h3>
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="#" className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
|
||||
<img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=127¤tMilis=1732769540018" className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent text-white p-2">
|
||||
<h3 className="text-sm font-semibold truncate">HUT HUMAS KE-73</h3>
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="#" className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
|
||||
<img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=126¤tMilis=1732769540018" className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent text-white p-2">
|
||||
<h3 className="text-sm font-semibold truncate">OPS ZEBRA 2024</h3>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="grid my-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<Link href="#" className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
|
||||
<img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93¤tMilis=1732769540018" className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent text-white p-2">
|
||||
<h3 className="text-sm font-semibold truncate">OPS MANTAP PRAJA & PILKADA 2024</h3>
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="#" className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
|
||||
<img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=94¤tMilis=1732769540018" className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent text-white p-2">
|
||||
<h3 className="text-sm font-semibold truncate">PENANGANAN KARHUTLA</h3>
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="#" className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
|
||||
<img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=1¤tMilis=1732769540018" className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent text-white p-2">
|
||||
<h3 className="text-sm font-semibold truncate">PERS RILIS</h3>
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="#" className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
|
||||
<img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=2¤tMilis=1732769540018" className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black backdrop:to-transparent text-white p-2">
|
||||
<h3 className="text-sm font-semibold truncate">SEPUTAR PRESTASI</h3>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="grid my-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<Link href="#" className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
|
||||
<img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=3¤tMilis=1732769540018" className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent text-white p-2">
|
||||
<h3 className="text-sm font-semibold truncate">LIPUTAN KEGIATAN</h3>
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="#" className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
|
||||
<img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=5¤tMilis=1732769540018" className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent text-white p-2">
|
||||
<h3 className="text-sm font-semibold truncate">UNGKAP KASUS</h3>
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="#" className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
|
||||
<img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=6¤tMilis=1732769540018" className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent text-white p-2">
|
||||
<h3 className="text-sm font-semibold truncate">GIAT PIMPINAN</h3>
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="#" className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
|
||||
<img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=75¤tMilis=1732769540018" className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent text-white p-2">
|
||||
<h3 className="text-sm font-semibold truncate">INFO GRAFIS</h3>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default KategoriKonten;
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
import React, { useState } from "react";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
|
||||
import { Card, CardContent } from "../ui/card";
|
||||
import Link from "next/link";
|
||||
|
||||
const dummyImage = [
|
||||
{ id: 1, thumbnail: "/assets/banner-sample.png" },
|
||||
{ id: 2, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125¤tMilis=1732769540018" },
|
||||
{ id: 3, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=128¤tMilis=1732769540018" },
|
||||
{ id: 4, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=127¤tMilis=1732769540018" },
|
||||
{ id: 5, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93¤tMilis=1732769540018" },
|
||||
];
|
||||
|
||||
const KontenTerbaru = () => {
|
||||
const [selectedTab, setSelectedTab] = useState("video");
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="space-x-5 flex flex-col p-4">
|
||||
<div className="flex px-10 flex-row gap-5 mb-4">
|
||||
<h2 className="flex items-center text-xl font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-white">
|
||||
<span className="text-black ">Konten {" "}</span> Terbaru
|
||||
</h2>
|
||||
<Tabs value={selectedTab} onValueChange={setSelectedTab}>
|
||||
<TabsList>
|
||||
<TabsTrigger value="video" className="relative text-lg md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
|
||||
Audio Visual
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="audio" className="relative text-lg md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
|
||||
Audio
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="image" className="relative text-lg md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
|
||||
Foto
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="teks" className="relative text-lg md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
|
||||
Teks
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
</div>
|
||||
<div className="px-10">
|
||||
{selectedTab == "video" ? (
|
||||
<Carousel>
|
||||
<CarouselContent>
|
||||
{dummyImage.map((image) => (
|
||||
<CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
|
||||
<Card>
|
||||
<CardContent className="flex items-center justify-center">
|
||||
<img src={image.thumbnail} className="h-60 object-cover w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
) : selectedTab == "audio" ? (
|
||||
<Carousel>
|
||||
<CarouselContent>
|
||||
{dummyImage.map((image) => (
|
||||
<CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
|
||||
<Card>
|
||||
<CardContent className="flex items-center justify-center">
|
||||
<img src={image.thumbnail} className="h-60 object-cover w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
) : selectedTab == "image" ? (
|
||||
<Carousel>
|
||||
<CarouselContent>
|
||||
{dummyImage.map((image) => (
|
||||
<CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
|
||||
<Card>
|
||||
<CardContent className="flex items-center justify-center">
|
||||
<img src={image.thumbnail} className="h-60 object-cover w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
) : (
|
||||
<Carousel>
|
||||
<CarouselContent>
|
||||
{dummyImage.map((image) => (
|
||||
<CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
|
||||
<Card>
|
||||
<CardContent>
|
||||
<img src={image.thumbnail} className="h-60 object-cover w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center flex-row justify-center">
|
||||
<Link href="#" className="border text-red-500 text-md px-4 py-1 border-red-500">
|
||||
LIHAT SEMUA
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default KontenTerbaru;
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
import React from "react";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
|
||||
import { Card, CardContent } from "../ui/card";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
|
||||
const dummyImage = [
|
||||
{ id: 1, thumbnail: "/assets/banner-sample.png" },
|
||||
{ id: 2, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125¤tMilis=1732769540018" },
|
||||
{ id: 3, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=128¤tMilis=1732769540018" },
|
||||
{ id: 4, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=127¤tMilis=1732769540018" },
|
||||
{ id: 5, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93¤tMilis=1732769540018" },
|
||||
];
|
||||
|
||||
const KontenTerpopuler = () => {
|
||||
const [selectedTab, setSelectedTab] = useState("video");
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="space-x-5 flex flex-col p-4">
|
||||
<div className="flex px-10 flex-row gap-5 mb-4">
|
||||
<h2 className="flex items-center text-xl font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-white">
|
||||
<span className="text-black ">Konten {" "}</span> Terpopuler
|
||||
</h2>
|
||||
<Tabs value={selectedTab} onValueChange={setSelectedTab}>
|
||||
<TabsList>
|
||||
<TabsTrigger value="video" className="relative text-lg md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
|
||||
Audio Visual
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="audio" className="relative text-lg md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
|
||||
Audio
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="image" className="relative text-lg md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
|
||||
Foto
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="teks" className="relative text-lg md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
|
||||
Teks
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
</div>
|
||||
<div className="px-10">
|
||||
{selectedTab == "video" ? (
|
||||
<Carousel>
|
||||
<CarouselContent>
|
||||
{dummyImage.map((image) => (
|
||||
<CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
|
||||
<Card>
|
||||
<CardContent className="flex items-center justify-center">
|
||||
<img src={image.thumbnail} className="h-60 object-cover w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
) : selectedTab == "audio" ? (
|
||||
<Carousel>
|
||||
<CarouselContent>
|
||||
{dummyImage.map((image) => (
|
||||
<CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
|
||||
<Card>
|
||||
<CardContent className="flex items-center justify-center">
|
||||
<img src={image.thumbnail} className="h-60 object-cover w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
) : selectedTab == "image" ? (
|
||||
<Carousel>
|
||||
<CarouselContent>
|
||||
{dummyImage.map((image) => (
|
||||
<CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
|
||||
<Card>
|
||||
<CardContent className="flex items-center justify-center">
|
||||
<img src={image.thumbnail} className="h-60 object-cover w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
) : (
|
||||
<Carousel>
|
||||
<CarouselContent>
|
||||
{dummyImage.map((image) => (
|
||||
<CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
|
||||
<Card>
|
||||
<CardContent>
|
||||
<img src={image.thumbnail} className="h-60 object-cover w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center flex-row justify-center">
|
||||
<Link href="#" className="border text-red-500 text-md px-4 py-1 border-red-500">
|
||||
LIHAT SEMUA
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default KontenTerpopuler;
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
import React, { useState } from "react";
|
||||
|
||||
|
||||
|
||||
const LiputanWilayah: React.FC = () => {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
|
||||
|
||||
const regions = [
|
||||
{ name: "Polda Metro Jaya", logo: "/assets/polda/polda-metro.png" },
|
||||
{ name: "Polda Jawa Barat", logo: "/assets/polda/polda-jabar.png" },
|
||||
{ name: "Polda Banten", logo: "/assets/polda/polda-banten.png" },
|
||||
{ name: "Polda Jawa Tengah", logo: "/assets/polda/polda-jateng.png" },
|
||||
{ name: "Polda D.I Yogyakarta", logo: "/assets/polda/polda-diy.png" },
|
||||
{ name: "Polda Jawa Timur", logo: "/assets/polda/polda-jatim.png" },
|
||||
{ name: "Polda Aceh", logo: "/assets/polda/polda-aceh.png" },
|
||||
{ name: "Polda Sumatera Utara", logo: "/assets/polda/polda-sumut.png" },
|
||||
{ name: "Polda Sumatera Barat", logo: "/assets/polda/polda-sumbar.png" },
|
||||
{ name: "Polda Riau", logo: "/assets/polda/polda-riau.png" },
|
||||
{ name: "Polda Kep. Riau", logo: "/assets/polda/polda-kepri.png" },
|
||||
{ name: "Polda Jambi", logo: "/assets/polda/polda-jambi.png" },
|
||||
{ name: "Polda Sumatera Selatan", logo: "/assets/polda/polda-sumsel.png" },
|
||||
{ name: "Polda Kep. Bangka Belitung", logo: "/assets/polda/polda-bangkabelitung.png" },
|
||||
{ name: "Polda Bengkulu", logo: "/assets/polda/polda-bengkulu.png" },
|
||||
{ name: "Polda Lampung", logo: "/assets/polda/polda-lampung.png" },
|
||||
{ name: "Polda Nusa Tenggara Barat", logo: "/assets/polda/polda-ntb.png" },
|
||||
{ name: "Polda Nusa Tenggara Timur", logo: "/assets/polda/polda-ntt.png" },
|
||||
{ name: "Polda Bali", logo: "/assets/polda/polda-bali.png" },
|
||||
{ name: "Polda Kalimantan Barat", logo: "/assets/polda/polda-kalbar.png" },
|
||||
{ name: "Polda Kalimantan Tengah", logo: "/assets/polda/polda-kalteng.png" },
|
||||
{ name: "Polda Kalimantan Selatan", logo: "/assets/polda/polda-kalsel.png" },
|
||||
{ name: "Polda Kalimantan Timur", logo: "/assets/polda/polda-kaltim.png" },
|
||||
{ name: "Polda Kalimantan Utara", logo: "/assets/polda/polda-kalut.png" },
|
||||
{ name: "Polda Sulawesi Tengah", logo: "/assets/polda/polda-sulteng.png" },
|
||||
{ name: "Polda Sulawesi Utara", logo: "/assets/polda/polda-sulut.png" },
|
||||
{ name: "Polda Gorontalo", logo: "/assets/polda/polda-gorontalo.png" },
|
||||
{ name: "Polda Sulawesi Barat", logo: "/assets/polda/polda-sulbar.png" },
|
||||
{ name: "Polda Sulawesi Selatan", logo: "/assets/polda/polda-sulsel.png" },
|
||||
{ name: "Polda Sulawesi Tenggara", logo: "/assets/polda/polda-sultenggara.png" },
|
||||
{ name: "Polda Maluku Utara", logo: "/assets/polda/polda-malut.png" },
|
||||
{ name: "Polda Maluku", logo: "/assets/polda/polda-maluku.png" },
|
||||
{ name: "Polda Papua Barat", logo: "/assets/polda/polda-papbar.png" },
|
||||
{ name: "Polda Papua", logo: "/assets/polda/polda-papua.png" },
|
||||
{ name: "Satuan Kerja POLRI", logo: "/assets/polda/polda-satker.jpeg" },
|
||||
{ name: "Internasional", logo: "/assets/polda/internasional.png" },
|
||||
];
|
||||
|
||||
|
||||
const filteredRegions = regions.filter((region) => region.name.toLowerCase().includes(searchTerm.toLowerCase()));
|
||||
|
||||
return (
|
||||
<div className="max-w-screen-xl mx-auto px-4 py-6">
|
||||
{/* Header */}
|
||||
<h2 className="text-center text-2xl font-bold text-gray-800 mb-4">
|
||||
Liputan <span className="text-red-600">Wilayah</span>
|
||||
</h2>
|
||||
<div className="h-1 w-48 bg-red-600 mx-auto mb-6 rounded"></div>
|
||||
|
||||
{/* Pencarian */}
|
||||
<div className="flex items-center justify-center gap-4 mb-6">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Pencarian"
|
||||
className="w-full max-w-sm px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-red-600 focus:outline-none"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
<button className="px-2 lg:px-4 lg:py-2 bg-red-600 text-white rounded-md hover:bg-red-700">Cari Liputan ></button>
|
||||
</div>
|
||||
|
||||
{/* Grid Wilayah */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-7 lg:grid-cols-9 gap-6">
|
||||
{filteredRegions.map((region, index) => (
|
||||
<div key={index} className="flex flex-col items-center text-center group">
|
||||
<div className="relative w-20 h-20 rounded-full border-2 border-red-600 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" />
|
||||
</div>
|
||||
<p className="text-md font-semibold">{region.name}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LiputanWilayah;
|
||||
|
|
@ -2,7 +2,9 @@
|
|||
|
||||
import React, { useState } from "react";
|
||||
import ThemeSwitcher from "@/components/partials/header/theme-switcher";
|
||||
import StaggeredDropDown from "./StaggeredDropdown";
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
|
||||
import Link from "next/link";
|
||||
import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
|
||||
|
||||
const Navbar = () => {
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
|
|
@ -22,16 +24,49 @@ const Navbar = () => {
|
|||
|
||||
{/* Desktop Navigation */}
|
||||
<div className="hidden md:flex items-center space-x-6">
|
||||
<span>
|
||||
<svg className="ml-6 " width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<a className="bg-white text-black flex flex-row justify-center items-center ml-5 cursor-pointer">
|
||||
<svg className="mx-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
|
||||
fill="#000000"
|
||||
/>
|
||||
</svg>
|
||||
Konten
|
||||
<svg className="flex items-center justify-center" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" fill-rule="evenodd" d="m6 7l6 6l6-6l2 2l-8 8l-8-8z" />
|
||||
</svg>
|
||||
</a>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="p-0 rounded-md overflow-hidden">
|
||||
<DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
|
||||
<span className="text-default-700c flex flex-row justify-center items-center group-hover:text-primary-foreground">
|
||||
<FiYoutube className="mr-2" />
|
||||
Audio Visual
|
||||
</span>
|
||||
<StaggeredDropDown />
|
||||
<button className="text-black font-medium flex flex-row items-center justify-center hover:text-gray-800">
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
|
||||
<span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
|
||||
<FiMusic className="mr-2" />
|
||||
Audio
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
|
||||
<span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
|
||||
<FiImage className="mr-2" />
|
||||
Foto
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
|
||||
<span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
|
||||
<FiFile className="mr-2" />
|
||||
Teks
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<Link href="#" className="text-black font-medium flex flex-row items-center justify-center hover:text-gray-800">
|
||||
<span>
|
||||
<svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
|
|
@ -41,8 +76,8 @@ const Navbar = () => {
|
|||
</svg>
|
||||
</span>
|
||||
Jadwal
|
||||
</button>
|
||||
<button className="text-black flex flex-row items-center justify-center font-medium hover:text-gray-800">
|
||||
</Link>
|
||||
<Link href="" className="text-black flex flex-row items-center justify-center font-medium hover:text-gray-800">
|
||||
<span>
|
||||
<svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
|
|
@ -54,11 +89,11 @@ const Navbar = () => {
|
|||
</svg>
|
||||
</span>
|
||||
Indeks
|
||||
</button>
|
||||
<div className="flex items-center space-x-1 text-red-600">
|
||||
</Link>
|
||||
<Link href="#" className="flex items-center space-x-1 text-red-600">
|
||||
<span className="w-2 h-2 bg-red-500 rounded-full"></span>
|
||||
<span className="font-medium">Live</span>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex items-center space-x-1 ">
|
||||
<a href="https://tvradio.polri.go.id/">
|
||||
<img src="/assets/polriTv.png" className="w-full h-auto" />
|
||||
|
|
@ -83,7 +118,7 @@ const Navbar = () => {
|
|||
{/* Mobile Menu */}
|
||||
{menuOpen && (
|
||||
<div className="md:hidden bg-white px-4 size-9 py-3 space-y-3">
|
||||
<button className="flex text-black flex-row justify-center items-center font-medium hover:text-gray-800">
|
||||
<Link href="#" className="flex text-black flex-row justify-center items-center font-medium hover:text-gray-800">
|
||||
<span>
|
||||
<svg className="ml-6 -right-3" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
|
|
@ -93,8 +128,8 @@ const Navbar = () => {
|
|||
</svg>
|
||||
</span>
|
||||
Konten
|
||||
</button>
|
||||
<button className="flex text-black flex-row justify-center items-center font-medium hover:text-gray-800">
|
||||
</Link>
|
||||
<Link href="#" className="flex text-black flex-row justify-center items-center font-medium hover:text-gray-800">
|
||||
<span>
|
||||
<svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
|
|
@ -104,8 +139,8 @@ const Navbar = () => {
|
|||
</svg>
|
||||
</span>
|
||||
Jadwal
|
||||
</button>
|
||||
<button className="flex text-black flex-row justify-center items-center font-medium hover:text-gray-800">
|
||||
</Link>
|
||||
<Link href="#" className="flex text-black flex-row justify-center items-center font-medium hover:text-gray-800">
|
||||
<span>
|
||||
<svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
|
|
@ -117,7 +152,7 @@ const Navbar = () => {
|
|||
</svg>
|
||||
</span>
|
||||
Indeks
|
||||
</button>
|
||||
</Link>
|
||||
<div className="flex items-center space-x-1 text-red-600">
|
||||
<span className="w-2 h-2 bg-red-500 rounded-full"></span>
|
||||
<span className="font-medium">Live</span>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
import React from 'react'
|
||||
|
||||
const NewsTicker = () => {
|
||||
return (
|
||||
<div></div>
|
||||
)
|
||||
}
|
||||
|
||||
export default NewsTicker
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import React from "react";
|
||||
import StaggeredDropDown from "./StaggeredDropdown";
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
|
||||
import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
|
||||
|
||||
const SearchSection: React.FC = () => {
|
||||
return (
|
||||
|
|
@ -9,7 +10,7 @@ const SearchSection: React.FC = () => {
|
|||
<h1 className="text-2xl md:text-3xl font-bold text-gray-800">
|
||||
<span className="text-red-600">Eksplorasi</span> dan <span className="text-red-600">Download</span> Liputan Resmi Kami
|
||||
</h1>
|
||||
<div className="w-auto h-1 bg-red-600 mx-auto mt-2"></div>
|
||||
<div className="w-full h-1 bg-red-600 mx-auto mt-2"></div>
|
||||
<p className="text-sm md:text-base text-gray-500 mt-4">Liputan resmi yang bersumber dari kegiatan Polri di Mabes dan Polda seluruh Indonesia</p>
|
||||
|
||||
{/* Search Form */}
|
||||
|
|
@ -17,15 +18,48 @@ const SearchSection: React.FC = () => {
|
|||
{/* Dropdown */}
|
||||
<div className="flex items-center border border-gray-300 rounded-lg overflow-hidden">
|
||||
<button className="flex items-center px-4 py-2 bg-gray-100 text-gray-600 hover:bg-gray-200">
|
||||
<span className="material-icons text-gray-500 mr-2">
|
||||
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<a className="text-black flex flex-row justify-center items-center ml-5 cursor-pointer">
|
||||
<svg className="mx-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
|
||||
fill="#000000"
|
||||
/>
|
||||
</svg>
|
||||
Konten
|
||||
<svg className="flex items-center justify-center" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" fill-rule="evenodd" d="m6 7l6 6l6-6l2 2l-8 8l-8-8z" />
|
||||
</svg>
|
||||
</a>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="p-0 rounded-md overflow-hidden">
|
||||
<DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
|
||||
<span className="text-default-700c flex flex-row justify-center items-center group-hover:text-primary-foreground">
|
||||
<FiYoutube className="mr-2" />
|
||||
Audio Visual
|
||||
</span>
|
||||
<StaggeredDropDown />
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
|
||||
<span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
|
||||
<FiMusic className="mr-2" />
|
||||
Audio
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
|
||||
<span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
|
||||
<FiImage className="mr-2" />
|
||||
Foto
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
|
||||
<span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
|
||||
<FiFile className="mr-2" />
|
||||
Teks
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,94 +0,0 @@
|
|||
import { FiChevronDown, FiYoutube, FiMusic, FiImage, FiFile } from "react-icons/fi";
|
||||
import { motion } from "framer-motion";
|
||||
import { Dispatch, SetStateAction, useState } from "react";
|
||||
import { IconType } from "react-icons";
|
||||
|
||||
const StaggeredDropDown = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center bg-white ">
|
||||
<motion.div animate={open ? "open" : "closed"} className="relative">
|
||||
<button onClick={() => setOpen((pv) => !pv)} className="flex items-center text-black transition-colors">
|
||||
<span className="font-medium text-md">Konten</span>
|
||||
<motion.span variants={iconVariants}>
|
||||
<FiChevronDown />
|
||||
</motion.span>
|
||||
</button>
|
||||
|
||||
<motion.ul
|
||||
initial={wrapperVariants.closed}
|
||||
variants={wrapperVariants}
|
||||
style={{ originY: "top", translateX: "-50%" }}
|
||||
className="flex flex-col z-50 gap-2 p-2 rounded-lg shadow-xl absolute top-[120%] left-[50%] w-48 overflow-hidden bg-white"
|
||||
>
|
||||
<Option setOpen={setOpen} Icon={FiYoutube} text="Audio Visual" />
|
||||
<Option setOpen={setOpen} Icon={FiMusic} text="Audio" />
|
||||
<Option setOpen={setOpen} Icon={FiImage} text="Foto" />
|
||||
<Option setOpen={setOpen} Icon={FiFile} text="Teks" />
|
||||
</motion.ul>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Option = ({ text, Icon, setOpen }: { text: string; Icon: IconType; setOpen: Dispatch<SetStateAction<boolean>> }) => {
|
||||
return (
|
||||
<motion.li
|
||||
variants={itemVariants}
|
||||
onClick={() => setOpen(false)}
|
||||
className="flex items-center gap-2 w-full p-2 text-xs font-medium whitespace-nowrap rounded-md hover:bg-indigo-100 text-slate-700 hover:text-red-500 transition-colors cursor-pointer"
|
||||
>
|
||||
<motion.span variants={actionIconVariants}>
|
||||
<Icon />
|
||||
</motion.span>
|
||||
<span>{text}</span>
|
||||
</motion.li>
|
||||
);
|
||||
};
|
||||
|
||||
export default StaggeredDropDown;
|
||||
|
||||
const wrapperVariants = {
|
||||
open: {
|
||||
scaleY: 1,
|
||||
transition: {
|
||||
when: "beforeChildren",
|
||||
staggerChildren: 0.1,
|
||||
},
|
||||
},
|
||||
closed: {
|
||||
scaleY: 0,
|
||||
transition: {
|
||||
when: "afterChildren",
|
||||
staggerChildren: 0.1,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const iconVariants = {
|
||||
open: { rotate: 180 },
|
||||
closed: { rotate: 0 },
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
open: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
when: "beforeChildren",
|
||||
},
|
||||
},
|
||||
closed: {
|
||||
opacity: 0,
|
||||
y: -15,
|
||||
transition: {
|
||||
when: "afterChildren",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const actionIconVariants = {
|
||||
open: { scale: 1, y: 0 },
|
||||
closed: { scale: 0, y: -7 },
|
||||
};
|
||||
|
|
@ -81,6 +81,7 @@
|
|||
"nextra-theme-docs": "^2.13.4",
|
||||
"quill": "^2.0.2",
|
||||
"react": "^18",
|
||||
"react-advanced-news-ticker": "^1.0.1",
|
||||
"react-apexcharts": "^1.4.1",
|
||||
"react-chartjs-2": "^5.2.0",
|
||||
"react-day-picker": "^8.10.1",
|
||||
|
|
@ -10678,6 +10679,28 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-advanced-news-ticker": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-advanced-news-ticker/-/react-advanced-news-ticker-1.0.1.tgz",
|
||||
"integrity": "sha512-gWFW9jovuA5472Rkt13+SHnblWu9OyZ2seFC/xMgf5OthPCyVnt6gSlX3NTq4QCEEhUlVJzsm+xY+G+VKg85ag==",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.13.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-advanced-news-ticker/node_modules/react": {
|
||||
"version": "16.14.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
|
||||
"integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"prop-types": "^15.6.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-apexcharts": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.6.0.tgz",
|
||||
|
|
|
|||
|
|
@ -82,6 +82,7 @@
|
|||
"nextra-theme-docs": "^2.13.4",
|
||||
"quill": "^2.0.2",
|
||||
"react": "^18",
|
||||
"react-advanced-news-ticker": "^1.0.1",
|
||||
"react-apexcharts": "^1.4.1",
|
||||
"react-chartjs-2": "^5.2.0",
|
||||
"react-day-picker": "^8.10.1",
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="white" d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95"/></svg>
|
||||
|
After Width: | Height: | Size: 276 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="white" d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"/></svg>
|
||||
|
After Width: | Height: | Size: 559 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 256 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 246 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 199 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 197 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 436 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 246 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 446 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 224 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 257 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="white" d="M16.6 5.82s.51.5 0 0A4.28 4.28 0 0 1 15.54 3h-3.09v12.4a2.59 2.59 0 0 1-2.59 2.5c-1.42 0-2.6-1.16-2.6-2.6c0-1.72 1.66-3.01 3.37-2.48V9.66c-3.45-.46-6.47 2.22-6.47 5.64c0 3.33 2.76 5.7 5.69 5.7c3.14 0 5.69-2.55 5.69-5.7V9.01a7.35 7.35 0 0 0 4.3 1.38V7.3s-1.88.09-3.24-1.48"/></svg>
|
||||
|
After Width: | Height: | Size: 387 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m13.081 10.712l-4.786-6.71a.6.6 0 0 0-.489-.252H5.28a.6.6 0 0 0-.488.948l6.127 8.59m2.162-2.576l6.127 8.59a.6.6 0 0 1-.488.948h-2.526a.6.6 0 0 1-.489-.252l-4.786-6.71m2.162-2.576l5.842-6.962m-8.004 9.538L5.077 20.25"/></svg>
|
||||
|
After Width: | Height: | Size: 411 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><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="white" d="M12 4c.855 0 1.732.022 2.582.058l1.004.048l.961.057l.9.061l.822.064a3.8 3.8 0 0 1 3.494 3.423l.04.425l.075.91c.07.943.122 1.971.122 2.954s-.052 2.011-.122 2.954l-.075.91l-.04.425a3.8 3.8 0 0 1-3.495 3.423l-.82.063l-.9.062l-.962.057l-1.004.048A62 62 0 0 1 12 20a62 62 0 0 1-2.582-.058l-1.004-.048l-.961-.057l-.9-.062l-.822-.063a3.8 3.8 0 0 1-3.494-3.423l-.04-.425l-.075-.91A41 41 0 0 1 2 12c0-.983.052-2.011.122-2.954l.075-.91l.04-.425A3.8 3.8 0 0 1 5.73 4.288l.821-.064l.9-.061l.962-.057l1.004-.048A62 62 0 0 1 12 4m-2 5.575v4.85c0 .462.5.75.9.52l4.2-2.425a.6.6 0 0 0 0-1.04l-4.2-2.424a.6.6 0 0 0-.9.52Z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -21,6 +21,6 @@
|
|||
"@/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "components/landing-page/NewsTicker.tsx", "components/landing-page/NavBottom.js"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue