From f9864275ee557aa310738b8390f3a26c02a5ffe6 Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Tue, 29 Jun 2021 16:58:32 +0800
Subject: [PATCH] feat: add colors pane.

---
 src/app/App.module.css |  32 +++++-
 src/app/App.tsx        | 119 ++++++++++++++------
 src/app/Code.tsx       |  32 +++---
 src/app/colors.json    | 241 +++++++++++++++++++++++++++++++++++++++++
 src/index.tsx          |   2 +-
 5 files changed, 376 insertions(+), 50 deletions(-)
 create mode 100644 src/app/colors.json

diff --git a/src/app/App.module.css b/src/app/App.module.css
index 9465fb6..a250f18 100644
--- a/src/app/App.module.css
+++ b/src/app/App.module.css
@@ -3,13 +3,18 @@ html, body {
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==) left center;
 }
 
-.header {
+.warpper {
+  display: flex;
+  flex-direction: row;
+}
+.pane {
   min-height: 100vh;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
+  flex: 1;
 }
 
 .code {
@@ -23,3 +28,28 @@ html, body {
   font-size: 0.8rem;
   color: #333;
 }
+
+.colors, .colors > div {
+  width: 270px;
+}
+
+.colors {
+  position: relative;
+}
+
+.colors > div {
+  position: fixed;
+  overflow:auto;
+  height: 100%;
+}
+
+.color {
+  background-color: rgb(255 255 255 / 82%);
+  padding: 10px;
+}
+.color label {
+  font-size: 12px;
+  max-width: 180px;
+  display: block;
+  padding-top: 5px;
+}
\ No newline at end of file
diff --git a/src/app/App.tsx b/src/app/App.tsx
index 4ba4c5e..38243ff 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,48 +1,101 @@
-import { useRef, useState } from 'react';
+import { useState } from 'react';
 import GitHubCorners from '@uiw/react-github-corners';
-import { SketchPicker, ColorResult, RGBColor } from 'react-color'
-import styles from './App.module.css'
-import Code from './Code'
+import { SketchPicker, ColorResult, RGBColor, CirclePicker, CirclePickerProps } from 'react-color';
+import styles from './App.module.css';
+import Code from './Code';
+import colorsData from './colors.json';
+
+function CircleColors(props: CirclePickerProps & { title?: string }) {
+  return (
+    <div className={styles.color}>
+      <CirclePicker {...props} />
+      <label>{props.title}</label>
+    </div>
+  );
+}
 
 export default function App() {
-  const [color, setColor] = useState<RGBColor>({r: 224, g: 224, b: 224, a: 0.61})
+  const [color, setColor] = useState<RGBColor>({ r: 224, g: 224, b: 224, a: 0.61 });
   const handleColorChange = (data: ColorResult) => {
-    setColor(data.rgb)
-  }
+    setColor(data.rgb);
+  };
+  const handleSwatchesPicker = (data: ColorResult) => {
+    setColor(data.rgb);
+  };
 
   return (
     <div
       style={{
-        backgroundColor: `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`
+        backgroundColor: `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`,
       }}
     >
-      <GitHubCorners
-        fixed
-        zIndex={999}
-        size={60}
-        target="__blank"
-        href="https://github.com/uiwjs/ui-color"
-      />
-      <div className={styles.header}>
-        <div>
-          <SketchPicker
-            color={color}
-            onChange={handleColorChange}
-          />
-          <div className={styles.footer}>
-            <div>Copyright © uiwjs 2021.</div>
-            <div>Developed by <a href="https://github.com/uiwjs" target="__blank">Kenny</a>.</div>
+      <GitHubCorners fixed zIndex={999} size={60} target="__blank" href="https://github.com/uiwjs/ui-color" />
+      <div className={styles.warpper}>
+        <div className={styles.colors}>
+          <div>
+            {colorsData.map((item, idx) => {
+              return <CircleColors color={color} key={idx} {...item} onChange={handleSwatchesPicker} />;
+            })}
           </div>
         </div>
-        <div className={styles.code}>
-          <Code lang="swift" title="SwiftUI" code={`Color(red: ${color.r / 100}, green: ${color.g / 100}, blue: ${color.b / 100}).opacity(${color.a})`} />
-          <Code lang="swift" title="Swift for iOS" code={`UIColor(red: ${color.r / 100}, green: ${color.g / 100}, blue: ${color.b / 100}, alpha: ${color.a})`} />
-          <Code lang="swift" title="Swift for macOS" code={`NSColor(red: ${color.r / 100}, green: ${color.g / 100}, blue: ${color.b / 100}, alpha: ${color.a})`} />
-          <Code lang="objectivec" title="Objective-C for iOS" code={`[UIColor colorWithRed: ${color.r / 100} green: ${color.g / 100} blue: ${color.b / 100} alpha: ${color.a}];`} />
-          <Code lang="objectivec" title="Objective-C for macOS" code={`[NSColor colorWithCalibratedRed: ${color.r / 100} green: ${color.g / 100} blue: ${color.b / 100} alpha: ${color.a}];`} />
-          <Code lang="csharp" title="Xamarin (C#)" code={`new UIColor(red: ${color.r / 100}f, green: ${color.g / 100}f, blue: ${color.b / 100}f, alpha: ${color.a}f)`} />
+        <div className={styles.pane}>
+          <div>
+            <SketchPicker color={color} onChange={handleColorChange} />
+            <div className={styles.footer}>
+              <div>Copyright © uiwjs 2021.</div>
+              <div>
+                Developed by{' '}
+                <a href="https://github.com/uiwjs" target="__blank">
+                  Kenny
+                </a>
+                .
+              </div>
+            </div>
+          </div>
+          <div className={styles.code}>
+            <Code
+              lang="swift"
+              title="SwiftUI"
+              code={`Color(red: ${color.r / 100}, green: ${color.g / 100}, blue: ${color.b / 100}).opacity(${color.a})`}
+            />
+            <Code
+              lang="swift"
+              title="Swift for iOS"
+              code={`UIColor(red: ${color.r / 100}, green: ${color.g / 100}, blue: ${color.b / 100}, alpha: ${
+                color.a
+              })`}
+            />
+            <Code
+              lang="swift"
+              title="Swift for macOS"
+              code={`NSColor(red: ${color.r / 100}, green: ${color.g / 100}, blue: ${color.b / 100}, alpha: ${
+                color.a
+              })`}
+            />
+            <Code
+              lang="objectivec"
+              title="Objective-C for iOS"
+              code={`[UIColor colorWithRed: ${color.r / 100} green: ${color.g / 100} blue: ${color.b / 100} alpha: ${
+                color.a
+              }];`}
+            />
+            <Code
+              lang="objectivec"
+              title="Objective-C for macOS"
+              code={`[NSColor colorWithCalibratedRed: ${color.r / 100} green: ${color.g / 100} blue: ${
+                color.b / 100
+              } alpha: ${color.a}];`}
+            />
+            <Code
+              lang="csharp"
+              title="Xamarin (C#)"
+              code={`new UIColor(red: ${color.r / 100}f, green: ${color.g / 100}f, blue: ${color.b / 100}f, alpha: ${
+                color.a
+              }f)`}
+            />
+          </div>
         </div>
       </div>
     </div>
-  )
-};
+  );
+}
diff --git a/src/app/Code.tsx b/src/app/Code.tsx
index 6bbfd20..2e90dbb 100644
--- a/src/app/Code.tsx
+++ b/src/app/Code.tsx
@@ -12,23 +12,23 @@ type CodeProps = {
   title: string;
   lang: string;
   code: string;
-}
+};
 
 export default function Code(props: CodeProps) {
-  const { title, lang, code } = props || {}
-  const [isCopy, setIsCopy] = useState(false)
-  const [html, setHtml] = useState('')
+  const { title, lang, code } = props || {};
+  const [isCopy, setIsCopy] = useState(false);
+  const [html, setHtml] = useState('');
   function copyHandle() {
-    setIsCopy(true)
+    setIsCopy(true);
     copyTextToClipboard(code || '', (isCopy) => {
       let timer = setTimeout(() => {
-        setIsCopy(false)
-        clearTimeout(timer)
-      }, 1000)
+        setIsCopy(false);
+        clearTimeout(timer);
+      }, 1000);
     });
   }
   useEffect(() => {
-    let html = ''
+    let html = '';
     if (lang == 'swift') {
       html = Prism.highlight(code, Prism.languages.swift, 'swift');
     } else if (lang == 'csharp') {
@@ -36,17 +36,19 @@ export default function Code(props: CodeProps) {
     } else if (lang == 'objectivec') {
       html = Prism.highlight(code, Prism.languages.objectivec, 'objectivec');
     }
-    setHtml(html)
-  }, [code])
+    setHtml(html);
+  }, [code]);
   return (
     <div className={styles.warpper}>
       <div className={styles.tool}>
         <div className={styles.title}>{title}</div>
-        <div className={`${styles.copy} ${isCopy ? styles.copied: ''}`} onClick={copyHandle}>{isCopy ? 'Copied' : 'Copy'}</div>
+        <div className={`${styles.copy} ${isCopy ? styles.copied : ''}`} onClick={copyHandle}>
+          {isCopy ? 'Copied' : 'Copy'}
+        </div>
       </div>
       <pre className={styles.code}>
-        <code className={`language-${lang}`} dangerouslySetInnerHTML={{ __html: html}} />
+        <code className={`language-${lang}`} dangerouslySetInnerHTML={{ __html: html }} />
       </pre>
     </div>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/src/app/colors.json b/src/app/colors.json
new file mode 100644
index 0000000..4fabb2f
--- /dev/null
+++ b/src/app/colors.json
@@ -0,0 +1,241 @@
+[
+  { "title": "Pastel Pink Baby Shower", "colors": ["#BAC3FE", "#F2CFFF", "#FCF2FD", "#FFFAF0", "#FFDBBF", "#7CD0F5"] },
+  { "title": "Sacred Edifice", "colors": ["#2C0B3B", "#810A61", "#FF1764", "#FF9B05", "#FFFF5E"] },
+  { "title": "Bless You", "colors": ["#BF4180", "#FB756C", "#FFF2BE", "#78A8C4", "#5A61A6"] },
+  { "title": "Hale and Hearty", "colors": ["#FC7B4C", "#FCD03F", "#7CB86A", "#48438C"] },
+  { "title": "Customs of the Past", "colors": ["#618F7B", "#FFB06B", "#8E6ACC", "#FB76AB"] },
+  { "title": "Pop and Future", "colors": ["#49C2E9", "#FBC27F", "#ffffff", "#ffbcd4", "#363737"] },
+  { "title": "Bright Style", "colors": ["#f8d100", "#fc8726", "#5d4aca", "#2afcff", "#fd4eb9", "#48fc68"] },
+  { "title": "Apple Old Logo", "colors": ["#61bb46", "#fdb827", "#f5821f", "#e03a3e", "#963d97", "#009ddc"] },
+  { "title": "Retro Rides", "colors": ["#79ADA0", "#73563F", "#FFDDA3", "#D6563A", "#E58240", "#F4A544"] },
+  { "title": "Struck by Reality", "colors": ["#4A3531", "#F0A70E", "#E05700", "#A62A17"] },
+  { "title": "ModifyHealth", "colors": ["#009639", "#FF671F"] },
+  { "title": "Matters of Love", "colors": ["#e06792", "#b93da2", "#78348c", "#dd5151", "#e59145", "#e6bb68"] },
+  { "title": "Being Better", "colors": ["#AC99CC", "#FEFBE0", "#F0A59A"] },
+  { "title": "Small Change", "colors": ["#FED4AA", "#FAAB6E", "#3A5366", "#51917C"] },
+  { "title": "Autumn Leaves", "colors": ["#80B24E", "#C5DE21", "#FFE11F", "#E47544", "#C4274C", "#671E73"] },
+  { "title": "Retro USA", "colors": ["#e58469", "#d96868", "#d4d0c9", "#fff3d9", "#4c516d", "#d3af37"] },
+  { "title": "Bright Sunset Gradient", "colors": ["#ffbf15", "#F2541B", "#C91853", "#A8186E", "#6A0487", "#301D7D"] },
+  { "title": "Bad Romance", "colors": ["#9E5993", "#26487A", "#FF8C80", "#FFCF9E"] },
+  { "title": "Surprise 2", "colors": ["#26252c", "#e54861", "#f2a379", "#efd5b7"] },
+  { "title": "Ill Fated", "colors": ["#756F8C", "#F7E0D4", "#FDF3DC", "#806761", "#F8B48D", "#F8EFB8"] },
+  { "title": "My Story", "colors": ["#b4827b", "#282b50", "#705183", "#E86F6F", "#F2BC85"] },
+  { "title": "In No Rush", "colors": ["#9FBB74", "#1C4D4A", "#C64153", "#E27242", "#EBAF54"] },
+  { "title": "Orange &amp; Red Autumn", "colors": ["#ED872D", "#F5BD1F", "#961728", "#B32134", "#E03C31"] },
+  { "title": "Lively Joy", "colors": ["#FFD48A", "#FFAB6B", "#F16578", "#4D4DA3", "#518F8D"] },
+  {
+    "title": "SAGTCO OFFICE FURNITURE DUBAI ABU DHABI UAE (Neo 2019)",
+    "colors": ["#1E81C3", "#ED641E", "#ED2828", "#FCD33D", "#F2FAFF", "#FBD0C0"]
+  },
+  { "title": "NEO 2021", "colors": ["#259EEE", "#FFFF66", "#FF9300", "#F40D0D"] },
+  { "title": "Divine Trinity", "colors": ["#d7d9df", "#f3d19b", "#c97d99"] },
+  { "title": "Best of Both Worlds", "colors": ["#B35D5D", "#D98D52", "#e2d4a5", "#6E8F7B"] },
+  { "title": "Fantastic Support", "colors": ["#FFCA6E", "#FA8C80", "#4F3C65", "#51689C", "#56A7BF"] },
+  { "title": "June Theme", "colors": ["#3a64ec", "#f5b32f", "#ecd845", "#f68be7", "#a33cee", "#bdd936"] },
+  { "title": "Common Beauty", "colors": ["#847BA8", "#F8B4A6", "#F8E0CB", "#7C5E8E", "#B07BA4"] },
+  { "title": "Adolescence", "colors": ["#3E436B", "#E86258", "#F0A254", "#F5D25F", "#509166"] },
+  { "title": "Wizardry", "colors": ["#FFEE99", "#FFC369", "#DB6148", "#113961", "#1AAB97", "#80D1B6"] },
+  { "title": "Ancient India", "colors": ["#C72A39", "#F09D22", "#4A3027", "#A86645", "#C99A7B"] },
+  { "title": "Pathetic Ballad", "colors": ["#F7EAC1", "#F29C6A", "#A87267", "#374C75", "#8D72AB"] },
+  { "title": "Give Me a Boost", "colors": ["#FA9F91", "#5C4065", "#5E78BF", "#79D1B4", "#FAEBA2"] },
+  { "title": "Autumn Beauty", "colors": ["#513B63", "#F57A67", "#FAC870", "#FFEDA3", "#798759"] },
+  { "title": "Happy to Sad", "colors": ["#F7EBAB", "#EEBB79", "#E2894D", "#9C495D", "#393B57"] },
+  { "title": "1000 Stories", "colors": ["#645656", "#FFAE52", "#FFDE82", "#FFFEE0", "#B2DD98"] },
+  { "title": "No Limits", "colors": ["#51A894", "#205B6D", "#FFE0BD", "#e38555", "#B54E3A"] },
+  { "title": "Legal Side", "colors": ["#967C71", "#DDD9D0", "#AFB8C0", "#4E5575", "#EF8064"] },
+  { "title": "Desi Istyle", "colors": ["#E29F63", "#CA6E4D", "#AE5567", "#673A6E", "#EEDDAE"] },
+  { "title": "Standing in a Corner", "colors": ["#d1b85d", "#c96c68", "#804259", "#482126", "#68a87d"] },
+  { "title": "Vintage June", "colors": ["#f7a482", "#f1dd88", "#f6edc8", "#83bb90", "#549896", "#017293"] },
+  { "title": "Distinctly Mine", "colors": ["#F8CD8D", "#F2A07B", "#7D0F4D", "#2D1131", "#3C428C"] },
+  { "title": "New Fall", "colors": ["#CD916F", "#FBD08F", "#FFF2D9", "#969C75"] },
+  { "title": "Rock and Roll", "colors": ["#FFD257", "#FC9C47", "#314F87", "#30B6B9", "#ACE8BE"] },
+  { "title": "Always Trying", "colors": ["#A15E3D", "#E9985B", "#EDCD8C", "#636684", "#383652"] },
+  { "title": "Feminine Power", "colors": ["#F9B970", "#F3648A", "#92458F", "#3A3A6C", "#81C1AC"] },
+  { "title": "Vagabond at Heart", "colors": ["#1C91A3", "#111D5E", "#C20038", "#F3942C", "#F5CA3D"] },
+  { "title": "Sold Out", "colors": ["#97B89B", "#555075", "#FBA269", "#FBDB73", "#5867B0"] },
+  { "title": "Eyes Rolled Up", "colors": ["#4A3432", "#F07D41", "#E43B3B", "#553C8F", "#2E2C6E"] },
+  { "title": "Bright Flow", "colors": ["#6260AE", "#349CA5", "#F7BB00", "#F78C00", "#F57200", "#B34230"] },
+  { "title": "Life’s Experiences", "colors": ["#074e24", "#e9ca33", "#f6deb2", "#fdf9ef", "#d4995d", "#76383e"] },
+  { "title": "June Dream", "colors": ["#72aaa2", "#c9bdae", "#f3c9ab", "#f7d9ba", "#e59fa9", "#a5819d"] },
+  {
+    "title": "Hexagonal Mode: Tokyo Metro",
+    "colors": ["#f7931d", "#ed1c24", "#bb8b38", "#8ba2ae", "#00b2dd", "#00a650"]
+  },
+  { "title": "Beautiful June", "colors": ["#7ac1d5", "#9cd3a3", "#c6dca0", "#efe8cd", "#f0cca9", "#eab6a7"] },
+  { "title": "Unlucky", "colors": ["#433245", "#734A4F", "#FAEDCA", "#F7B786", "#EC6D6D"] },
+  { "title": "Dull Fall Gradient", "colors": ["#C99171", "#DEAC85", "#FECB91", "#E0B87B", "#B59E72", "#878F6F"] },
+  { "title": "Fashion in Retro", "colors": ["#B84479", "#F6AF5B", "#4DA58C", "#1B2784"] },
+  { "title": "Going Home", "colors": ["#384989", "#639cc8", "#f8c164", "#ee9062", "#914c75"] },
+  { "title": "Indian Palace", "colors": ["#E6A551", "#D97D48", "#915E7F", "#4B4964"] },
+  { "title": "Autumn Break", "colors": ["#649323", "#fddf90", "#fffaec", "#f6aa1f", "#5d3430", "#9b311e"] },
+  { "title": "June Set", "colors": ["#f3c780", "#f29c99", "#bb8fb4", "#477fd1", "#98ad4c", "#e5d049"] },
+  { "title": "Pretty Penny", "colors": ["#FF9873", "#FFCE8F", "#FFF0B5", "#995E3C"] },
+  { "title": "Cedar Wood Colors", "colors": ["#824526", "#E9A57E", "#FFC499", "#FFDCB5", "#D28B55"] },
+  { "title": "Flirty Looks", "colors": ["#0A30A1", "#F9A01B", "#CA0EA0", "#5B176E"] },
+  { "title": "Cold Autumn", "colors": ["#9a4731", "#e3951c", "#e8b334", "#a6ac4c", "#678118", "#523f58"] },
+  { "title": "Summer of June", "colors": ["#f1705f", "#f3bd6a", "#f6e2e5", "#7ddbd3", "#cf92e1"] },
+  { "title": "Strong and Solid", "colors": ["#34912d", "#e48c1b", "#182eb2", "#b52b2b", "#782372"] },
+  { "title": "Pink-Yellow Gradient", "colors": ["#fd7ebe", "#ff719a", "#FF446E", "#FF7449", "#FFA325", "#FFD300"] },
+  { "title": "Bright Kimono", "colors": ["#0b2e40", "#19718c", "#6ebab3", "#ffd17d", "#ff925d", "#ce4255"] },
+  { "title": "Good Times We Had", "colors": ["#605DA4", "#739E93", "#F5CF84", "#F77B72", "#A6517E", "#623A70"] },
+  { "title": "Realism", "colors": ["#425eba", "#ffb31c", "#fad859", "#fff5dd", "#e28e4c", "#6d492b"] },
+  { "title": "Faced with Reason", "colors": ["#786976", "#90ba9e", "#c6cfb7", "#e8ddd2", "#e1b88e", "#3f93af"] },
+  { "title": "Afternoon Siesta", "colors": ["#fcb28a", "#9e82c3", "#89b1df", "#e6b8c8", "#ebd9b6", "#b2cd91"] },
+  { "title": "Fair Enough", "colors": ["#643d6d", "#fb9e73", "#efcd9e", "#c98d71", "#906a5c"] },
+  { "title": "New India", "colors": ["#895eb3", "#fad372", "#db726d", "#f7942c", "#404c95", "#a9d03a"] },
+  { "title": "Terrific Story", "colors": ["#21367d", "#e44562", "#f8c067", "#634080", "#f38a4b"] },
+  { "title": "Late Autumn Evening", "colors": ["#b3504b", "#dd8c4b", "#556036", "#7f7b4b", "#5c4938"] },
+  { "title": "Therapeutic", "colors": ["#ffe1ba", "#ffc9b7", "#faaaae", "#aa98f0", "#eeaef1", "#ffc5d8"] },
+  { "title": "Purpose of Life", "colors": ["#4e416d", "#c56349", "#fe964f", "#fcc278", "#f9ddc2", "#834652"] },
+  { "title": "Don’t Like Royalty", "colors": ["#165A82", "#E47A64", "#FFDEC4", "#6B7C76", "#594B3E"] },
+  { "title": "Special Diwali", "colors": ["#F8DA86", "#F69565", "#B05896", "#5B518C"] },
+  { "title": "Nursery for Toddlers", "colors": ["#AA99BF", "#FC9D9A", "#FFEF9E", "#C7E0AD", "#79C9B9"] },
+  { "title": "1940s #1", "colors": ["#2F2557", "#895070", "#F09D84", "#EDD1A1", "#AB615C"] },
+  { "title": "Candy Shimmer", "colors": ["#FFF175", "#FFB536", "#F67496", "#675996", "#96C983"] },
+  { "title": "Love My Valentine Gift", "colors": ["#B18BBC", "#E89EBF", "#FBE89B", "#EA9787", "#F7D0A9"] },
+  { "title": "Stay Vigilant", "colors": ["#A34442", "#EF9817", "#FDD2A7", "#FDE8C8", "#4d3b61"] },
+  { "title": "Epic Season", "colors": ["#128A97", "#0D4678", "#F6A140", "#FFD447", "#49824B"] },
+  { "title": "Heavy Anchor", "colors": ["#4F688A", "#F8F7EC", "#D99357", "#B86C54"] },
+  { "title": "Atone", "colors": ["#FCC42B", "#FC5C14", "#643404", "#4383BA"] },
+  { "title": "Rustic Retro", "colors": ["#5C806B", "#D89044", "#AF6F4A", "#7D4A3A", "#473029"] },
+  { "title": "Stylish Rainbow", "colors": ["#8f169b", "#c62293", "#ff9036", "#f9dd74", "#00ab8e", "#321279"] },
+  { "title": "Good Value", "colors": ["#689942", "#FEBF40", "#6D5995", "#D64466", "#FF893B"] },
+  { "title": "Words Can’t Die", "colors": ["#3F3379", "#4285A2", "#F6AD68", "#C05658", "#8F3B57"] },
+  { "title": "Pastel Paradise", "colors": ["#dbbce4", "#f3cfd7", "#f7e0ca", "#f4f4f4", "#d1dcfb", "#d6f1df"] },
+  { "title": "Vintage Bliss", "colors": ["#fbae3a", "#58444d", "#826152", "#87c7c5"] },
+  { "title": "Honey", "colors": ["#f76e02", "#f68002", "#f79101", "#f59e02", "#f2b104"] },
+  { "title": "Fall Season", "colors": ["#8F3F22", "#C76B18", "#FFBC04", "#D6B112", "#ADA71F", "#849C2D"] },
+  { "title": "Self Love", "colors": ["#B6076A", "#DA216B", "#F7B52F", "#FFDB57", "#9C42B8", "#603991"] },
+  { "title": "Summer Rainbow", "colors": ["#59009f", "#0069c9", "#01d93f", "#f0ec00", "#ff8b00", "#db2b28"] },
+  { "title": "Water Slide", "colors": ["#03cbe2", "#bdeee6", "#fffaeb", "#fe9d05"] },
+  { "title": "Once in a Lifetime", "colors": ["#1477ab", "#2ea6bc", "#fce975", "#187aa4", "#154068", "#de9a31"] },
+  { "title": "Retro Disco Colors", "colors": ["#A414D9", "#FF802B", "#F9E105", "#34C7A5", "#5D50CE"] },
+  { "title": "Dull Retro Pastels", "colors": ["#7a9873", "#497a82", "#5f4f6a", "#d4b689", "#c9915d", "#a5654e"] },
+  { "title": "New Autumn", "colors": ["#a09565", "#7d5250", "#bf7452", "#fdc984", "#fadcc0", "#ddab9a"] },
+  { "title": "Special Needs", "colors": ["#63554d", "#5b9cb4", "#e8ddb6", "#efc182", "#e5a973"] },
+  { "title": "Rainbow for Everyone", "colors": ["#774ed8", "#4996c8", "#6eb35e", "#ecd03f", "#f39c3c", "#ea5555"] },
+  { "title": "Chest of Drawers", "colors": ["#c45c11", "#e18f3a", "#8d2e01", "#551709"] },
+  { "title": "We Trust You", "colors": ["#907cc0", "#fdc8b3"] },
+  { "title": "Top Number", "colors": ["#bc214f", "#560858", "#ff9860", "#f9ce7b", "#f44f80", "#9a0c5e"] },
+  { "title": "Different Yellows", "colors": ["#ffb131", "#f8a201", "#ffd402", "#ffe52d", "#ffffa1", "#fafa31"] },
+  { "title": "Spring &amp; Autumn", "colors": ["#cb3503", "#e65d0a", "#fb931f", "#feb845", "#ceae45", "#a59c37"] },
+  { "title": "Vintage Country", "colors": ["#53beb6", "#f9dfc0", "#f0b45e", "#e79054", "#b76450"] },
+  { "title": "Rainbow Inside", "colors": ["#ed4974", "#8958d3", "#16b9e1", "#58de7b", "#f0d864", "#ff8057"] },
+  { "title": "Vintage Calm", "colors": ["#f0d09a", "#87b2ad", "#f9f3e6", "#e6dacf", "#aea49f"] },
+  { "title": "Stress Relief", "colors": ["#ef7caf", "#fda79a", "#f8d39d", "#fef1dd", "#57925b", "#096296"] },
+  { "title": "Surreal Capture", "colors": ["#93c884", "#1cafa7", "#315997", "#322b56", "#782e49", "#c96148"] },
+  { "title": "Retro Halloween", "colors": ["#A84A48", "#E67D48", "#F1A762", "#EEE8C8", "#71B390"] },
+  { "title": "Tones &amp; Hues", "colors": ["#efa9a2", "#0f7bbd", "#54b474", "#f4c955", "#f48555", "#dd5f83"] },
+  { "title": "Land Before Time", "colors": ["#182879", "#3c62a6", "#ecb030", "#955731", "#52453e", "#d34f3e"] },
+  { "title": "Indian Bright", "colors": ["#e92b78", "#fae926", "#5cb845", "#0895d3", "#1f3999", "#f4872d"] },
+  { "title": "Augmented Reality", "colors": ["#7f507e", "#faad55", "#ffeda0", "#bada97", "#3aa68c", "#007785"] },
+  { "title": "Rich Showoff", "colors": ["#b67ab4", "#fdba58", "#c84f55", "#50548d"] },
+  { "title": "Simple Words", "colors": ["#e48998", "#f2c791", "#f8f6f3", "#89cbc8"] },
+  { "title": "Spectrum", "colors": ["#ff624b", "#ffaf0e", "#fde838", "#16d511", "#0995e5", "#651bc8"] },
+  { "title": "Deluxe Retro", "colors": ["#eacd57", "#52ad7c", "#d36046", "#562610", "#c3bb8a"] },
+  { "title": "My Friends &amp; I", "colors": ["#72aecd", "#e5d6bc", "#db999c", "#ecbd81", "#002147", "#b48573"] },
+  { "title": "Retro Rainbow Pastels", "colors": ["#5391ae", "#85b464", "#e2d269", "#ea915e", "#bc677b", "#7a4e8a"] },
+  { "title": "Bright and Calm", "colors": ["#f7dd4d", "#fb6e46", "#d4328f", "#2c5093", "#00a6db", "#8ed278"] },
+  { "title": "Free to Feel", "colors": ["#00bda2", "#18508a", "#fff1d0", "#ffd89d", "#ffb990"] },
+  { "title": "Retro Night", "colors": ["#100E2C", "#131B60", "#333D94", "#F9C403", "#F45A5C", "#D41E79"] },
+  { "title": "Vivid Orange Gradient", "colors": ["#FF5E01", "#FF6E01", "#FF7E01", "#FF8D00", "#FF9D00"] },
+  { "title": "Mid Autumn in Canada", "colors": ["#c96510", "#da800b", "#a33a18", "#340d14", "#8b8424", "#c0a00f"] },
+  { "title": "Refresh Yourself", "colors": ["#f67672", "#fadc8d", "#ffa574", "#9366e8", "#efe9e2", "#72b769"] },
+  { "title": "Bright Colors Rainbow", "colors": ["#f02c03", "#ff950c", "#fedc03", "#7cda01", "#0d8dff", "#b02ff7"] },
+  { "title": "Indifferent", "colors": ["#81a341", "#6d8d34", "#5e5e5e", "#7d7d7d", "#e79a2f", "#db4a2b"] },
+  { "title": "Charms of Luck", "colors": ["#376acf", "#60d6d6", "#ececed", "#ffa07c", "#590968"] },
+  { "title": "Bright Colors", "colors": ["#fd7510", "#2050e2", "#82ba00", "#ffee28", "#fe7fb7", "#fd3f28"] },
+  { "title": "Apple Retro Logo", "colors": ["#8FBB76", "#FCC76A", "#F4A755", "#E06C79", "#8A5F9E", "#519FB0"] },
+  { "title": "Succeed in Life", "colors": ["#d85158", "#ffab69", "#fecd9a", "#ad5390", "#85358c", "#602e86"] },
+  { "title": "Disarmed", "colors": ["#6272c3", "#fb8b60", "#464646", "#4e9c5b"] },
+  { "title": "Seasonal Blur", "colors": ["#788063", "#BFAF78", "#EDE1AF", "#F6C293", "#EAA47A", "#C77C73"] },
+  { "title": "So Many Days", "colors": ["#4b1e85", "#6fae9d", "#ffcf9d", "#50a9e1"] },
+  { "title": "Gradient at Dusk", "colors": ["#FFECCC", "#FDC295", "#F07D84", "#C35E83", "#78496D", "#3D3157"] },
+  { "title": "It’s all Vague", "colors": ["#2a5078", "#b68465", "#e3bc78", "#c25b5f", "#f09444"] },
+  { "title": "Standout in Fall", "colors": ["#654168", "#924c5c", "#f7e7d9", "#eab691", "#a39da1", "#7a5158"] },
+  { "title": "Great Support", "colors": ["#7dd7bd", "#049ca6", "#5f6062", "#f79e63"] },
+  { "title": "We’ve Gotta See", "colors": ["#e9a738", "#777777", "#f1ecd1", "#8abccc"] },
+  { "title": "Profound", "colors": ["#FBBA58", "#FB9373", "#4B567A", "#8EA9D8"] },
+  { "title": "Played for Long", "colors": ["#B0B297", "#F4E1C6", "#F1836C", "#BC4D72", "#5e4177"] },
+  { "title": "Retro of the 90s", "colors": ["#51d7d0", "#FBEA5E", "#FA7B52", "#8551A8"] },
+  { "title": "Anxiety", "colors": ["#72474b", "#39284b", "#fd7846"] },
+  { "title": "Pink to Orange Gradient", "colors": ["#DB2DEE", "#E23CBF", "#E94B8F", "#F15A60", "#F86930", "#FF7801"] },
+  { "title": "She and He", "colors": ["#8950AA", "#FF9305", "#FFCF4A", "#2981D9", "#2049A8"] },
+  { "title": "Wild Retro", "colors": ["#48A19E", "#F7B211", "#F27A11", "#E34E29", "#B30047"] },
+  { "title": "Fireworks in the Night", "colors": ["#0D324D", "#124366", "#0E719C", "#FFF9CF", "#FFD138", "#FF8A30"] },
+  { "title": "Warm Season", "colors": ["#F59056", "#FFAD5C", "#FCF07C", "#C4EB91", "#A5D48A"] },
+  { "title": "Wonderland By Night", "colors": ["#0f2149", "#e38648", "#f6e7c5", "#1a8cc4", "#064396", "#d2b63e"] },
+  {
+    "title": "Peaches and Cream Wedding",
+    "colors": ["#fcface", "#fffef1", "#ffe7b9", "#fbdca1", "#fac896", "#47528c"]
+  },
+  { "title": "Modern Retro", "colors": ["#FAA748", "#6A3825", "#D97F5E", "#EDECC0", "#BDCDAB"] },
+  { "title": "Validated", "colors": ["#065eed", "#f59b27"] },
+  { "title": "Water World", "colors": ["#069bc8", "#49bad1", "#fff488", "#75d281", "#8675cb", "#ff9f64"] },
+  { "title": "Warm Halloween", "colors": ["#804e3b", "#887c56", "#efd7b8", "#e8ae4a", "#ec7d11", "#982608"] },
+  {
+    "title": "Blossom – Powerpuff Girls",
+    "colors": ["#ec563e", "#f7902e", "#f7d5c1", "#FFFFFF", "#ea78a0", "#000000"]
+  },
+  { "title": "Pretty Rainbow", "colors": ["#e38bda", "#ffa4a4", "#fdd39b", "#fffab0", "#b8e38c", "#96bcf3"] },
+  { "title": "Hindu Traditions", "colors": ["#dd2a12", "#961f55", "#ffa214", "#ffe127", "#66a71e", "#0b7121"] },
+  { "title": "Luckiest", "colors": ["#fef1cc", "#ffcf9b", "#c592ef", "#b7de87", "#efe782"] },
+  { "title": "Funky Coffee", "colors": ["#0d0000", "#c07808", "#733b0d", "#2d1c10"] },
+  { "title": "Bicolor Retro #4", "colors": ["#694634", "#DB954F"] },
+  { "title": "Cannot Neglect", "colors": ["#FCCC83", "#F78A8A", "#4A3D69", "#7CA6DD", "#C9DAE4"] },
+  { "title": "Vivid and Warm", "colors": ["#e15e39", "#fbc246", "#ea9b44", "#7d3e25", "#e32727"] },
+  { "title": "Inception", "colors": ["#efac3d", "#842650", "#69932b", "#5f2d7b"] },
+  { "title": "Vegetarian", "colors": ["#a4bd38", "#608e43", "#f0a049", "#f1deb5", "#c91c1f"] },
+  { "title": "No One to Blame", "colors": ["#c2f700", "#3bbdf3", "#ff67a5", "#ffc567"] },
+  { "title": "Retro Women", "colors": ["#93C4C6", "#fbe5b9", "#F8AA5C", "#DF715B", "#523421"] },
+  { "title": "Traditional Fall", "colors": ["#7b1200", "#b21f01", "#de700f", "#f7c32d", "#6c8a1a", "#2e541a"] },
+  { "title": "Vintage Comic", "colors": ["#61AAB3", "#EDD5BD", "#F99273", "#575451"] },
+  { "title": "Alice’s Wonderland", "colors": ["#4f4e6c", "#e1897d", "#f7c396", "#f7e4cc", "#7b8f76", "#4f7280"] },
+  { "title": "Fire Factory", "colors": ["#611C07", "#910000", "#B22222", "#ED8111", "#FFBB00", "#FFE503"] },
+  { "title": "Pizza", "colors": ["#bb3e00", "#f7ad45", "#fff1d7", "#5f8d37"] },
+  { "title": "Cool Design #1", "colors": ["#4e61a1", "#5abfb8", "#f1f1f1", "#f7c94d", "#d97861"] },
+  { "title": "Summer Web Site Colors", "colors": ["#82dff5", "#f2f2f2", "#e4c9a0", "#db8d6e", "#eccb48"] },
+  { "title": "Bright Indian Festival", "colors": ["#211498", "#f5b666", "#f06c4d", "#c62591", "#711da2"] },
+  { "title": "Reborn", "colors": ["#b6568c", "#6a19a2", "#300a6f", "#f6e5be", "#db6a58", "#a23541"] },
+  { "title": "Sunrise on the Lake", "colors": ["#DB8B69", "#DEB16F", "#E3C894", "#7B818A", "#404961"] },
+  { "title": "Spring Style", "colors": ["#7b5499", "#e05795", "#ffa36d", "#fceb96", "#a7d150", "#54b747"] },
+  { "title": "Brighten the Moment", "colors": ["#c1728c", "#f39492", "#f5bc9d", "#af84d8", "#4178c4"] },
+  { "title": "Explain the Situation", "colors": ["#b14d85", "#d57769", "#dca162", "#348689", "#574683"] },
+  { "title": "Grey-Orange-Red Gradient", "colors": ["#6B6361", "#876E58", "#C46F43", "#ED872D", "#E7622F", "#D93934"] },
+  { "title": "Great Value", "colors": ["#d98d4b", "#2e0708", "#5daba2"] },
+  { "title": "Ways of Royalty", "colors": ["#d02760", "#f98c40", "#fad65a", "#0037a7", "#100064"] },
+  { "title": "Rainbow Bar", "colors": ["#f1442d", "#f58f00", "#f1c521", "#3ab441", "#1e6cd5", "#5c239e"] },
+  { "title": "Bright Pastel Theme", "colors": ["#31bff3", "#a484e9", "#f4889a", "#ffaf68", "#f6e683", "#79d45e"] },
+  { "title": "Irish Luck", "colors": ["#148e48", "#f6e8e8", "#ecb621", "#fdc902", "#f77e33"] },
+  { "title": "Real Sunset", "colors": ["#4f3a6d", "#715786", "#b07395", "#d8808e", "#fece8c", "#ffa583"] },
+  { "title": "Gunmetal Grey &amp; Orange", "colors": ["#1f2528", "#cd5301", "#ee9222", "#fea502", "#2c3438"] },
+  { "title": "Flames of Fire", "colors": ["#FFDB01", "#ECAD09", "#D97F12", "#C5501A", "#B22222"] },
+  { "title": "Vivid Mood", "colors": ["#ffe200", "#fe306f", "#b91ee1", "#a7d707", "#dd2781", "#ff9202"] },
+  { "title": "Anniversary of Love", "colors": ["#f39420", "#d34348", "#bbbbbb", "#f6f6f6", "#7a427f"] },
+  { "title": "Vibrant and Rich", "colors": ["#c5143e", "#7b0555", "#370f5e", "#fad95b", "#f98e3d", "#4169e2"] },
+  { "title": "Extra Effort", "colors": ["#f0468d", "#4e2578", "#d5672f", "#ffd865", "#3f110d"] },
+  { "title": "Indian Yoga", "colors": ["#b82223", "#670d04", "#f9a44e", "#ffd90d", "#01b1af"] },
+  { "title": "Efficiently Managed", "colors": ["#78b45c", "#aacc6c", "#274cb5", "#f5a74b"] },
+  { "title": "Updated", "colors": ["#9addd3", "#1db5dd", "#5877bc", "#f48995", "#f1b690", "#efda99"] },
+  { "title": "Orange and Seagreen", "colors": ["#368A65", "#399564", "#40B36A", "#F5B725", "#ED9121", "#E67A3C"] },
+  { "title": "Chillwave", "colors": ["#5e1c9f", "#4375e2", "#5cf7f5", "#ec37db", "#faee44", "#ff636a"] },
+  { "title": "Different Aspects", "colors": ["#f56421", "#f19e1c", "#16192c", "#3aa59e", "#adc252", "#f5eea2"] },
+  { "title": "Stressful", "colors": ["#dc8275", "#e8d097", "#3e3d64", "#6cd2c2"] },
+  { "title": "Madly Lost", "colors": ["#735E54", "#FFE6CC", "#FFC38B", "#EB987A", "#6D6C94"] },
+  { "title": "Encompassing", "colors": ["#FFBD38", "#FB813A", "#23544C", "#2F785F", "#ACC979"] },
+  { "title": "Bohemian Gradient", "colors": ["#FFE7A6", "#FFC380", "#FF9A75", "#7E5987", "#2b3568"] },
+  { "title": "Firefighters", "colors": ["#BDB76C", "#F7F3BC", "#FFD042", "#F09707", "#CE1D1D"] },
+  { "title": "Magenta to Gold Gradient", "colors": ["#CC338C", "#CF4670", "#D25954", "#D46B38", "#D77E1C", "#DA9100"] },
+  { "title": "Easy to Remember", "colors": ["#a5bf35", "#068682", "#e6a425", "#e8e4d8", "#6dc2c1", "#815a74"] },
+  { "title": "Days of the Past", "colors": ["#205569", "#EDAE8E", "#F1D8BE", "#F7F5D5"] },
+  { "title": "Retro Gaming", "colors": ["#ff0004", "#7a0080", "#ffff00", "#30c030", "#002cff", "#ff7e00"] },
+  { "title": "Outside the Window", "colors": ["#DCA76A", "#F0E2BB", "#3C735F", "#2A203B", "#D35757"] },
+  {
+    "title": "Blue, Pink &amp; Yellow Gradient",
+    "colors": ["#3F3A81", "#954698", "#D65A94", "#F76385", "#F9B357", "#F8F658"]
+  },
+  { "title": "Tolerable", "colors": ["#0D0C0D", "#770301", "#EC936C", "#F0CB8B", "#02416A"] },
+  { "title": "Visibly Attractive", "colors": ["#FED81C", "#FEA41C", "#F418E5", "#7A00C6", "#3F22A1"] },
+  { "title": "Colorful Update", "colors": ["#031136", "#2E318A", "#FF670F", "#FFC012", "#FFF126"] },
+  { "title": "Genuine and True", "colors": ["#E6A712", "#C55210", "#D3CBAB", "#9BBDA8", "#4B8F96"] }
+]
diff --git a/src/index.tsx b/src/index.tsx
index aebfc8f..c021c10 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,4 +3,4 @@ import ReactDOM from 'react-dom';
 import App from './app/App';
 import './index.css';
 
-ReactDOM.render(<App />, document.getElementById('root'));
\ No newline at end of file
+ReactDOM.render(<App />, document.getElementById('root'));