39 lines
963 B
TypeScript
39 lines
963 B
TypeScript
import { Flex, Text } from '@chakra-ui/react'
|
|
import { Background, BackgroundType } from 'models'
|
|
import React from 'react'
|
|
import { ColorPicker } from '../ColorPicker'
|
|
|
|
type BackgroundContentProps = {
|
|
background: Background
|
|
onBackgroundContentChange: (content: string) => void
|
|
}
|
|
|
|
export const BackgroundContent = ({
|
|
background,
|
|
onBackgroundContentChange,
|
|
}: BackgroundContentProps) => {
|
|
const handleContentChange = (content: string) =>
|
|
onBackgroundContentChange(content)
|
|
|
|
switch (background.type) {
|
|
case BackgroundType.COLOR:
|
|
return (
|
|
<Flex justify="space-between" align="center">
|
|
<Text>Background color:</Text>
|
|
<ColorPicker
|
|
initialColor={background.content}
|
|
onColorChange={handleContentChange}
|
|
/>
|
|
</Flex>
|
|
)
|
|
case BackgroundType.IMAGE:
|
|
return (
|
|
<Flex>
|
|
<Text>Image</Text>
|
|
</Flex>
|
|
)
|
|
default:
|
|
return <></>
|
|
}
|
|
}
|