add: gradient type

Author: Gradient-Lover

src/App.css

@@ -1,38 +1,27 @@
-.App {
-  text-align: center;
+* {
+  font-family: sans-serif;
+  margin: 1.5px;
+  padding: 1.5px;
+  border-radius: 5px;
+  border: 1px solid rosybrown;
 }
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+button{
+  background: linear-gradient(to right, #fff700 , #ff0000);
 }
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+input{
+  width: 100px;
+  min-width: 100%;
+  min-height: 50%;
+  margin-left: 0;
+  background: linear-gradient(to left,blanchedalmond, palegoldenrod, palevioletred);
+  margin-bottom: 10px;
 }
-
-.App-link {
-  color: #61dafb;
+body{
+  background: rgb(131,58,180);
+background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+.color{
+  display: flex;
+  justify-content: space-between;
+}

src/App.js

@@ -1,25 +1,111 @@
-import logo from './logo.svg';
-import './App.css';
+import "./App.css";
+import { useState } from "react";
+export default function App() {
+  const [leftColor, setLeftColor] = useState("#fff700");
+  const [rightColor, setRightColor] = useState("#ff0000");
+
+  const [radialGradient, setRadialGradient] = useState(
+    `radial-gradient(${leftColor} , ${rightColor})`
+  );
+  const [linearGradient, setLinearGradient] = useState(
+    `linear-gradient(to right , ${leftColor} , ${rightColor})`
+  );
+  const [gradientType, setGradientType] = useState("radial");
+
+  const copyCode = () => {
+    navigator.clipboard.writeText(
+      `linear-gradient(to right, ${leftColor} , ${rightColor})`
+    );
+  };
 
-function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
+      <div
+        className="container"
+        style={{
+          background:
+            gradientType === "radial" ? radialGradient : linearGradient,
+          height: "90vh",
+          display: "flex",
+          justifyContent: "space-around",
+          alignItems: "center",
+        }}
+      >
+        <div className="left-color">
+          <input
+            value={leftColor}
+            onChange={(event) => {
+              console.log(event.target.value);
+              setLeftColor(event.target.value);
+              setLinearGradient(
+                `linear-gradient(to right, ${leftColor} , ${rightColor})`
+              );
+              setRadialGradient(
+                `raidal-gradient(${leftColor} , ${rightColor})`
+              );
+            }}
+            type="color"
+          />
+          <div className="color" style={{ backgroundColor: "white" }}>
+            <span>{leftColor}</span>
+            <button
+              onClick={() => {
+                navigator.clipboard.writeText(leftColor);
+              }}
+              class="clip"
+            >
+              📋
+            </button>
+          </div>
+        </div>
+
+        <div className="right-color">
+          <input
+            value={rightColor}
+            onChange={(event) => {
+              setRightColor(event.target.value);
+              setLinearGradient(
+                `linear-gradient(to right, ${leftColor} , ${rightColor})`
+              );
+              setRadialGradient(
+                `raidal-gradient(${leftColor} , ${rightColor})`
+              );
+            }}
+            type="color"
+          />
+
+          <div className="color" style={{ backgroundColor: "white" }}>
+            {" "}
+            <span>{rightColor}</span>
+            <button
+              onClick={() => {
+                navigator.clipboard.writeText(rightColor);
+              }}
+              class="clip"
+            >
+              📋
+            </button>{" "}
+          </div>
+        </div>
+      </div>
+
+      <div style={{ textAlign: "center" }} className="panel">
+        <button
+          onClick={() => {
+            setGradientType("linear");
+          }}
         >
-          Learn React
-        </a>
-      </header>
+          Linear Gradient
+        </button>
+        <button onClick={copyCode}> Copy Gradient code </button>
+        <button
+          onClick={() => {
+            setGradientType("radial");
+          }}
+        >
+          Radial Gradient
+        </button>
+      </div>
     </div>
   );
 }
-
-export default App;

src/index.css

@@ -11,3 +11,4 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+