feature: box shadow generator feature added

src/app/assets/nav.js

@@ -74,6 +74,12 @@ export default function Nav() {
             className="absolute right-0 mt-2 py-2 bg-white rounded shadow-lg w-40"
             style={{ zIndex: 100 }}
           >
+            <a
+              href="customizer/box-shadow-generator"
+              className="block px-4 py-2 text-gray-800 hover:bg-gray-200"
+            >
+              Box Shadow Generator
+            </a>
             <a
               href="customizer/gradient-generator"
               className="block px-4 py-2 text-gray-800 hover:bg-gray-200"

src/app/assets/search.js

@@ -67,6 +67,11 @@ export default function Search() {
         name: "Mark down Editor",
         link: "https://web-dev-tools.vercel.app/MD",
       },
+      {
+        id: 8,
+        name: "Box shadow generator",
+        link: "https://web-dev-tools.vercel.app/customizer/box-shadow-generator",
+      },
     ];
 
     const filteredData = toolList.filter(

src/app/components/Footer/index.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { FaGithub, FaHome } from "react-icons/fa";
+
+const Footer = () => {
+  return (
+    <footer class="w-[26rem] md:w-[40rem] max-w-full bg-white rounded-lg shadow m-4 dark:bg-gray-800">
+      <div class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between">
+        <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">
+          © {new Date().getFullYear()}{" "}
+          <a href="https://web-dev-tools.vercel.app/" class="hover:underline">
+            WebDevTools
+          </a>
+          . All Rights Reserved.
+        </span>{" "}
+        &emsp;
+        <ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0">
+          <li>
+            <a
+              href="https://web-dev-tools.vercel.app/"
+              class="mr-4 hover:underline md:mr-6 flex items-center justify-center gap-2"
+            >
+              <FaHome />
+              Home
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://github.com/Bashamega/WebDevTools"
+              class="hover:underline flex items-center justify-center gap-2"
+            >
+              <FaGithub />
+              Repository
+            </a>
+          </li>
+        </ul>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/app/components/Input/InputRange.js

@@ -0,0 +1,21 @@
+const InputRange = ({ name, value, onChange }) => {
+  return (
+    <div>
+      <h2 className=" text-white">
+        {name}:{value}
+      </h2>
+      <input
+        type="range"
+        id="h-offset"
+        name="h-offset"
+        className="w-full "
+        min="0"
+        max="25"
+        value={value}
+        onChange={onChange}
+      />
+    </div>
+  );
+};
+
+export default InputRange;

src/app/customizer/box-shadow-generator/page.js

@@ -0,0 +1,151 @@
+"use client";
+import React, { useState } from "react";
+import Search from "@/app/assets/search";
+import InputRange from "@/app/components/Input/InputRange";
+import Footer from "@/app/components/Footer";
+import Swal from "sweetalert2";
+
+const page = () => {
+  const [shadow, setShadow] = useState({
+    hOffset: 0,
+    vOffset: 8,
+    blur: 24,
+    spread: 0,
+    color: "#00000080",
+    inset: false,
+  });
+
+  const handleCopyCSSClick = () => {
+    navigator.clipboard
+      .writeText(
+        `box-shadow: ${shadow.hOffset}px ${shadow.vOffset}px ${shadow.blur}px ${
+          shadow.spread
+        }px ${shadow.color} ${shadow.inset ? "inset" : ""} ;`
+      )
+      .then(() => {
+        Swal.fire({
+          title: "Operation is complete!",
+          text: "CSS code copied to clipboard!",
+          icon: "success",
+          confirmButtonColor: "#2563EB",
+        });
+      })
+      .catch((err) => {
+        console.error("Failed to copy text: ", err);
+      });
+  };
+  return (
+    <div>
+      <nav className="bg-blue-500 py-4 px-6 flex items-center justify-between">
+        <a
+          href="https://web-dev-tools.vercel.app/"
+          className="flex items-center border rounded p-2 hover:bg-blue-600 mr-2"
+        >
+          <h1 className="text-white  text-lg md:text-2xl font-bold mr-2">
+            Web Dev Tools
+          </h1>
+          <p>Box Shadow Generator</p>
+        </a>
+        <Search />
+      </nav>
+      <main className=" max-w-6xl m-auto">
+        <div className="flex flex-col gap-3 mt-10 items-center">
+          <h1 className="text-5xl font-extrabold text-center">
+            Box Shadow Generator
+          </h1>
+          <p className="text-slate-400 text-center">
+            Create and export beautiful box shadow.
+          </p>
+        </div>
+        <div className="flex justify-between flex-col md:flex-row mb-[100px] mt-[50px] w-full md:h-[382px] max-w-6xl mx-auto gap-8 px-4">
+          <div className=" bg-white justify-center items-center rounded-2xl flex  w-full h-full overflow-hidden py-[41px]">
+            <div
+              className="h-[300px] w-[300px] border"
+              style={{
+                boxShadow: `${shadow.hOffset}px ${shadow.vOffset}px ${
+                  shadow.blur
+                }px ${shadow.spread}px ${shadow.color} ${
+                  shadow.inset ? "inset" : ""
+                }`,
+              }}
+            ></div>
+          </div>{" "}
+          <div className="w-full flex flex-col justify-between rounded-2xl px-14 py-8 bg-slate-500 h-full">
+            <div className="grid grid-cols-2 gap-2">
+              <InputRange
+                value={shadow.hOffset}
+                name={"h-offset"}
+                onChange={(e) =>
+                  setShadow({ ...shadow, hOffset: e.target.value })
+                }
+              />
+              <InputRange
+                value={shadow.vOffset}
+                name={"v-offset"}
+                onChange={(e) =>
+                  setShadow({ ...shadow, vOffset: e.target.value })
+                }
+              />
+              <InputRange
+                value={shadow.blur}
+                name={"blur"}
+                onChange={(e) => setShadow({ ...shadow, blur: e.target.value })}
+              />
+              <InputRange
+                value={shadow.spread}
+                name={"blur"}
+                onChange={(e) =>
+                  setShadow({ ...shadow, spread: e.target.value })
+                }
+              />
+              <div>
+                <h2 className=" text-white">color:{shadow.color}</h2>
+                <input
+                  type="color"
+                  value={shadow.color}
+                  id="color"
+                  name="color"
+                  onChange={(e) =>
+                    setShadow({ ...shadow, color: e.target.value })
+                  }
+                />
+              </div>
+              <div>
+                <h2 className=" text-white">inset:</h2>
+                <input
+                  type="checkbox"
+                  id="inset"
+                  className="w-6 h-6"
+                  name="inset"
+                  onChange={(e) => {
+                    setShadow({ ...shadow, inset: e.target.checked });
+                  }}
+                />
+              </div>
+            </div>
+            <div>
+              <h3 className="my-2 py-4 px-3 bg-black rounded-lg">{`box-shadow: ${
+                shadow.hOffset
+              }px ${shadow.vOffset}px ${shadow.blur}px ${shadow.spread}px ${
+                shadow.color
+              } ${shadow.inset ? "inset" : ""};`}</h3>
+              <div className="w-full relative py-2">
+                <button
+                  className="rounded-lg bg-blue-600 p-3 text-md font-semibold text-white w-full text-center border outline-none border-blue-600 active:scale-95 transition-transform duration-200"
+                  onClick={() => handleCopyCSSClick()}
+                >
+                  Copy CSS
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="flex justify-center">
+          <Footer />
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default page;

src/app/globals.css

@@ -5,7 +5,7 @@
 @media screen and (max-width: 1024px) {
   .custom-color-picker .react-colorful {
     width: 270px;
-    height: 270px
+    height: 270px;
   }
 }
 
@@ -17,12 +17,10 @@
 }
 
 @layer components {
-
   .custom-color-picker .react-colorful {
     width: 400px;
-    height: 400px;   
+    height: 400px;
   }
-
 }
 
 :root {