93 lines
2.6 KiB
TypeScript
93 lines
2.6 KiB
TypeScript
'use client'
|
||
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 { MapComponent } from '@/components/map-component';
|
||
import { ThemeToggle } from '@/components/theme-toggle';
|
||
import { Timeline } from '@/app/timeline';
|
||
|
||
import {
|
||
Home,
|
||
Search,
|
||
Settings,
|
||
User,
|
||
Play,
|
||
} from "lucide-react"
|
||
import { cn } from '@/lib/utils';
|
||
import { useTimeline } from '@/hooks/use-timeline';
|
||
import { useEffect } from 'react'
|
||
import { useRadarTile } from '@/hooks/use-radartile'
|
||
|
||
|
||
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 { setTime } = useTimeline()
|
||
const { fetchRadarTile } = useRadarTile({})
|
||
|
||
useEffect(() => {
|
||
fetchRadarTile("http://127.0.0.1:3050/test")
|
||
}, [])
|
||
|
||
return (
|
||
<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",
|
||
"z-10"
|
||
)
|
||
}
|
||
startDate={startDate}
|
||
endDate={endDate}
|
||
onDateChange={(date) => {
|
||
console.log('Selected date:', date);
|
||
setTime(date)
|
||
}}
|
||
/>
|
||
</div>
|
||
</SidebarInset>
|
||
</SidebarProvider>
|
||
)
|
||
}
|