61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
|
import {
|
||
|
|
AccordionItem,
|
||
|
|
AccordionButton,
|
||
|
|
HStack,
|
||
|
|
Heading,
|
||
|
|
AccordionIcon,
|
||
|
|
AccordionPanel,
|
||
|
|
Stack,
|
||
|
|
} from '@chakra-ui/react'
|
||
|
|
import { PencilIcon } from 'assets/icons'
|
||
|
|
import { Background } from 'bot-engine'
|
||
|
|
import { useTypebot } from 'contexts/TypebotContext'
|
||
|
|
import React from 'react'
|
||
|
|
import { BackgroundSelector } from './BackgroundSelector'
|
||
|
|
import { FontSelector } from './FontSelector'
|
||
|
|
|
||
|
|
export const GeneralContent = () => {
|
||
|
|
const { typebot, updateTheme } = useTypebot()
|
||
|
|
|
||
|
|
const handleSelectFont = (font: string) => {
|
||
|
|
if (!typebot) return
|
||
|
|
updateTheme({
|
||
|
|
...typebot.theme,
|
||
|
|
general: { ...typebot.theme.general, font },
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleBackgroundChange = (background: Background) => {
|
||
|
|
if (!typebot) return
|
||
|
|
updateTheme({
|
||
|
|
...typebot.theme,
|
||
|
|
general: { ...typebot.theme.general, background },
|
||
|
|
})
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<AccordionItem>
|
||
|
|
<AccordionButton py={6}>
|
||
|
|
<HStack flex="1" pl={2}>
|
||
|
|
<PencilIcon />
|
||
|
|
<Heading fontSize="lg" color="gray.700">
|
||
|
|
General
|
||
|
|
</Heading>
|
||
|
|
</HStack>
|
||
|
|
<AccordionIcon />
|
||
|
|
</AccordionButton>
|
||
|
|
{typebot && (
|
||
|
|
<AccordionPanel as={Stack} pb={4} spacing={6}>
|
||
|
|
<FontSelector
|
||
|
|
activeFont={typebot.theme.general.font}
|
||
|
|
onSelectFont={handleSelectFont}
|
||
|
|
/>
|
||
|
|
<BackgroundSelector
|
||
|
|
initialBackground={typebot.theme.general.background}
|
||
|
|
onBackgroundChange={handleBackgroundChange}
|
||
|
|
/>
|
||
|
|
</AccordionPanel>
|
||
|
|
)}
|
||
|
|
</AccordionItem>
|
||
|
|
)
|
||
|
|
}
|