108 lines
3.2 KiB
TypeScript
108 lines
3.2 KiB
TypeScript
'use client'
|
|
import 'maplibre-gl/dist/maplibre-gl.css';
|
|
import type { Map, MapOptions } from 'maplibre-gl';
|
|
import maplibregl from 'maplibre-gl';
|
|
import { AppSidebar } from '@/app/app-sidebar'
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbList,
|
|
BreadcrumbPage,
|
|
} from '@/components/ui/breadcrumb'
|
|
import { Separator } from '@/components/ui/separator'
|
|
import {
|
|
SidebarInset,
|
|
SidebarProvider,
|
|
SidebarTrigger,
|
|
} from '@/components/ui/sidebar'
|
|
import { useEffect, useRef } from 'react';
|
|
import { MapProvider } from './map-context';
|
|
import { MapComponent } from '@/components/map-component';
|
|
import { ThemeToggle } from '@/components/theme-toggle';
|
|
import { Timeline } from '@/components/timeline';
|
|
|
|
import { Dock } from "@/app/dock"
|
|
|
|
import {
|
|
Home,
|
|
Search,
|
|
Music,
|
|
Heart,
|
|
Settings,
|
|
Plus,
|
|
User,
|
|
Play,
|
|
Pause
|
|
} from "lucide-react"
|
|
|
|
|
|
export default function Page() {
|
|
|
|
const items = [
|
|
{ icon: Home, label: "Home" },
|
|
{ icon: Search, label: "Search" },
|
|
{ icon: Play, label: "Play" },
|
|
{ icon: User, label: "Profile" },
|
|
{ icon: Settings, label: "Settings" }
|
|
]
|
|
|
|
|
|
const containerRef = useRef<HTMLDivElement | null>(null);
|
|
const mapRef = useRef<Map | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (!containerRef.current || mapRef.current) return;
|
|
|
|
const options: MapOptions = {
|
|
container: containerRef.current,
|
|
style: 'https://demotiles.maplibre.org/style.json',
|
|
center: [103.851959, 1.290270], // 新加坡
|
|
zoom: 11,
|
|
};
|
|
|
|
mapRef.current = new maplibregl.Map(options);
|
|
mapRef.current.addControl(new maplibregl.NavigationControl(), 'top-right');
|
|
return () => mapRef.current?.remove();
|
|
}, []);
|
|
|
|
return (
|
|
<MapProvider>
|
|
<SidebarProvider>
|
|
<AppSidebar />
|
|
<SidebarInset>
|
|
<header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
|
|
<SidebarTrigger className="-ml-1" />
|
|
<Separator orientation="vertical" className="mr-2 h-4" />
|
|
<div className="flex items-center gap-2 justify-between w-full">
|
|
<Breadcrumb>
|
|
<BreadcrumbList>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbPage>October 2024</BreadcrumbPage>
|
|
</BreadcrumbItem>
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
<ThemeToggle />
|
|
</div>
|
|
</header>
|
|
<div className="relative h-full w-full">
|
|
<MapComponent />
|
|
<Dock items={items} className="absolute top-1/2 right-4 -translate-y-1/2" />
|
|
{/* <Timeline
|
|
className="absolute bottom-4 left-1/2 -translate-x-1/2"
|
|
startDate={new Date('2024-01-01')}
|
|
endDate={new Date('2024-12-31')}
|
|
currentDate={new Date()}
|
|
onDateChange={(date) => console.log('Date changed:', date)}
|
|
onPlay={() => console.log('Play')}
|
|
onPause={() => console.log('Pause')}
|
|
isPlaying={false}
|
|
speed="normal"
|
|
onSpeedChange={(speed) => console.log('Speed changed:', speed)}
|
|
/> */}
|
|
</div>
|
|
</SidebarInset>
|
|
</SidebarProvider>
|
|
</MapProvider>
|
|
)
|
|
}
|