Initial Commit

thevipinmishra · Oct 10, 2021 · 21a33b9 · 21a33b9
commit 21a33b9
Show file tree

Hide file tree

Showing 9 changed files with 1,313 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "color-shades-generator",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "@fontsource/jost": "^4.5.0",
+    "@fontsource/space-mono": "^4.5.0",
+    "color": "^4.0.1",
+    "react": "^17.0.0",
+    "react-copy-to-clipboard": "^5.0.4",
+    "react-dom": "^17.0.0",
+    "sass": "^1.42.1",
+    "uuid": "^8.3.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^1.0.0",
+    "vite": "^2.6.4"
+  }
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,119 @@
+import React, { useState } from "react";
+import Color from "color";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+import { v4 as uuidv4 } from "uuid";
+
+import loading from "./plate.svg";
+import "./main.scss";
+
+const App = () => {
+  const [input, setInput] = useState("");
+  const [shades, setShades] = useState([]);
+  const [copied, setCopied] = useState(false);
+
+  const handleInputChange = (event) => {
+    setShades([]);
+    setInput(event.target.value);
+  };
+
+  const isHex = (str) => {
+    const regex = /^#(?:[0-9a-fA-F]{3}){1,2}$/i;
+    return regex.test(str);
+  };
+
+  const handleFormSubmit = (event, color) => {
+    event.preventDefault();
+    const variants = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1];
+    const lightShades = variants.map((num) => Color(input).lighten(num).hex());
+    const darkShades = variants.map((num) => Color(input).darken(num).hex());
+    const shades = [...lightShades, ...darkShades];
+    setShades(shades);
+  };
+
+  const handleCopyStatus = () => {
+    setCopied(true);
+    setTimeout(() => setCopied(false), 500);
+  };
+
+  return (
+    <div className="app">
+      <header className="page-header">
+        <h1 className="headline">Color Shades Generator 🍕</h1>
+        <p className="description">
+          Put any Hex Color Code (3 or 6 digit) and you&#39;ll get 20 different
+          shades!
+        </p>
+      </header>
+
+      <div className="color-input" onSubmit={handleFormSubmit}>
+        <form>
+          <div className="input-group">
+            <input
+              type="text"
+              value={input}
+              placeholder="#2c3e50"
+              onChange={handleInputChange}
+              spellCheck={false}
+              autoFocus
+            />
+
+            <input type="submit" value="Get Shades" disabled={!isHex(input)} />
+          </div>
+          <p className="input-helper-text">
+            Only Hex Colors Allowed, eg. #ddd, #2c3e50 etc.
+          </p>
+        </form>
+      </div>
+      {shades.length > 0 ? (
+        <>
+          <div className="color-info wrapper">
+            <div className="color-type info-box">
+              <h5>Color Type</h5>
+              <p>{input && Color(input).isDark() ? "Dark" : "Light"}</p>
+            </div>
+
+            <div className="color-luminosity info-box">
+              <h5>HSL Value</h5>
+              <p>{input && Color(input).hsl().string(0)}</p>
+            </div>
+
+            <div className="color-contrast info-box">
+              <h5>RBG Value</h5>
+              <p> {input && Color(input).rgb().toString()}</p>
+            </div>
+          </div>
+          <div className="shades-grid wrapper">
+            {shades.map((shade) => (
+              <CopyToClipboard
+                text={shade}
+                onCopy={() => handleCopyStatus()}
+                key={uuidv4()}
+              >
+                <div className="shade-item">
+                  <div className="preview" style={{ background: shade }}></div>
+                  <span className="color-code">{shade}</span>
+                </div>
+              </CopyToClipboard>
+            ))}
+          </div>
+        </>
+      ) : (
+        <div className="loading-placeholder wrapper">
+          <img src={loading} alt="" width="200" height="200" />
+          <h3>Waiting for a Color Input...</h3>
+        </div>
+      )}
+
+      <footer className="site-footer">
+        <p>
+          Made using ⌨️ and 🐭 by{" "}
+          <a href="https://github.com/thevipinmishra">Vipin Mishra</a>
+        </p>
+      </footer>
+
+      {copied && <p className="copy-status">🎉 Copied</p>}
+    </div>
+  );
+};
+
+export default App;
diff --git a/src/main.jsx b/src/main.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+
+import "@fontsource/jost/400.css";
+import "@fontsource/jost/700.css";
+import "@fontsource/jost/800.css";
+import "@fontsource/space-mono/400.css";
+import "@fontsource/space-mono/700.css";
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById("root")
+);