33 lines
799 B
TypeScript
33 lines
799 B
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import * as React from "react"
|
||
|
|
|
||
|
|
type SpacerOrientation = "horizontal" | "vertical"
|
||
|
|
|
||
|
|
interface SpacerProps extends React.HTMLAttributes<HTMLDivElement> {
|
||
|
|
orientation?: SpacerOrientation
|
||
|
|
size?: string | number
|
||
|
|
}
|
||
|
|
|
||
|
|
export const Spacer = React.forwardRef<HTMLDivElement, SpacerProps>(
|
||
|
|
(
|
||
|
|
{ orientation = "horizontal", size, className = "", style = {}, ...props },
|
||
|
|
ref
|
||
|
|
) => {
|
||
|
|
const computedStyle = {
|
||
|
|
...style,
|
||
|
|
...(orientation === "horizontal" && !size && { flex: 1 }),
|
||
|
|
...(size && {
|
||
|
|
width: orientation === "vertical" ? "1px" : size,
|
||
|
|
height: orientation === "horizontal" ? "1px" : size,
|
||
|
|
}),
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div ref={ref} {...props} className={className} style={computedStyle} />
|
||
|
|
)
|
||
|
|
}
|
||
|
|
)
|
||
|
|
|
||
|
|
Spacer.displayName = "Spacer"
|