32 lines
1.1 KiB
TypeScript
32 lines
1.1 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import { useTranslations } from 'next-intl'
|
||
|
|
import { CROP_COLORS, type CropType } from './cropZoningTypes'
|
||
|
|
|
||
|
|
export default function ZoneLegend() {
|
||
|
|
const t = useTranslations('cropZoning')
|
||
|
|
|
||
|
|
const items: { crop: CropType; label: string }[] = [
|
||
|
|
{ crop: 'wheat', label: t('crops.wheat') },
|
||
|
|
{ crop: 'canola', label: t('crops.canola') },
|
||
|
|
{ crop: 'saffron', label: t('crops.saffron') }
|
||
|
|
]
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className='absolute bottom-4 start-4 z-[1000] rounded-xl border border-white/20 bg-white/70 px-4 py-3 shadow-lg backdrop-blur-md dark:bg-gray-900/70 dark:border-gray-700/50'>
|
||
|
|
<div className='text-xs font-medium text-gray-600 dark:text-gray-400 mbe-2'>{t('legend')}</div>
|
||
|
|
<div className='flex flex-col gap-1.5'>
|
||
|
|
{items.map(({ crop, label }) => (
|
||
|
|
<div key={crop} className='flex items-center gap-2'>
|
||
|
|
<div
|
||
|
|
className='h-4 w-4 rounded'
|
||
|
|
style={{ backgroundColor: CROP_COLORS[crop], opacity: 0.8 }}
|
||
|
|
/>
|
||
|
|
<span className='text-sm text-gray-700 dark:text-gray-300'>{label}</span>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|