feat : Commits, add a division section and and adjust some component
This commit is contained in:
parent
62b7ba0bf4
commit
a59cb6c20f
|
|
@ -8,8 +8,9 @@ import React, { useEffect, useState } from "react";
|
|||
import { format } from "date-fns";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
|
||||
const Jadwal = () => {
|
||||
const Schedule = () => {
|
||||
const city = [
|
||||
{
|
||||
key: 1,
|
||||
|
|
@ -64,6 +65,9 @@ const Jadwal = () => {
|
|||
|
||||
const [startDate, setStartDate] = useState<Date | undefined>(new Date());
|
||||
const [dateAWeek, setDateAWeek] = useState<string[]>([]);
|
||||
const [scheduleSearch, setScheduleSearch] = useState();
|
||||
const [todayList, setTodayList] = useState([]);
|
||||
|
||||
const curr = new Date();
|
||||
const startDays = (curr.getDay() + 7 - 1) % 7;
|
||||
|
||||
|
|
@ -190,7 +194,7 @@ const Jadwal = () => {
|
|||
return (
|
||||
<>
|
||||
{/* Awal Komponen Kiri */}
|
||||
<div className="relative px-4 lg:px-28 md:py-10 py-4 bg-gray-50 dark:bg-slate-800">
|
||||
<div className="relative px-4 lg:px-10 lg:py-10 py-4 bg-gray-50 dark:bg-slate-800">
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant={"outline"} className={cn("w-[240px] py-4 justify-start text-left font-normal", !startDate && "text-muted-foreground")}>
|
||||
|
|
@ -210,10 +214,10 @@ const Jadwal = () => {
|
|||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<div className="container relative">
|
||||
<div className="container relative py-4">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<a className="text-black flex flex-row gap-2 py-4 items-center cursor-pointer">
|
||||
<a className="text-black flex flex-row w-fit gap-2 py-4 items-center cursor-pointer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
||||
<path fill="#000" d="M20 3H4a1 1 0 0 0-1 1v2.227l.008.223a3 3 0 0 0 .772 1.795L8 12.886V21a1 1 0 0 0 1.316.949l6-2l.108-.043A1 1 0 0 0 16 19v-6.586l4.121-4.12A3 3 0 0 0 21 6.171V4a1 1 0 0 0-1-1" />
|
||||
</svg>
|
||||
|
|
@ -273,337 +277,377 @@ const Jadwal = () => {
|
|||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
<div className="flex flex-col lg:flex-row">
|
||||
<div className="h-[500px] w-3/4 overflow-y-auto">
|
||||
<div className="container-fluid relative">
|
||||
<div className="grid grid-cols-1 mt-8">
|
||||
<div className="relative block bg-white dark:bg-slate-900">
|
||||
<table className="w-full text-sm text-start">
|
||||
<thead className="text-md">
|
||||
<tr className="h-full">
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[120px]">Time Table</th>
|
||||
<th className="flex flex-row border h-full border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
|
||||
<a className="cursor-pointer h-fit self-center bottom-0" onClick={() => changePrevWeek()}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M12.29 8.71L9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7" />
|
||||
</svg>
|
||||
</a>{" "}
|
||||
<div className="flex flex-col">
|
||||
<p>{dateAWeek[0]?.split("-")[2]}</p>
|
||||
<p>Monday</p>
|
||||
</div>
|
||||
</th>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
|
||||
<div>{dateAWeek[1]?.split("-")[2]}</div>Tuesday
|
||||
</th>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
|
||||
<div>{dateAWeek[2]?.split("-")[2]}</div>Wednesday
|
||||
</th>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
|
||||
<div>{dateAWeek[3]?.split("-")[2]}</div>Thursday
|
||||
</th>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
|
||||
<div>{dateAWeek[4]?.split("-")[2]}</div>Friday
|
||||
</th>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
|
||||
<div>{dateAWeek[5]?.split("-")[2]}</div>Saturday
|
||||
</th>
|
||||
<th className="flex flex-row text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
|
||||
<div className="flex flex-col ">
|
||||
<p>{dateAWeek[6]?.split("-")[2]}</p>
|
||||
<p>Sunday</p>
|
||||
</div>
|
||||
<a onClick={() => changeNextWeek()} className="cursor-pointer h-fit p-0 m-0 self-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="m11.71 15.29l2.59-2.59a.996.996 0 0 0 0-1.41L11.71 8.7c-.63-.62-1.71-.18-1.71.71v5.17c0 .9 1.08 1.34 1.71.71" />
|
||||
</svg>
|
||||
</a>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">06:00</th>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
<div className="h-[500px] overflow-y-auto w-3/4 ">
|
||||
<div className="container-fluid relative">
|
||||
<div className="grid grid-cols-1 mt-8">
|
||||
<div className="relative block bg-white dark:bg-slate-900">
|
||||
<table className="w-full text-sm text-start">
|
||||
<thead className="text-md">
|
||||
<tr className="h-full">
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[120px]">Time Table</th>
|
||||
<th className="flex flex-row border h-full border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
|
||||
<a className="cursor-pointer h-fit self-center bottom-0" onClick={() => changePrevWeek()}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M12.29 8.71L9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7" />
|
||||
</svg>
|
||||
</a>{" "}
|
||||
<div className="flex flex-col">
|
||||
<p>{dateAWeek[0]?.split("-")[2]}</p>
|
||||
<p>Monday</p>
|
||||
</div>
|
||||
</th>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
|
||||
<div>{dateAWeek[1]?.split("-")[2]}</div>Tuesday
|
||||
</th>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
|
||||
<div>{dateAWeek[2]?.split("-")[2]}</div>Wednesday
|
||||
</th>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
|
||||
<div>{dateAWeek[3]?.split("-")[2]}</div>Thursday
|
||||
</th>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
|
||||
<div>{dateAWeek[4]?.split("-")[2]}</div>Friday
|
||||
</th>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
|
||||
<div>{dateAWeek[5]?.split("-")[2]}</div>Saturday
|
||||
</th>
|
||||
<th className="flex flex-row text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
|
||||
<div className="flex flex-col ">
|
||||
<p>{dateAWeek[6]?.split("-")[2]}</p>
|
||||
<p>Sunday</p>
|
||||
</div>
|
||||
<a onClick={() => changeNextWeek()} className="cursor-pointer h-fit p-0 m-0 self-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="m11.71 15.29l2.59-2.59a.996.996 0 0 0 0-1.41L11.71 8.7c-.63-.62-1.71-.18-1.71.71v5.17c0 .9 1.08 1.34 1.71.71" />
|
||||
</svg>
|
||||
</a>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">06:00</th>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">07:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">07:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">08:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">08:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">09:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">09:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">10:00</th>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">10:00</th>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">11:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">11:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">12:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">12:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">13:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">13:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">14:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">14:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">15:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">15:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">16:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">16:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">17:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">17:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">18:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">18:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">19:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">19:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">20:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">20:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">21:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">21:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">22:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">22:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">23:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">23:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">24:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">24:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">01:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">01:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">02:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">02:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">03:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">03:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">04:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">04:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">05:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">05:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-1/4 flex flex-col gap-6">
|
||||
<div className="relative text-gray-600 dark:text-white">
|
||||
<input type="text" placeholder="Masukkan Judul Jadwal" className="pl-8 pr-4 py-1 w-full border rounded-full text-sm focus:outline-none" />
|
||||
<span className="absolute left-2 top-1/2 transform -translate-y-1/2">
|
||||
<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="currentColor" d="M10.5 2a8.5 8.5 0 1 0 5.262 15.176l3.652 3.652a1 1 0 0 0 1.414-1.414l-3.652-3.652A8.5 8.5 0 0 0 10.5 2M4 10.5a6.5 6.5 0 1 1 13 0a6.5 6.5 0 0 1-13 0" />
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div className="card border border-slate-400 p-2 rounded-lg">
|
||||
<div className="card-header">
|
||||
<a className="accordion-icon">
|
||||
<h5 className="py-2 theme-text text-left">
|
||||
Jadwal Hari Ini
|
||||
<span className="float-right">
|
||||
<Icon icon="fa:angle-down" className="ml-1" />
|
||||
</span>
|
||||
</h5>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card border border-slate-400 p-2 rounded-lg">
|
||||
<div className="card-header">
|
||||
<a className="accordion-icon">
|
||||
<h5 className="py-2 theme-text text-left">
|
||||
Jadwal Sebelumnya
|
||||
<span className="float-right">
|
||||
<Icon icon="fa:angle-down" className="ml-1" />
|
||||
</span>
|
||||
</h5>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card border border-slate-400 p-2 rounded-lg">
|
||||
<div className="card-header">
|
||||
<a className="accordion-icon">
|
||||
<h5 className="py-2 theme-text text-left">
|
||||
Jadwal Selanjutnya
|
||||
<span className="float-right">
|
||||
<Icon icon="fa:angle-down" className="ml-1" />
|
||||
</span>
|
||||
</h5>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Akhir Komponen Kiri */}
|
||||
|
||||
{/* Awal Komponent Kanan */}
|
||||
<div className="w-1/4">
|
||||
<div>
|
||||
<h1>HALO</h1>
|
||||
</div>
|
||||
</div>
|
||||
{/* Akhir Komponen Kanan */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Jadwal;
|
||||
export default Schedule;
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import Coverage from "@/components/landing-page/coverage";
|
|||
import Navbar from "@/components/landing-page/navbar";
|
||||
import Hero from "@/components/landing-page/hero";
|
||||
import Footer from "@/components/landing-page/footer";
|
||||
import Division from "@/components/landing-page/division";
|
||||
|
||||
const Home = ({ params: { locale } }: { params: { locale: string } }) => {
|
||||
return (
|
||||
|
|
@ -21,6 +22,7 @@ const Home = ({ params: { locale } }: { params: { locale: string } }) => {
|
|||
<PopularContent />
|
||||
<ContentCategory />
|
||||
<Coverage />
|
||||
<Division />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -14,6 +14,13 @@ const Navbar = () => {
|
|||
const pathname = usePathname();
|
||||
const params = useParams();
|
||||
const locale = params?.locale;
|
||||
const [language, setLanguage] = useState<"id" | "en">("id");
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const handleLanguageChange = (lang: "id" | "en") => {
|
||||
setLanguage(lang);
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-black shadow-md sticky top-0 z-50">
|
||||
|
|
@ -113,17 +120,54 @@ const Navbar = () => {
|
|||
<img src="/assets/polriTv.png" className="w-20 lg:max-w-screen-lg h-10 flex-auto " />
|
||||
</a>
|
||||
</div>
|
||||
<select className="bg-transparent dark:text-white text-black border-none focus:outline-none" defaultValue="Indonesia">
|
||||
<option>Indonesia</option>
|
||||
<option>English</option>
|
||||
</select>
|
||||
<div className="relative inline-block text-left">
|
||||
{/* Tombol Utama */}
|
||||
<button onClick={() => setIsOpen(!isOpen)} className="flex items-center space-x-2 p-2 text-gray-700 bg-slate-200 rounded-lg">
|
||||
<img
|
||||
src={language === "id" ? "https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg" : "https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg"}
|
||||
alt={language === "id" ? "Ind" : "Eng"}
|
||||
className="w-3 h-3"
|
||||
/>
|
||||
<span>{language === "id" ? "Ind" : "Eng"}</span>
|
||||
<span className="text-gray-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 32 32">
|
||||
<path fill="currentColor" d="M8.037 11.166L14.5 22.36c.825 1.43 2.175 1.43 3 0l6.463-11.195c.826-1.43.15-2.598-1.5-2.598H9.537c-1.65 0-2.326 1.17-1.5 2.6z" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/* Dropdown Menu */}
|
||||
{isOpen && (
|
||||
<div className="absolute right-0 mt-2 w-auto bg-slate-200 border rounded-md shadow-lg z-10">
|
||||
<button onClick={() => handleLanguageChange("id")} className={`flex items-center space-x-2 w-full px-4 py-2 ${language === "id" ? "font-medium" : ""}`}>
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg" alt="Indonesia" className="w-5 h-5" />
|
||||
<span>Ind</span>
|
||||
</button>
|
||||
<button onClick={() => handleLanguageChange("en")} className={`flex items-center space-x-2 w-full px-4 py-2 ${language === "en" ? "font-medium" : ""}`}>
|
||||
<img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg" alt="English" className="w-5 h-5" />
|
||||
<span>Eng</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<ThemeSwitcher />
|
||||
<div className="relative text-gray-600 dark:text-white">
|
||||
<input type="text" placeholder="Pencarian" className="pl-8 pr-4 py-1 border rounded-full text-sm focus:outline-none" />
|
||||
<span className="absolute left-2 top-1/2 transform -translate-y-1/2">🔍</span>
|
||||
<input type="text" placeholder="Pencarian" className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none" />
|
||||
<span className="absolute left-4 top-1/2 transform -translate-y-1/2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
d="M14.385 15.446a6.751 6.751 0 1 1 1.06-1.06l5.156 5.155a.75.75 0 1 1-1.06 1.06zM6.46 13.884a5.25 5.25 0 1 1 7.43-.005l-.005.005l-.005.004a5.25 5.25 0 0 1-7.42-.004"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<button className="px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700">Masuk</button>
|
||||
<Link href="/in/auth" className="px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700">
|
||||
Masuk
|
||||
</Link>
|
||||
<button className="px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-red-600 hover:text-white">Daftar</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -215,8 +259,12 @@ const Navbar = () => {
|
|||
<input type="text" placeholder="Pencarian" className="border rounded-full text-sm text-gray-600" />
|
||||
</div>
|
||||
<div className="flex flex-col space-y-2">
|
||||
<button className="w-full px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 md:flex">Masuk</button>
|
||||
<button className="w-full px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] md:flex hover:text-white">Daftar</button>
|
||||
<Link href="/auth" className="w-full px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 md:flex">
|
||||
Masuk
|
||||
</Link>
|
||||
<Link href="#" className="w-full px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] md:flex hover:text-white">
|
||||
Daftar
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,102 @@
|
|||
import React, { useState } from "react";
|
||||
import { Button } from "../ui/button";
|
||||
|
||||
const Division = () => {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [seeAllValue, setSeeAllValue] = useState(false);
|
||||
|
||||
const regions = [
|
||||
{ name: "SIBER", logo: "/assets/satker/siber.png" },
|
||||
{ name: "DIVKUM", logo: "/assets/satker/divkum.png" },
|
||||
{ name: "PUSKEU", logo: "/assets/satker/puskeu.png" },
|
||||
{ name: "SSDM", logo: "/assets/satker/ssdm.png" },
|
||||
{ name: "ITWASUM", logo: "/assets/satker/itwasum.png" },
|
||||
{ name: "STIK-PTIK", logo: "/assets/satker/stik-ptik.png" },
|
||||
{ name: "SATUAN KERJA POLRI", logo: "/assets/satker/satuan-kerja-polri.png" },
|
||||
{ name: "BRIMOB", logo: "/assets/satker/brimob.png" },
|
||||
{ name: "DIV HUMAS", logo: "/assets/satker/div-humas.png" },
|
||||
{ name: "PUSLITBANG", logo: "/assets/satker/puslitbang.png" },
|
||||
{ name: "BINMAS", logo: "/assets/satker/binmas.png" },
|
||||
{ name: "DIV TIK", logo: "/assets/satker/div-tik.png" },
|
||||
{ name: "SPRIPIM", logo: "/assets/satker/spripim.png" },
|
||||
{ name: "DIVPROPRAM", logo: "/assets/satker/div-propram.png" },
|
||||
{ name: "KORPS SABHARA BAHARKAM", logo: "/assets/satker/khorp-sabhara-baharkam.png" },
|
||||
{ name: "PUSDOKKES", logo: "/assets/satker/pusdokkes.png" },
|
||||
{ name: "BAHARKAM", logo: "/assets/satker/baharkam.png" },
|
||||
{ name: "POLAIRUD", logo: "/assets/satker/polairud.png" },
|
||||
{ name: "POLAIR", logo: "/assets/satker/polair.png" },
|
||||
{ name: "POLUDARA", logo: "/assets/satker/poludara.png" },
|
||||
{ name: "LEMDIKLAT", logo: "/assets/satker/lemdiklat.png" },
|
||||
{ name: "AKPOL", logo: "/assets/satker/akpol.png" },
|
||||
{ name: "KORLANTAS", logo: "/assets/satker/korlantas.png" },
|
||||
{ name: "PUSINAFIS", logo: "/assets/satker/pusinafis.png" },
|
||||
{ name: "PUSJARAH", logo: "/assets/satker/pusjarah.png" },
|
||||
{ name: "PUSIKNAS", logo: "/assets/satker/pusiknas.png" },
|
||||
{ name: "SLOG", logo: "/assets/satker/slog.png" },
|
||||
{ name: "BAINTELKAM", logo: "/assets/satker/baintelkam.jpg" },
|
||||
{ name: "BARESKRIM", logo: "/assets/satker/bareskrim.png" },
|
||||
{ name: "DIVHUBINTER", logo: "/assets/satker/divhubinter.png" },
|
||||
{ name: "SETUM", logo: "/assets/satker/setum.png" },
|
||||
{ name: "PUSLABFOR", logo: "/assets/satker/puslabfor.png" },
|
||||
{ name: "DENSUS 88", logo: "/assets/satker/densus88.png" },
|
||||
{ name: "SAHLI KAPOLRI", logo: "/assets/satker/sahli-kapolri.png" },
|
||||
{ name: "SOPS", logo: "/assets/satker/sops.png" },
|
||||
{ name: "SRENA", logo: "/assets/satker/srena.png" },
|
||||
{ name: "SESPIM POLRI", logo: "/assets/satker/sespim-polri.png" },
|
||||
{ name: "SETUPA POLRI", logo: "/assets/satker/setupa-polri.png" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="max-w-screen-xl mx-auto px-4 lg:px-12 py-6">
|
||||
{/* Header */}
|
||||
<h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">
|
||||
Liputan <span className="text-[#bb3523]">Satker</span>
|
||||
</h2>
|
||||
<div className="h-1 w-48 bg-[#bb3523] mx-auto mb-6 rounded"></div>
|
||||
|
||||
{/* Pencarian */}
|
||||
<div className="flex items-center justify-center gap-4 mb-6">
|
||||
<input
|
||||
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-[#bb3523] focus:outline-none"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
<button className="px-2 lg:px-4 lg:py-2 bg-[#bb3523] text-white rounded-md hover:bg-red-700">Cari Liputan ></button>
|
||||
</div>
|
||||
|
||||
{/* Grid Wilayah */}
|
||||
<div className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-7 gap-6">
|
||||
{regions.map((region, index) =>
|
||||
!seeAllValue ? (
|
||||
index < 7 ? (
|
||||
<div key={index} className="flex flex-col items-center text-center group">
|
||||
<div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
|
||||
<img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
|
||||
</div>
|
||||
<p className="text-md font-semibold">{region.name}</p>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)
|
||||
) : (
|
||||
<div key={index} className="flex flex-col items-center text-center group">
|
||||
<div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
|
||||
<img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
|
||||
</div>
|
||||
<p className="text-md font-semibold">{region.name}</p>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
<div className="flex justify-center py-5">
|
||||
<Button onClick={() => setSeeAllValue(!seeAllValue)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
|
||||
Lihat Lebih {seeAllValue ? "Sedikit" : "Banyak"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Division;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Loading…
Reference in New Issue