-
Notifications
You must be signed in to change notification settings - Fork 59
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #70 from begench-g/feature/box-shadow-generator
feature: box shadow generator feature added
- Loading branch information
Showing
6 changed files
with
226 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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>{" "} | ||
|   | ||
| <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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters