44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import { useTranslations } from 'next-intl'
|
||
|
|
import IconButton from '@mui/material/IconButton'
|
||
|
|
import type { LayerType } from './cropZoningTypes'
|
||
|
|
|
||
|
|
const LAYER_ICONS: Record<LayerType, string> = {
|
||
|
|
crops: 'tabler-plant-2',
|
||
|
|
waterNeed: 'tabler-droplet',
|
||
|
|
soilQuality: 'tabler-seedling',
|
||
|
|
cultivationRisk: 'tabler-alert-triangle'
|
||
|
|
}
|
||
|
|
|
||
|
|
type LayerControlProps = {
|
||
|
|
activeLayer: LayerType
|
||
|
|
onLayerChange: (layer: LayerType) => void
|
||
|
|
}
|
||
|
|
|
||
|
|
const LAYER_ORDER: LayerType[] = ['crops', 'waterNeed', 'soilQuality', 'cultivationRisk']
|
||
|
|
|
||
|
|
export default function LayerControl({ activeLayer, onLayerChange }: LayerControlProps) {
|
||
|
|
const t = useTranslations('cropZoning')
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className='absolute top-4 end-4 z-[1000] flex flex-col gap-1 rounded-xl border border-white/20 bg-white/70 py-2 shadow-lg backdrop-blur-md dark:bg-gray-900/70 dark:border-gray-700/50'>
|
||
|
|
{LAYER_ORDER.map(layer => (
|
||
|
|
<IconButton
|
||
|
|
key={layer}
|
||
|
|
size='small'
|
||
|
|
onClick={() => onLayerChange(layer)}
|
||
|
|
title={t(`layers.${layer}`)}
|
||
|
|
sx={{
|
||
|
|
mx: 0.5,
|
||
|
|
bgcolor: activeLayer === layer ? 'action.selected' : 'transparent',
|
||
|
|
'&:hover': { bgcolor: activeLayer === layer ? 'action.selected' : 'action.hover' }
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<i className={`${LAYER_ICONS[layer]} text-lg`} />
|
||
|
|
</IconButton>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|