Fixed ui

src/components/PageComponents/Color-Converter/ColorConverterComponent.sass

@@ -4,10 +4,84 @@
 
 .section
   display: flex
-  flex-direction: column
+  flex-direction: row
   align-items: flex-start
   padding: 2rem
-  border: 2px solid color.adjust(vars.$background, $lightness: 6%)
+  border: vars.$componentBorder
   border-radius: vars.$borderRadius
+  background-color: vars.$componentBackground
   color: #ffffff
   gap: 2rem
+
+  &__input
+    display: flex
+    flex-direction: column
+    align-items: flex-start
+    gap: 1rem
+
+    &__presets
+      display: flex
+      flex-direction: row
+      gap: 0.25rem
+
+    &__selector
+      margin: 2rem 0 0 0
+
+      &__root
+        // position: relative
+        display: flex
+        flex-direction: column
+        align-items: center
+        user-select: none
+        touch-action: none
+
+      &__background
+        position: relative
+        border-radius: 6px
+        height: 15.75rem
+        width: 18.85rem
+
+      &__thumb
+        display: block
+        width: 16px
+        height: 16px
+        border-radius: 9999px
+        border: 2px solid #fff
+        background: var(--kb-color-current)
+
+        &:focus
+          outline: none
+
+  &__results
+    @extend .section__input
+
+// .ColorAreaRoot
+//   position: relative
+//   display: flex
+//   flex-direction: column
+//   align-items: center
+//   user-select: none
+//   touch-action: none
+//   width: 200px
+
+// .ColorAreaBackground
+//   position: relative
+//   border-radius: 6px
+//   height: 150px
+//   width: 150px
+
+// .ColorAreaThumb
+//   display: block
+//   width: 16px
+//   height: 16px
+//   border-radius: 9999px
+//   border: 2px solid #fff
+//   background: var(--kb-color-current)
+
+//   &:focus
+//     outline: none
+
+.ColorArealLabel
+  font-size: 14px
+  font-weight: 500
+  user-select: none

src/components/PageComponents/Color-Converter/ColorConverterComponent.tsx

@@ -1,10 +1,108 @@
 import './ColorConverterComponent.sass'
+import ColorSwatch from '../../ColorSwatch/ColorSwatch';
+import MiniCard from '../../MiniCard/MiniCard';
+import Alert from '../../Alert/Alert.tsx'
+import { createSignal, onMount } from "solid-js"
+import { colord, extend, random } from 'colord';
+import cmykPlugin from "colord/plugins/cmyk";
+import namesPlugin from "colord/plugins/names";
+import hwbPlugin from "colord/plugins/hwb";
+import { ColorArea } from "@kobalte/core/color-area";
+import { parseColor } from "@kobalte/core/colors";
+
+extend([cmykPlugin, namesPlugin, hwbPlugin]);
 
 export default () => {
+  const [color, setColor] = createSignal(parseColor("#ffffff"))
+  const [presetOne, setPresetOne] = createSignal("")
+  const [presetTwo, setPresetTwo] = createSignal("")
+  const [presetThree, setPresetThree] = createSignal("")
+  const [presetFour, setPresetFour] = createSignal("")
+  const [presetFive, setPresetFive] = createSignal("")
+  const [presetSix, setPresetSix] = createSignal("")
+  const [copiedText, setCopiedText] = createSignal('')
+
+  const hex = () => colord(color().toString()).toHex().toUpperCase()
+  const rgb = () => colord(color().toString()).toRgbString().toUpperCase()
+  const hsl = () => colord(color().toString()).toHslString().toUpperCase()
+  const cmyk = () => colord(color().toString()).toCmykString().substring(7).toUpperCase()
+  const hwb = () => colord(color().toString()).toHwbString().toUpperCase()
+
+  const randomColor = () => colord(random().toHex()).toHex()
+
+  const setPresets = () => {
+    setPresetOne(randomColor())
+    setPresetTwo(randomColor())
+    setPresetThree(randomColor())
+    setPresetFour(randomColor())
+    setPresetFive(randomColor())
+    setPresetSix(randomColor())
+  }
+
+  const copyToClipboard = async (text: string, alertType: string) => {
+    try {
+      navigator.clipboard.writeText(text)
+      setCopiedText(alertType)
+      setTimeout(() => setCopiedText(''), 2000)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  onMount(() => setPresets());
+
+
+  const switchColor = (color: string) => {
+    setColor(parseColor(color))
+  }
 
   return (
     <>
-      <section class='section'><h1>hello</h1></section>
+      <section class='section'>
+        <div class='section__input'>
+          <span>Color Sample</span>
+          <ColorSwatch color={color().toString()} height={3} width={19.25} />
+
+          <span>Random Presets</span>
+          <div class='section__input__presets'>
+            <ColorSwatch color={presetOne()} height={3} width={3} isPreset onClick={() => switchColor(presetOne())} />
+            <ColorSwatch color={presetTwo()} height={3} width={3} isPreset onClick={() => switchColor(presetTwo())} />
+            <ColorSwatch color={presetThree()} height={3} width={3} isPreset onClick={() => switchColor(presetThree())} />
+            <ColorSwatch color={presetFour()} height={3} width={3} isPreset onClick={() => switchColor(presetFour())} />
+            <ColorSwatch color={presetFive()} height={3} width={3} isPreset onClick={() => switchColor(presetFive())} />
+            <ColorSwatch color={presetSix()} height={3} width={3} isPreset onClick={() => switchColor(presetSix())} />
+          </div>
+
+          <div class='section__input__selector' >
+            <ColorArea class="section__input__selector__root" value={color()} onChange={setColor} >
+              <ColorArea.Background class="section__input__selector__background" >
+                <ColorArea.Thumb class="section__input__selector__thumb">
+                  <ColorArea.HiddenInputX />
+                  <ColorArea.HiddenInputY />
+                </ColorArea.Thumb>
+              </ColorArea.Background>
+            </ColorArea>
+          </div>
+        </div>
+
+        <div class='section__results'>
+          <MiniCard text="Hex" content={hex()} onClick={() => copyToClipboard(hex(), 'Hex')} />
+          <Alert for="Hex" trigger={copiedText() === 'Hex'} />
+
+          <MiniCard text="RGB" content={rgb()} onClick={() => copyToClipboard(rgb(), 'RGB')} />
+          <Alert for="RGB" trigger={copiedText() === 'RGB'} />
+
+          <MiniCard text="HSL" content={hsl()} onClick={() => copyToClipboard(hsl(), 'HSL')} />
+          <Alert for="HSL" trigger={copiedText() === 'HSL'} />
+
+          <MiniCard text="CMYK" content={cmyk().toString()} onClick={() => copyToClipboard(cmyk(), 'CMYK')} />
+          <Alert for="CMYK" trigger={copiedText() === 'CMYK'} />
+
+          <MiniCard text="HWB" content={hwb().toString()} onClick={() => copyToClipboard(hwb(), 'HWB')} />
+          <Alert for="HWB" trigger={copiedText() === 'HWB'} />
+        </div>
+
+      </section>
     </>
   )
 }