server/assets/js/react/components/Border.tsx

38 lines
1003 B
TypeScript
Raw Normal View History

import * as React from "react"
import clsx from "clsx"
type BorderProps<T extends React.ElementType> = {
as?: T
className?: string
position?: "top" | "left"
invert?: boolean
}
export function Border<T extends React.ElementType = "div">({
as,
className,
position = "top",
invert = false,
...props
}: Omit<React.ComponentPropsWithoutRef<T>, keyof BorderProps<T>> &
BorderProps<T>) {
let Component = as ?? "div"
return (
<Component
className={clsx(
"relative before:absolute after:absolute",
invert
? "before:bg-white after:bg-white/10"
: "before:bg-neutral-950 after:bg-neutral-950/10",
position === "top" &&
"before:left-0 before:top-0 before:h-px before:w-6 after:left-8 after:right-0 after:top-0 after:h-px",
position === "left" &&
"before:left-0 before:top-0 before:h-6 before:w-px after:bottom-0 after:left-0 after:top-8 after:w-px",
className
)}
{...props}
/>
)
}