w

package-lock.json

@@ -17,7 +17,8 @@
         "next": "14.1.0",
         "prisma": "^5.12.1",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "styled-components": "^6.1.8"
       },
       "devDependencies": {
         "@types/node": "^20",
@@ -64,6 +65,24 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
+      "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw=="
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -635,6 +654,11 @@
       "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
       "dev": true
     },
+    "node_modules/@types/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw=="
+    },
     "node_modules/@typescript-eslint/parser": {
       "version": "6.19.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.19.1.tgz",
@@ -1193,6 +1217,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001580",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001580.tgz",
@@ -1319,6 +1351,24 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -3696,8 +3746,7 @@
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
@@ -4057,6 +4106,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -4305,6 +4359,70 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/styled-components": {
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.8.tgz",
+      "integrity": "sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==",
+      "dependencies": {
+        "@emotion/is-prop-valid": "1.2.1",
+        "@emotion/unitless": "0.8.0",
+        "@types/stylis": "4.2.0",
+        "css-to-react-native": "3.2.0",
+        "csstype": "3.1.2",
+        "postcss": "8.4.31",
+        "shallowequal": "1.1.0",
+        "stylis": "4.3.1",
+        "tslib": "2.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0"
+      }
+    },
+    "node_modules/styled-components/node_modules/csstype": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+    },
+    "node_modules/styled-components/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/styled-components/node_modules/tslib": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
@@ -4327,6 +4445,11 @@
         }
       }
     },
+    "node_modules/stylis": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz",
+      "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ=="
+    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",

package.json

@@ -18,7 +18,8 @@
     "next": "14.1.0",
     "prisma": "^5.12.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.1.8"
   },
   "devDependencies": {
     "@types/node": "^20",

src/app/ColorWidget/ColorWidget.tsx

+"use client";
+import { FC, useState } from "react";
+import styled from "styled-components";
 
-interface PColorWidget {
-    colorInput: string;
+const ColorSquare = styled.div`
+  width: 50px;
+  height: 50px;
+  margin: 5px;
+  background-color: ${(props) => props.color};
+`;
+
+interface ColorWidgetProps {
+  colorQueue: string[];
 }
 
-export const ColorWidget: FC<PColorWidget> = (props) => {
-    return (
-        <div className="flex flex-col items-center gap-16">
-            {/* Use the colorInput prop */}
-            <div className={`h-24 w-24 bg-[${props.colorInput}]`} />
-            <div className="flex flex-row gap-12">
-                <div className="h-16 w-16 bg-[red]" />
-                <div className="h-16 w-16 bg-[#d9d9d9]" />
-                <div className="h-16 w-16 bg-[#00A3FF]" />
-            </div>
-        </div>
-    );
-};
\ No newline at end of file
+const ColorWidget: FC<ColorWidgetProps> = ({ colorQueue }) => {
+  return (
+    <div className="color-container">
+      {colorQueue.map((color, index) => (
+        <ColorSquare key={index} color={color} />
+      ))}
+    </div>
+  );
+};
+
+export default ColorWidget;

src/app/ColorWidget/ValidHexColor.tsx

+interface HexColorProps {
+  hexColor: string; 
+}
+
+const isValidHexColor = (hexColor: string): boolean => {
+  const hexColorRegex = /^#[0-9A-F]{6}$/i;
+  return hexColorRegex.test(hexColor);
+};
+
+export default isValidHexColor;

src/app/ColorWidget/page.tsx

-"use client"
-import {FC, useState} from "react";
-import {ColorWidget} from "./ColorWidget";
+"use client";
+import { FC, useState } from "react";
+import ColorWidget from "./ColorWidget";
+import isValidHexColor from './ValidHexColor';
 
 const Page: FC = () => {
-    const [inputColor, setInputColor] = useState("#ffb200");
-    const [currentColor, setCurrentColor] = useState("#ffb200");
+  const [colorQueue, setColorQueue] = useState(["#ffb200", "#d9d9d9", "#00A3FF"]);
+  const [errorMessage, setErrorMessage] = useState('');
 
-    const handleShowButtonClick = () => {
-        setCurrentColor(inputColor);
-    };
+  const handleShowButtonClick = () => {
+    const inputValue = document.querySelector('input').value; 
 
-    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        setInputColor(event.target.value);
-    };
+    if (isValidHexColor(inputValue)) {
+      setColorQueue((prevQueue) => [inputValue, ...prevQueue.slice(1)]); // Add new color to front
+      setErrorMessage(''); 
+    } else {
+      setErrorMessage('Invalid hex color'); 
+    }
+  };
 
-    return (
-        <div className="flex flex-col items-center gap-16 p-64">
-            <h1 className="text-4xl">Color shower</h1>
-            <div className="flex flex-row justify-between w-full">
-                <input
-                    className="border border-black w-96 h-[4.875rem]"
-                    value={inputColor}
-                    onChange={handleInputChange}
-                />
-                <button
-                    className="p-6 bg-[#8EFF7B] rounded-xl text-2xl"
-                    onClick={handleShowButtonClick}
-                >
-                    Show
-                </button>
-            </div>
-            <ColorWidget colorInput={currentColor}/>
-        </div>
-    );
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newColor = event.target.value;
+    setErrorMessage(''); 
+  };
+
+  return (
+    <div className="container mx-auto flex flex-col items-center gap-16 p-6">
+      <h1 className="text-4xl">Color Shower</h1>
+      <div className="flex flex-row justify-between w-full">
+        <input
+          className="border border-gray-300 p-2 w-96 rounded-md"
+          type="text"
+          onChange={handleInputChange}
+        />
+        <button
+          className="bg-green-500 hover:bg-green-600 text-white font-medium px-6 py-3 rounded-md"
+          onClick={handleShowButtonClick}
+        >
+          Show
+        </button>
+      </div>
+      
+      {errorMessage && <div className="text-red-500">{errorMessage}</div>} 
+
+      <ColorWidget colorQueue={colorQueue} />
+    </div>
+  );
 };
 
 export default Page;