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