119 lines
3.5 KiB
TypeScript
119 lines
3.5 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 '@/app/timeline';
|
||
|
||
import { Dock } from "@/app/dock"
|
||
|
||
import {
|
||
Home,
|
||
Search,
|
||
Music,
|
||
Heart,
|
||
Settings,
|
||
Plus,
|
||
User,
|
||
Play,
|
||
Pause
|
||
} from "lucide-react"
|
||
import { cn } from '@/lib/utils';
|
||
|
||
|
||
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" }
|
||
]
|
||
|
||
// 创建默认时间范围（过去7天到未来3天）
|
||
const now = new Date();
|
||
const startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000); // 7天前
|
||
const endDate = new Date(now.getTime() + 3 * 24 * 60 * 60 * 1000); // 3天后
|
||
const currentDate = now;
|
||
|
||
|
||
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 flex flex-col">
|
||
<MapComponent />
|
||
<Timeline
|
||
className={
|
||
cn(
|
||
"backdrop-blur-lg border shadow-lg",
|
||
"bg-background/90 border-border",
|
||
// "absolute bottom-0 left-1/2 -translate-x-1/2 ",
|
||
"z-10"
|
||
)
|
||
}
|
||
startDate={startDate}
|
||
endDate={endDate}
|
||
// currentDate={currentDate}
|
||
onDateChange={(date) => {
|
||
console.log('Selected date:', date);
|
||
}}
|
||
/>
|
||
{/* <Dock items={items} className="absolute top-1/2 right-4 -translate-y-1/2" /> */}
|
||
</div>
|
||
</SidebarInset>
|
||
</SidebarProvider>
|
||
</MapProvider>
|
||
)
|
||
}
|