84 lines
2.9 KiB
TypeScript
84 lines
2.9 KiB
TypeScript
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Moon, Sun } from "lucide-react";
|
|
import { useTheme } from "next-themes";
|
|
import { cn } from "@/lib/utils";
|
|
import { useEffect, useState } from "react";
|
|
|
|
const AppearanceDropdown = () => {
|
|
const { setTheme, theme } = useTheme();
|
|
|
|
// State untuk tanggal dan waktu
|
|
const [currentTime, setCurrentTime] = useState(new Date());
|
|
|
|
useEffect(() => {
|
|
// Update waktu setiap detik
|
|
const interval = setInterval(() => {
|
|
setCurrentTime(new Date());
|
|
}, 1000);
|
|
|
|
return () => clearInterval(interval); // Bersihkan interval saat komponen unmount
|
|
}, []);
|
|
|
|
// Format tanggal (contoh: Senin, 03 Februari 2025)
|
|
const formattedDate = new Intl.DateTimeFormat("id-ID", {
|
|
weekday: "long",
|
|
day: "2-digit",
|
|
month: "long",
|
|
year: "numeric",
|
|
}).format(currentTime);
|
|
|
|
// Format waktu (contoh: 15:01:32)
|
|
const formattedTime = currentTime.toLocaleTimeString("id-ID", {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
second: "2-digit",
|
|
hour12: false,
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<div className="flex flex-row items-center justify-center">
|
|
<span className="text-sm px-5 items-center text-right">
|
|
{formattedDate} <br />
|
|
{formattedTime}
|
|
</span>
|
|
{/* <div className="px-5">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className={cn("h-7 w-7")}
|
|
>
|
|
{theme == "light" ? <Sun /> : <Moon />}
|
|
<span className="sr-only">Toggle theme</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem onClick={() => setTheme("light")}>
|
|
Light
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setTheme("dark")}>
|
|
Dark
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={() => setTheme("system")}
|
|
>
|
|
System
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div> */}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default AppearanceDropdown;
|