Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

tailwindcss integration for the border box #194

Merged
merged 2 commits into from
Jul 22, 2024
Merged

tailwindcss integration for the border box #194

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8f992f4
tailwindcss copy border box
SureshPradhana Jul 22, 2024
84ef4f7
fix: black footer
SureshPradhana Jul 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 31 additions & 2 deletions src/app/customizer/box-shadow-generator/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,24 @@ const Page = () => {
console.error("Failed to copy text: ", err);
});
};
const handleCopyTailwindClick = () => {
navigator.clipboard
.writeText(
`shadow-[${shadow.inset ? "inset_" : ""}${shadow.hOffset}px_${shadow.vOffset}px_${shadow.blur}px_${shadow.spread}px_${shadow.color}]`

)
.then(() => {
Swal.fire({
title: "Operation is complete!",
text: "TailwindCSS code copied to clipboard!",
icon: "success",
confirmButtonColor: "#2563EB",
});
})
.catch((err) => {
console.error("Failed to copy text: ", err);
});
};

return (
<div
Expand All @@ -48,7 +66,7 @@ const Page = () => {
isDarkMode={isDarkMode}
toggleTheme={toggleTheme}
/>
<main className=" max-w-6xl m-auto min-w-80">
<main className=" h-[100vh] max-w-6xl m-auto min-w-80">
<div className="flex flex-col gap-3 mt-10 items-center">
<h1 className="text-5xl font-extrabold text-center">
Box Shadow Generator
Expand All @@ -69,7 +87,7 @@ const Page = () => {
></div>
</div>
<div
className={`w-full flex flex-col justify-between rounded-2xl px-14 py-8 ${isDarkMode ? "bg-slate-800" : "bg-slate-500"} h-full`}
className={`w-full h-max flex flex-col justify-between rounded-2xl px-14 py-8 ${isDarkMode ? "bg-slate-800" : "bg-slate-500"} h-full`}
>
<div className="grid grid-cols-2 gap-2">
<InputRange
Expand Down Expand Up @@ -127,6 +145,9 @@ const Page = () => {
<h3 className="my-2 py-4 px-3 bg-gray-700 rounded-lg text-white">
{`box-shadow: ${shadow.hOffset}px ${shadow.vOffset}px ${shadow.blur}px ${shadow.spread}px ${shadow.color} ${shadow.inset ? "inset" : ""};`}
</h3>
<h3 className="my-2 py-4 px-3 bg-gray-700 rounded-lg text-white">
{`shadow-[${shadow.inset ? "inset_" : ""}${shadow.hOffset}px_${shadow.vOffset}px_${shadow.blur}px_${shadow.spread}px_${shadow.color}]`}
</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 hover:bg-blue-700 hover:border-blue-700"
Expand All @@ -135,6 +156,14 @@ const Page = () => {
Copy CSS
</button>
</div>
<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 hover:bg-blue-700 hover:border-blue-700"
onClick={handleCopyTailwindClick}
>
Copy TailwindCSS
</button>
</div>
</div>
</div>
</div>
Expand Down
Loading