74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
import { ImageUploadContent } from '@/components/ImageUploadContent'
|
|
import { useTypebot } from '@/features/editor/providers/TypebotProvider'
|
|
import {
|
|
Flex,
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
Text,
|
|
Image,
|
|
Button,
|
|
} from '@chakra-ui/react'
|
|
import { isNotEmpty } from '@typebot.io/lib'
|
|
import { Background, BackgroundType } from '@typebot.io/schemas'
|
|
import React from 'react'
|
|
import { ColorPicker } from '../../../../components/ColorPicker'
|
|
|
|
type BackgroundContentProps = {
|
|
background?: Background
|
|
onBackgroundContentChange: (content: string) => void
|
|
}
|
|
|
|
const defaultBackgroundColor = '#ffffff'
|
|
|
|
export const BackgroundContent = ({
|
|
background,
|
|
onBackgroundContentChange,
|
|
}: BackgroundContentProps) => {
|
|
const { typebot } = useTypebot()
|
|
const handleContentChange = (content: string) =>
|
|
onBackgroundContentChange(content)
|
|
|
|
switch (background?.type) {
|
|
case BackgroundType.COLOR:
|
|
return (
|
|
<Flex justify="space-between" align="center">
|
|
<Text>Background color:</Text>
|
|
<ColorPicker
|
|
value={background.content ?? defaultBackgroundColor}
|
|
onColorChange={handleContentChange}
|
|
/>
|
|
</Flex>
|
|
)
|
|
case BackgroundType.IMAGE:
|
|
return (
|
|
<Popover isLazy placement="top">
|
|
<PopoverTrigger>
|
|
{isNotEmpty(background.content) ? (
|
|
<Image
|
|
src={background.content}
|
|
alt="Background image"
|
|
cursor="pointer"
|
|
_hover={{ filter: 'brightness(.9)' }}
|
|
transition="filter 200ms"
|
|
rounded="md"
|
|
/>
|
|
) : (
|
|
<Button>Select an image</Button>
|
|
)}
|
|
</PopoverTrigger>
|
|
<PopoverContent p="4">
|
|
<ImageUploadContent
|
|
filePath={`typebots/${typebot?.id}/background`}
|
|
defaultUrl={background.content}
|
|
onSubmit={handleContentChange}
|
|
isGiphyEnabled={false}
|
|
/>
|
|
</PopoverContent>
|
|
</Popover>
|
|
)
|
|
default:
|
|
return <></>
|
|
}
|
|
}
|