import { ChevronDownIcon } from '@chakra-ui/icons'
import {
Box,
Button,
Collapse,
Flex,
Menu,
MenuButton,
MenuItem,
MenuList,
Portal,
StackDivider,
VStack,
Text,
} from '@chakra-ui/react'
import React from 'react'
import { ColorMenu } from './ColorMenu'
import { colorList, initialVisuals } from './config'
import { SliderWithInfo } from './SliderWithInfo'
export interface LabelsPanelProps {
visuals: typeof initialVisuals
setVisuals: any
}
export const LabelsPanel = (props: LabelsPanelProps) => {
const { visuals, setVisuals } = props
return (
}
align="stretch"
color="gray.800"
>
Show labels
}
align="stretch"
paddingLeft={2}
color="gray.800"
>
setVisuals({ ...visuals, labelFontSize: value })}
/>
setVisuals({ ...visuals, labelLength: value })}
/>
setVisuals({ ...visuals, labelWordWrap: value })}
/>
setVisuals({ ...visuals, labelLineSpace: value })}
/>
{
console.log(visuals.labelBackgroundOpacity)
setVisuals({ ...visuals, labelBackgroundOpacity: value })
}}
min={0}
max={1}
step={0.01}
/>
1} animateOpacity>
setVisuals({ ...visuals, labelScale: value / 5 })}
/>
)
}