From 15e0999e11849fc56cf7d54ee6d49ad26cdc9e4d Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Thu, 5 Jun 2025 13:50:48 +0800
Subject: [PATCH] Added new component

---
 src/components/ColorSwatch/ColorSwatch.sass |  4 ++++
 src/components/ColorSwatch/ColorSwatch.tsx  | 17 +++++++++++++++++
 2 files changed, 21 insertions(+)
 create mode 100644 src/components/ColorSwatch/ColorSwatch.sass
 create mode 100644 src/components/ColorSwatch/ColorSwatch.tsx

diff --git a/src/components/ColorSwatch/ColorSwatch.sass b/src/components/ColorSwatch/ColorSwatch.sass
new file mode 100644
index 0000000..ee1c3f8
--- /dev/null
+++ b/src/components/ColorSwatch/ColorSwatch.sass
@@ -0,0 +1,4 @@
+.colorswatch
+  height: 56px
+  width: 56px
+  border-radius: 8px
diff --git a/src/components/ColorSwatch/ColorSwatch.tsx b/src/components/ColorSwatch/ColorSwatch.tsx
new file mode 100644
index 0000000..4ff2b20
--- /dev/null
+++ b/src/components/ColorSwatch/ColorSwatch.tsx
@@ -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>
+
+    </>
+  )
+}
\ No newline at end of file