folder shuffling + ColorPicker componentization

src/components/CodeBlocks/Css.tsx

@@ -1,13 +1,11 @@
-import { Form, Switch, Button, Popover, Select } from 'antd';
+import { Form, Switch, 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 { breakpoints } from '../layout';
 import { rgbToString } from './Output';
-import { SectionTitle } from './SectionTitle';
-import SliderInput from './SliderInput';
+import { SectionTitle, SliderInput, ChromePickerColor, ColorPicker } from './subcomponents';
 import { ColorType, useInputStore } from '~/components/store';
 
 export const CssControls: React.FC = () => {
@@ -72,41 +70,17 @@ export const CssControls: React.FC = () => {
               <Select.Option value="conic">conic</Select.Option>
             </Select>
           </Form.Item>
-          <ColorPick>
-            <Popover
-              placement="bottom"
-              style={{ padding: 0 }}
-              content={
-                <ChromePicker
-                  color={color1}
-                  onChange={(c: ChromePickerColor) => setValues('color1', c.rgb)}
-                />
-              }
-              trigger="click"
-            >
-              <ColorAndButton>
-                <ColorSample color={rgbToString(color1)} />
-                <Button>Color 1</Button>
-              </ColorAndButton>
-            </Popover>
-          </ColorPick>
-          <ColorPick>
-            <Popover
-              placement="bottom"
-              content={
-                <ChromePicker
-                  color={color2}
-                  onChange={(c: ChromePickerColor) => setValues('color2', c.rgb)}
-                />
-              }
-              trigger="click"
-            >
-              <ColorAndButton>
-                <ColorSample color={rgbToString(color2)} />
-                <Button>Color 2</Button>
-              </ColorAndButton>
-            </Popover>
-          </ColorPick>
+          <ColorPicker
+            label="Color 1"
+            color={color1}
+            style={{ padding: 0 }}
+            onChange={(c: ChromePickerColor) => setValues('color1', c.rgb)}
+          />
+          <ColorPicker
+            label="Color 2"
+            color={color2}
+            onChange={(c: ChromePickerColor) => setValues('color2', c.rgb)}
+          />
         </GradientControls>
 
         {['linear', 'conic'].includes(gradientType) && (
@@ -152,46 +126,9 @@ export const CssControls: React.FC = () => {
   );
 };
 
-//https://casesandberg.github.io/react-color/
-type ChromePickerColor = {
-  hex: string;
-  rgb: {
-    r: number;
-    g: number;
-    b: number;
-    a: number;
-  };
-  hsl: {
-    h: number;
-    s: number;
-    l: number;
-    a: number;
-  };
-};
-
 const GradientControls = styled.div`
   display: flex;
   @media screen and (max-width: ${breakpoints.md - 1}px) {
     flex-direction: column;
   }
 `;
-
-const ColorPick = styled.div`
-  margin-left: 15px;
-  @media screen and (max-width: ${breakpoints.md - 1}px) {
-    margin: 10px 0;
-  }
-`;
-
-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;
-`;

src/components/CodeBlocks/Filter.tsx

@@ -3,8 +3,7 @@ import hljs from 'highlight.js/lib/core';
 import React, { useState } from 'react';
 import shallow from 'zustand/shallow';
 import { symbols, rgbToString } from './Output';
-import { SectionTitle } from './SectionTitle';
-import SliderInput from './SliderInput';
+import { SectionTitle, SliderInput } from './subcomponents';
 import { useInputStore } from '~/components/store';
 
 export const FilterControls: React.FC = () => {

src/components/CodeBlocks/Svg.tsx

@@ -2,8 +2,7 @@ import { Form } from 'antd';
 import hljs from 'highlight.js/lib/core';
 import React, { useEffect } from 'react';
 import shallow from 'zustand/shallow';
-import { SectionTitle } from './SectionTitle';
-import SliderInput from './SliderInput';
+import { SectionTitle, SliderInput } from './subcomponents';
 import { useInputStore } from '~/components/store';
 
 export const SvgControls: React.FC = () => {

src/components/CodeBlocks/index.tsx

@@ -8,4 +8,4 @@ hljs.registerLanguage('xml', xmlLang);
 export * from './Svg';
 export * from './Css';
 export * from './Filter';
-export * from './Reset';
+export * from './subcomponents';

src/components/CodeBlocks/subcomponents/ColorPicker.tsx

@@ -0,0 +1,76 @@
+import { Button, Popover } from 'antd';
+import { TooltipPlacement } from 'antd/lib/tooltip';
+import React from 'react';
+import { ChromePicker } from 'react-color';
+import styled from 'styled-components';
+import { rgbToString } from '~/components/CodeBlocks/Output';
+import { breakpoints } from '~/components/layout';
+import { ColorType } from '~/components/store';
+
+interface IColorPicker {
+  color: ColorType;
+  onChange: (c: ChromePickerColor) => void;
+  label: string;
+  style?: React.CSSProperties;
+  tooltipPlacement?: TooltipPlacement;
+}
+export const ColorPicker: React.FC<IColorPicker> = ({
+  style,
+  label,
+  color,
+  onChange,
+  tooltipPlacement,
+}) => {
+  return (
+    <ColorPick>
+      <Popover
+        placement={tooltipPlacement || 'bottom'}
+        style={style || {}}
+        content={<ChromePicker color={color} onChange={onChange} />}
+        trigger="click"
+      >
+        <ColorAndButton>
+          <ColorSample color={rgbToString(color)} />
+          <Button>{label}</Button>
+        </ColorAndButton>
+      </Popover>
+    </ColorPick>
+  );
+};
+
+//https://casesandberg.github.io/react-color/
+export type ChromePickerColor = {
+  hex: string;
+  rgb: {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+  };
+  hsl: {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+  };
+};
+
+const ColorPick = styled.div`
+  margin-left: 15px;
+  @media screen and (max-width: ${breakpoints.md - 1}px) {
+    margin: 10px 0;
+  }
+`;
+
+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;
+`;

src/components/CodeBlocks/SliderInput.tsx → src/components/CodeBlocks/subcomponents/SliderInput.tsx

@@ -12,7 +12,7 @@ interface ISliderInput {
   step?: number;
   tipFormatter?: (val: number) => string;
 }
-const SliderInput: React.FC<ISliderInput> = (props) => {
+export const SliderInput: React.FC<ISliderInput> = (props) => {
   const { label, name, onChange, value, min, max, step, tipFormatter } = props;
   return (
     <Form.Item label={label} name={name} style={{ width: '100%', margin: 0 }}>
@@ -40,8 +40,6 @@ const SliderInput: React.FC<ISliderInput> = (props) => {
   );
 };
 
-export default SliderInput;
-
 const SliderContainer = styled.div`
   width: 40%;
   @media screen and (max-width: ${breakpoints.md - 1}px) {

src/components/CodeBlocks/subcomponents/index.tsx

@@ -0,0 +1,4 @@
+export * from './ColorPicker';
+export * from './Reset';
+export * from './SectionTitle';
+export * from './SliderInput';