bartvdbraak/hellob.art
1
0
Fork 0
mirror of https://github.com/bartvdbraak/hellob.art.git synced 2025-10-29 19:29:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: simplify tailwind breakpoint indicator

Browse source
This commit is contained in:
Bart van der Braak 2023-06-15 23:17:11 +02:00
parent 43713f721a
commit 3dea32828f
1 changed files with 17 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

23
components/tailwind-indicator.tsx
View file

@ -1,16 +1,25 @@
export function TailwindIndicator() { export function TailwindIndicator() {
if (process.env.NODE_ENV === "production") return null; if (process.env.NODE_ENV === "production") return null;
const breakpoints = [
{ name: "xs", css: "block sm:hidden" },
{
name: "sm",
css: "hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden",
},
{ name: "md", css: "hidden md:block lg:hidden xl:hidden 2xl:hidden" },
{ name: "lg", css: "hidden lg:block xl:hidden 2xl:hidden" },
{ name: "xl", css: "hidden xl:block 2xl:hidden" },
{ name: "2xl", css: "hidden 2xl:block" },
];
return ( return (
<div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white"> <div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
<div className="block sm:hidden">xs</div> {breakpoints.map((breakpoint) => (
<div className="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden"> <div key={breakpoint.name} className={breakpoint.css}>
sm {breakpoint.name}
</div> </div>
<div className="hidden md:block lg:hidden xl:hidden 2xl:hidden">md</div> ))}
<div className="hidden lg:block xl:hidden 2xl:hidden">lg</div>
<div className="hidden xl:block 2xl:hidden">xl</div>
<div className="hidden 2xl:block">2xl</div>
</div> </div>
); );
} }