import { FormControl , FormLabel , Input , VStack } from "@chakra-ui/react" ; import React , { ChangeEvent , FC } from "react" ; import { useDispatch , useSelector } from "react-redux" ; import { getCurrentPageData , getSectionData } from "selectors/site" ; import { updateTemplateSectionData , updateTemplateSectionMeta , } from "slices/site" ; interface IProps { positionOfSection : number ; } const TextSectionEditorTextPanel = ( { positionOfSection } ) => { const dispatch = useDispatch ( ) ; const currentPageId = useSelector ( getCurrentPageData ( ) ) ; const { meta } = useSelector ( getSectionData ( currentPageId , positionOfSection ) ) ; const handleMetaChange = ( itemType , value ) => { dispatch ( updateTemplateSectionMeta ( { currentPageId , positionOfSection , itemType , value , } ) ) ; } ; const handleDataChange = ( itemPosition , itemType , value ) => { dispatch ( updateTemplateSectionData ( { currentPageId , positionOfSection , itemType : "buttons" , itemPosition , key : itemType , value , } ) ) ; } ; return ( < VStack spacing = { 4 } align = "stretch" > < FormControl > < FormLabel > Heading < /FormLabel> < Input size = "sm" rounded = "lg" value = { meta . heading } onChange = { ( e ) => handleMetaChange ( "heading" , e . currentTarget . value ) } /> < /FormControl> < FormControl > < FormLabel > Sub heading < /FormLabel> < Input size = "sm" rounded = "lg" value = { meta . subHeading } onChange = { ( e ) => handleMetaChange ( "subHeading" , e . currentTarget . value ) } /> < /FormControl> < /VStack>); } ; export default TextSectionEditorTextPanel ;