Spaces:
Running
Running
File size: 1,540 Bytes
a8d792f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
import type React from "react"
import { cn } from "@/lib/utils"
const HudCorners = ({
children,
className,
color = "primary",
size = "md",
layer = "behind",
}: {
children: React.ReactNode
className?: string
color?: "primary" | "whiteMuted"
size?: "sm" | "md" | "lg" | "xl"
layer?: "behind" | "front" | "top"
}) => {
// Define size variants for corner dimensions
const sizeClasses = {
sm: "w-4 h-4", // 16px × 16px - small corners
md: "w-6 h-6", // 24px × 24px - default
lg: "w-8 h-8", // 32px × 32px - large corners
xl: "w-12 h-12", // 48px × 48px - extra large corners
}
// Define layer/z-index variants
const layerClasses = {
behind: "z-0", // Behind content (default behavior)
front: "z-10", // Above most content
top: "z-50", // Above almost everything (modals, dropdowns, etc.)
}
const cornerClasses = `absolute ${sizeClasses[size]} ${layerClasses[layer]}`
const colorClasses = color === "primary" ? "border-primary/80" : "border-muted-foreground/30"
return (
<div className={cn("relative", className)}>
<div className={`${cornerClasses} ${colorClasses} top-0 left-0 border-t border-l`}></div>
<div className={`${cornerClasses} ${colorClasses} top-0 right-0 border-t border-r`}></div>
<div className={`${cornerClasses} ${colorClasses} bottom-0 left-0 border-b border-l`}></div>
<div className={`${cornerClasses} ${colorClasses} bottom-0 right-0 border-b border-r`}></div>
{children}
</div>
)
}
export default HudCorners
|