Added new component
This commit is contained in:
parent
13070ea0f7
commit
15e0999e11
2 changed files with 21 additions and 0 deletions
4
src/components/ColorSwatch/ColorSwatch.sass
Normal file
4
src/components/ColorSwatch/ColorSwatch.sass
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.colorswatch
|
||||
height: 56px
|
||||
width: 56px
|
||||
border-radius: 8px
|
||||
17
src/components/ColorSwatch/ColorSwatch.tsx
Normal file
17
src/components/ColorSwatch/ColorSwatch.tsx
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import './ColorSwatch.sass'
|
||||
import { Show } from 'solid-js'
|
||||
|
||||
export default (props: { color: string; height?: number, width?: number; isPreset?: boolean; onClick?: () => void }) => {
|
||||
return (
|
||||
<>
|
||||
<Show when={props.isPreset}>
|
||||
<section class='colorswatch' style={`background-color: ${props.color}; height: ${props.height}rem; width: ${props.width}rem; cursor: pointer;`} onClick={props.onClick} />
|
||||
</Show>
|
||||
|
||||
<Show when={!props.isPreset}>
|
||||
<section class='colorswatch' style={`background-color: ${props.color}; height: ${props.height}rem; width: ${props.width}rem;`} />
|
||||
</Show>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue