57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
|
import { Heading, Stack } from '@chakra-ui/react'
|
||
|
|
import { ChatTheme, ContainerColors, InputColors } from 'models'
|
||
|
|
import React from 'react'
|
||
|
|
import { ButtonsTheme } from './ButtonsTheme'
|
||
|
|
import { GuestBubbles } from './GuestBubbles'
|
||
|
|
import { HostBubbles } from './HostBubbles'
|
||
|
|
import { InputsTheme } from './InputsTheme'
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
chatTheme?: ChatTheme
|
||
|
|
onChatThemeChange: (chatTheme: ChatTheme) => void
|
||
|
|
}
|
||
|
|
|
||
|
|
export const ChatThemeSettings = ({ chatTheme, onChatThemeChange }: Props) => {
|
||
|
|
const handleHostBubblesChange = (hostBubbles: ContainerColors) =>
|
||
|
|
onChatThemeChange({ ...chatTheme, hostBubbles })
|
||
|
|
const handleGuestBubblesChange = (guestBubbles: ContainerColors) =>
|
||
|
|
onChatThemeChange({ ...chatTheme, guestBubbles })
|
||
|
|
const handleButtonsChange = (buttons: ContainerColors) =>
|
||
|
|
onChatThemeChange({ ...chatTheme, buttons })
|
||
|
|
const handleInputsChange = (inputs: InputColors) =>
|
||
|
|
onChatThemeChange({ ...chatTheme, inputs })
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Stack spacing={6}>
|
||
|
|
<Stack borderWidth={1} rounded="md" p="4" spacing={4}>
|
||
|
|
<Heading fontSize="lg">Bot bubbles</Heading>
|
||
|
|
<HostBubbles
|
||
|
|
hostBubbles={chatTheme?.hostBubbles}
|
||
|
|
onHostBubblesChange={handleHostBubblesChange}
|
||
|
|
/>
|
||
|
|
</Stack>
|
||
|
|
<Stack borderWidth={1} rounded="md" p="4" spacing={4}>
|
||
|
|
<Heading fontSize="lg">User bubbles</Heading>
|
||
|
|
<GuestBubbles
|
||
|
|
guestBubbles={chatTheme?.guestBubbles}
|
||
|
|
onGuestBubblesChange={handleGuestBubblesChange}
|
||
|
|
/>
|
||
|
|
</Stack>
|
||
|
|
<Stack borderWidth={1} rounded="md" p="4" spacing={4}>
|
||
|
|
<Heading fontSize="lg">Buttons</Heading>
|
||
|
|
<ButtonsTheme
|
||
|
|
buttons={chatTheme?.buttons}
|
||
|
|
onButtonsChange={handleButtonsChange}
|
||
|
|
/>
|
||
|
|
</Stack>
|
||
|
|
<Stack borderWidth={1} rounded="md" p="4" spacing={4}>
|
||
|
|
<Heading fontSize="lg">Inputs</Heading>
|
||
|
|
<InputsTheme
|
||
|
|
inputs={chatTheme?.inputs}
|
||
|
|
onInputsChange={handleInputsChange}
|
||
|
|
/>
|
||
|
|
</Stack>
|
||
|
|
</Stack>
|
||
|
|
)
|
||
|
|
}
|