show color preview

src/components/CodeBlocks/Css.tsx

@@ -1,14 +1,15 @@
 import { Form, Switch, Button, Popover, Select } from 'antd';
 import hljs from 'highlight.js/lib/core';
+import React from 'react';
 import { ChromePicker } from 'react-color';
 import styled from 'styled-components';
 import shallow from 'zustand/shallow';
 import { rgbToString } from './Output';
 import { SectionTitle } from './SectionTitle';
 import SliderInput from './SliderInput';
-import { useInputStore } from '~/components/store';
+import { ColorType, useInputStore } from '~/components/store';
 
-export const CssControls = () => {
+export const CssControls: React.FC = () => {
   const [setCssProps, cssProps, filterProps] = useInputStore(
     (state) => [state.setCssProps, state.cssProps, state.filterProps],
     shallow
@@ -79,7 +80,10 @@ export const CssControls = () => {
               content={<ChromePicker color={color1} onChange={(c) => setValues('color1', c.rgb)} />}
               trigger="click"
             >
-              <Button>Color 1</Button>
+              <ColorAndButton>
+                <ColorSample color={rgbToString(color1)} />
+                <Button>Color 1</Button>
+              </ColorAndButton>
             </Popover>
           </ColorPick>
           <ColorPick>
@@ -88,7 +92,10 @@ export const CssControls = () => {
               content={<ChromePicker color={color2} onChange={(c) => setValues('color2', c.rgb)} />}
               trigger="click"
             >
-              <Button>Color 2</Button>
+              <ColorAndButton>
+                <ColorSample color={rgbToString(color2)} />
+                <Button>Color 2</Button>
+              </ColorAndButton>
             </Popover>
           </ColorPick>
         </GradientControls>
@@ -143,3 +150,16 @@ const GradientControls = styled.div`
 const ColorPick = styled.div`
   margin-left: 15px;
 `;
+
+const ColorSample = styled.div`
+  width: 30px;
+  height: 30px;
+  background: linear-gradient(0, ${p=>p.color}, ${p=>p.color}), url(/checkers.png);
+  border-radius: 1px;
+  cursor: pointer;
+`;
+
+const ColorAndButton = styled.div`
+  display: flex;
+  align-items: center;
+`;