[V0_FILE]typescriptreact:file="components/mode-toggle.tsx" isMerged="true" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ModeToggle() { const { setTheme } = useTheme() return ( setTheme("light")}>Light setTheme("dark")}>Dark setTheme("system")}>System ) } [V0_FILE]typescriptreact:file="components/calendar.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { CalendarIcon, Plus } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Calendar as CalendarComponent } from "@/components/ui/calendar" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { cn } from "@/lib/utils" import { format } from "date-fns" type Event = { id: string title: string description: string date: Date } export function Calendar() { const [date, setDate] = useState(new Date()) const [events, setEvents] = useState([ { id: "1", title: "Family Dinner", description: "Weekly family dinner at home", date: new Date(2025, 2, 15, 18, 0), }, { id: "2", title: "Home Maintenance", description: "Check smoke detectors and replace filters", date: new Date(2025, 2, 20, 10, 0), }, ]) const [newEvent, setNewEvent] = useState>({ title: "", description: "", date: new Date(), }) const handleAddEvent = () => { if (newEvent.title.trim() === "") return setEvents([...events, { ...newEvent, id: crypto.randomUUID() }]) setNewEvent({ title: "", description: "", date: new Date(), }) } const eventsForSelectedDate = events.filter((event) => event.date.toDateString() === date.toDateString()) return (

Calendar View and manage your schedule date && setDate(date)} className="rounded-md border-0" />

{format(date, "PPP")}

No items found

About

Tags

Share

More from sivaprakasam7

More Templates Like This

About

Tags

Share

About

Tags

Share

More from sivaprakasam7

More Templates Like This