98 lines
3.6 KiB
TypeScript
98 lines
3.6 KiB
TypeScript
import * as React from "react"
|
|
import { Plus } from "lucide-react"
|
|
import { Calendars } from '@/app/calendars'
|
|
import { NavUser } from '@/app/nav-user'
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarFooter,
|
|
SidebarGroup,
|
|
SidebarHeader,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
SidebarRail,
|
|
SidebarSeparator,
|
|
} from '@/components/ui/sidebar'
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Slider } from "@/components/ui/slider"
|
|
import { useMapLocation, type LocationKey } from "@/hooks/use-map-location"
|
|
import { ThemeToggle } from "@/components/theme-toggle"
|
|
import { useMapZoom } from "@/hooks/use-map-zoom"
|
|
import { useUser } from "./user-context"
|
|
|
|
// This is sample data.
|
|
const data = {
|
|
user: {
|
|
name: "shadcn",
|
|
email: "m@example.com",
|
|
avatar: "/avatars/shadcn.jpg",
|
|
},
|
|
calendars: [
|
|
{
|
|
name: "My Calendars",
|
|
items: ["Personal", "Work", "Family"],
|
|
},
|
|
{
|
|
name: "Favorites",
|
|
items: ["Holidays", "Birthdays"],
|
|
},
|
|
{
|
|
name: "Other",
|
|
items: ["Travel", "Reminders", "Deadlines"],
|
|
},
|
|
],
|
|
}
|
|
|
|
export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
|
|
|
|
const { currentLocation, flyToLocation, isMapReady } = useMapLocation();
|
|
const { zoomToLocation, zoomIn, zoomOut, mapState } = useMapZoom();
|
|
const { user } = useUser()
|
|
|
|
return (
|
|
<Sidebar {...props}>
|
|
<SidebarHeader className="h-16 border-b border-sidebar-border">
|
|
</SidebarHeader>
|
|
<SidebarContent>
|
|
<SidebarGroup className="p-2 gap-2 px-4">
|
|
<Label htmlFor="date">Location</Label>
|
|
<Select defaultValue={currentLocation} onValueChange={(value) => {
|
|
if (isMapReady) {
|
|
flyToLocation(value as LocationKey)
|
|
}
|
|
}}>
|
|
<SelectTrigger className="w-full" id="date" disabled={!isMapReady}>
|
|
<SelectValue placeholder={isMapReady ? "Select a location" : "Loading map..."} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="usa">USA</SelectItem>
|
|
<SelectItem value="singapore">Singapore</SelectItem>
|
|
<SelectItem value="malaysia">Malaysia</SelectItem>
|
|
<SelectItem value="china">China</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</SidebarGroup>
|
|
|
|
<SidebarSeparator className="mx-0" />
|
|
|
|
<SidebarGroup className="p-2 gap-2 px-4">
|
|
<Label htmlFor="zoom">Zoom</Label>
|
|
<div className="flex items-center gap-2">
|
|
<Slider value={[mapState.zoomLevel]} min={5} max={23} step={0.1} onValueChange={value => zoomToLocation(value[0])} />
|
|
<span className="text-sm text-muted-foreground bg-muted rounded-md px-1 py-1 text-center w-10 inline-block">{mapState.zoomLevel.toFixed(1)}</span>
|
|
</div>
|
|
</SidebarGroup>
|
|
<SidebarSeparator className="mx-0" />
|
|
</SidebarContent>
|
|
<SidebarFooter>
|
|
{
|
|
user ? <NavUser user={user} /> : null
|
|
}
|
|
</SidebarFooter>
|
|
<SidebarRail />
|
|
</Sidebar>
|
|
)
|
|
}
|