import { Flex , Img , VStack } from "@chakra-ui/react" ; import React , { FC } from "react" ; import { useDispatch , useSelector } from "react-redux" ; import { getCurrentPageData } from "selectors/site" ; import { updateTemplateSectionMeta } from "slices/site" ; interface IProps { positionOfSection : number ; } const FeaturesSectionEditorLayoutsPanel = ( { positionOfSection , } ) => { const dispatch = useDispatch ( ) ; const currentPageId = useSelector ( getCurrentPageData ( ) ) ; const handleChange = ( layoutId ) => { dispatch ( updateTemplateSectionMeta ( { currentPageId , positionOfSection , itemType : "layout" , value : layoutId , } ) ) ; } ; const imagesNode = ( ) => { const layouts = [ { key : "one" , label : "First layout" , } , { key : "two" , label : "Second layout" , } , { key : "three" , label : "Third layout" , } , ] ; return layouts . map ( ( layout , index ) => { return ( < Flex key = { index } as = "button" onClick = { ( ) => handleChange ( layout . key ) } borderWidth = { 1 } alignItems = "center" rounded = "lg" _hover = { { shadow : "lg" , } } > < Img src = { `/images/section-layouts/features/${ index + 1 }.png` } alt = { `Layout ${ layout . key }` } rounded = "lg" / > < /Flex>); } ) ; } ; return ( < VStack spacing = { 4 } align = "stretch" > { imagesNode ( ) } < /VStack>); } ; export default FeaturesSectionEditorLayoutsPanel ;