feat: add ColorSelect

src/components/Dash/ColorSelect/index.tsx

@@ -0,0 +1,84 @@
+import { useState } from 'react'
+
+import { useData } from '../../../hooks/useData'
+import type { Colors } from '../../../styles/stitches.config'
+import { theme } from '../../../styles/stitches.config'
+import { Color, SelectButton, Wrapper } from './styles'
+
+type ColorSelectProps = {
+  prop: 'texts' | 'socialLinks' | 'background' | 'buttonLinks'
+}
+
+export function ColorSelect({ prop }: ColorSelectProps) {
+  const { data, setData } = useData()
+  const [activeColor, setActiveColor] = useState<string>(data.settings.colors[prop] as string)
+
+  const allColors = Object.keys(theme.colors) as Colors[]
+  const colorsSchema = [
+    'slate',
+    'red',
+    'orange',
+    'amber',
+    'yellow',
+    'lime',
+    'green',
+    'emerald',
+    'teal',
+    'cyan',
+    'sky',
+    'blue',
+    'indigo',
+    'violet',
+    'purple',
+    'fuchsia',
+    'pink',
+    'rose'
+  ]
+
+  const colors = {
+    texts: allColors,
+    socialLinks: colorsSchema,
+    background: allColors,
+    buttonLinks: colorsSchema
+  }[prop]
+
+  const backgroundColor = (color: string) => {
+    if (prop === 'background' || prop === 'texts') {
+      return theme.colors[color as Colors]
+    }
+
+    return theme.colors[`${color}600` as Colors]
+  }
+
+  const handleChange = (color: string) => {
+    setActiveColor(color)
+    setData({
+      ...data,
+      settings: {
+        ...data.settings,
+        colors: {
+          ...data.settings.colors,
+          [prop]: color
+        }
+      }
+    })
+  }
+
+  return (
+    <Wrapper>
+      {colors.map(color => (
+        <SelectButton
+          key={color}
+          active={color === activeColor}
+          onClick={() => handleChange(color)}
+        >
+          <Color
+            css={{
+              backgroundColor: backgroundColor(color)
+            }}
+          />
+        </SelectButton>
+      ))}
+    </Wrapper>
+  )
+}

src/components/Dash/ColorSelect/styles.ts

@@ -0,0 +1,32 @@
+import { styled, theme } from '../../../styles/stitches.config'
+
+export const Wrapper = styled('div', {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(10, 1fr)',
+  gridGap: '0.5rem'
+})
+
+export const SelectButton = styled('button', {
+  width: '100%',
+  height: '3rem',
+  padding: '0.25rem',
+  borderRadius: '0.25rem',
+  borderWidth: '3px',
+  borderStyle: 'solid',
+  borderColor: theme.colors.slate200,
+  cursor: 'pointer',
+
+  variants: {
+    active: {
+      true: {
+        borderColor: theme.colors.sky500
+      }
+    }
+  }
+})
+
+export const Color = styled('div', {
+  width: '100%',
+  height: '100%',
+  borderRadius: '0.25rem'
+})

src/components/Dash/index.tsx

@@ -4,16 +4,16 @@ import { useEffect, useState } from 'react'
 
 import { useData } from '../../hooks/useData'
 import { api } from '../../services/api'
-import type { Colors, Fonts } from '../../styles/stitches.config'
-import { theme } from '../../styles/stitches.config'
+import type { Fonts } from '../../styles/stitches.config'
 import type { Data } from '../../types/Data'
 import {
   getLocalStorageData,
   removeLocalStorageData,
   setLocalStorageData
 } from '../../utils/localStorage'
-import type { ButtonVariantProps } from '../Button'
+import { ButtonVariantProps } from '../Button'
 import { Home } from '../Home'
+import { ColorSelect } from './ColorSelect'
 import { DescriptionInput } from './DescriptionInput'
 import { NameInput } from './NameInput'
 import { Content, Preview, Wrapper } from './styles'
@@ -56,14 +56,7 @@ export function Dash({ initialData }: DashProps) {
     }
   }
 
-  const handleChangeBackground = (background: Colors) => {
-    setData({
-      ...data,
-      settings: { ...data.settings, colors: { ...data.settings.colors, background } }
-    })
-  }
-
-  const handleChangeButtonsSchema = (schema: ButtonVariantProps['schema']) => {
+  const handleChangeButtonsSchema = (schema: ButtonVariantProps['styleSchema']) => {
     setData({ ...data, settings: { ...data.settings, buttonsSchema: schema } })
   }
 
@@ -98,20 +91,16 @@ export function Dash({ initialData }: DashProps) {
           <option value="roboto">Roboto</option>
         </select>
 
-        <select
-          value={data.settings.colors.background}
-          onChange={e => handleChangeBackground(e.target.value as Colors)}
-        >
-          {Object.keys(theme.colors).map(color => (
-            <option key={color} value={color}>
-              {color}
-            </option>
-          ))}
-        </select>
+        <ColorSelect prop="texts" />
+        <ColorSelect prop="socialLinks" />
+        <ColorSelect prop="buttonLinks" />
+        <ColorSelect prop="background" />
 
         <select
           value={data.settings.buttonsSchema as string}
-          onChange={e => handleChangeButtonsSchema(e.target.value as ButtonVariantProps['schema'])}
+          onChange={e =>
+            handleChangeButtonsSchema(e.target.value as ButtonVariantProps['styleSchema'])
+          }
         >
           <option value="square">Square</option>
           <option value="rounded">Rounded</option>