117 lines
6.6 KiB
TypeScript
117 lines
6.6 KiB
TypeScript
import React from 'react'
|
|
import { Layers, Info, Eye, Filter, MapPin, AlertTriangle, AlertCircle } from 'lucide-react'
|
|
import { Card, CardContent } from "@/app/_components/ui/card"
|
|
import { Separator } from "@/app/_components/ui/separator"
|
|
import { CRIME_RATE_COLORS } from "@/app/_utils/const/map"
|
|
import { SidebarSection } from "../components/sidebar-section"
|
|
|
|
export function SidebarInfoTab() {
|
|
return (
|
|
<>
|
|
<SidebarSection title="Map Legend" icon={<Layers className="h-4 w-4 text-green-400" />}>
|
|
<Card className="bg-gradient-to-r from-zinc-800/80 to-zinc-900/80 border border-white/10">
|
|
<CardContent className="p-4 text-xs space-y-3">
|
|
<div className="space-y-2">
|
|
<h4 className="font-medium mb-2 text-sm">Crime Severity</h4>
|
|
<div className="flex items-center gap-2 p-1.5 hover:bg-white/5 rounded-md transition-colors">
|
|
<div className="w-4 h-4 rounded" style={{ backgroundColor: CRIME_RATE_COLORS.low }}></div>
|
|
<span>Low Crime Rate</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 p-1.5 hover:bg-white/5 rounded-md transition-colors">
|
|
<div className="w-4 h-4 rounded" style={{ backgroundColor: CRIME_RATE_COLORS.medium }}></div>
|
|
<span>Medium Crime Rate</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 p-1.5 hover:bg-white/5 rounded-md transition-colors">
|
|
<div className="w-4 h-4 rounded" style={{ backgroundColor: CRIME_RATE_COLORS.high }}></div>
|
|
<span>High Crime Rate</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator className="bg-white/20 my-3" />
|
|
|
|
<div className="space-y-2">
|
|
<h4 className="font-medium mb-2 text-sm">Map Markers</h4>
|
|
<div className="flex items-center gap-2 p-1.5 hover:bg-white/5 rounded-md transition-colors">
|
|
<AlertCircle className="h-4 w-4 text-red-500" />
|
|
<span>Individual Incident</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 p-1.5 hover:bg-white/5 rounded-md transition-colors">
|
|
<div className="w-5 h-5 rounded-full bg-pink-400 flex items-center justify-center text-[10px] text-white">5</div>
|
|
<span className="font-bold">Incident Cluster</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</SidebarSection>
|
|
|
|
<SidebarSection title="About" icon={<Info className="h-4 w-4 text-green-400" />}>
|
|
<Card className="bg-gradient-to-r from-zinc-800/80 to-zinc-900/80 border border-white/10">
|
|
<CardContent className="p-4 text-xs">
|
|
<p className="mb-3">
|
|
SIGAP Crime Map provides real-time visualization and analysis
|
|
of crime incidents across Jember region.
|
|
</p>
|
|
<p>
|
|
Data is sourced from official police reports and updated
|
|
daily to ensure accurate information.
|
|
</p>
|
|
<div className="mt-3 p-2 bg-white/5 rounded-lg text-white/60">
|
|
<div className="flex justify-between">
|
|
<span>Version</span>
|
|
<span className="font-medium">1.2.4</span>
|
|
</div>
|
|
<div className="flex justify-between mt-1">
|
|
<span>Last Updated</span>
|
|
<span className="font-medium">June 18, 2024</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</SidebarSection>
|
|
|
|
<SidebarSection title="How to Use" icon={<Eye className="h-4 w-4 text-green-400" />}>
|
|
<Card className="bg-gradient-to-r from-zinc-800/80 to-zinc-900/80 border border-white/10">
|
|
<CardContent className="p-4 text-xs space-y-3">
|
|
<div className="flex gap-3 items-start">
|
|
<div className="bg-emerald-900/50 p-1.5 rounded-md">
|
|
<Filter className="h-3.5 w-3.5 text-emerald-400" />
|
|
</div>
|
|
<div>
|
|
<span className="font-medium">Filtering</span>
|
|
<p className="text-white/70 mt-1">
|
|
Use the year, month, and category filters at the top to
|
|
refine the data shown on the map.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-3 items-start">
|
|
<div className="bg-emerald-900/50 p-1.5 rounded-md">
|
|
<MapPin className="h-3.5 w-3.5 text-emerald-400" />
|
|
</div>
|
|
<div>
|
|
<span className="font-medium">District Information</span>
|
|
<p className="text-white/70 mt-1">
|
|
Click on any district to view detailed crime statistics for that area.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-3 items-start">
|
|
<div className="bg-emerald-900/50 p-1.5 rounded-md">
|
|
<AlertTriangle className="h-3.5 w-3.5 text-emerald-400" />
|
|
</div>
|
|
<div>
|
|
<span className="font-medium">Incidents</span>
|
|
<p className="text-white/70 mt-1">
|
|
Click on incident markers to view details about specific crime reports.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</SidebarSection>
|
|
</>
|
|
)
|
|
}
|