mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2026-07-26 09:54:43 +10:00
Amruth Pillai
99c602e3c7
* Migrate from Biome to Oxlint/Oxfmt * pin version of autofix * set version of autofix * pin version of autofix * [autofix.ci] apply automated fixes * better comments, test formatter * [autofix.ci] apply automated fixes * Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
import { cn } from "@/utils/style";
|
|
|
|
type BreakpointIndicatorProps = {
|
|
position?: "top-right" | "bottom-right" | "top-left" | "bottom-left";
|
|
};
|
|
|
|
export function BreakpointIndicator({ position = "bottom-right" }: BreakpointIndicatorProps) {
|
|
const isTop = position.includes("top");
|
|
const isRight = position.includes("right");
|
|
const isLeft = position.includes("left");
|
|
const isBottom = position.includes("bottom");
|
|
|
|
const top = isTop ? "top-0" : "bottom-0";
|
|
const right = isRight ? "inset-e-0" : "inset-s-0";
|
|
const left = isLeft ? "inset-s-0" : "inset-e-0";
|
|
const bottom = isBottom ? "bottom-0" : "top-0";
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"fixed z-50 flex size-10 items-center justify-center bg-blue-900 p-2 font-mono text-xs font-bold text-white opacity-80 transition-opacity hover:opacity-40 print:hidden",
|
|
top,
|
|
right,
|
|
left,
|
|
bottom,
|
|
)}
|
|
>
|
|
<span className="inline sm:hidden">XS</span>
|
|
<span className="hidden sm:inline md:hidden">SM</span>
|
|
<span className="hidden md:inline lg:hidden">MD</span>
|
|
<span className="hidden lg:inline xl:hidden">LG</span>
|
|
<span className="hidden xl:inline 2xl:hidden">XL</span>
|
|
<span className="3xl:hidden hidden 2xl:inline">2XL</span>
|
|
<span className="3xl:inline 4xl:hidden hidden">3XL</span>
|
|
<span className="4xl:inline hidden">4XL</span>
|
|
</div>
|
|
);
|
|
}
|