File size: 1,366 Bytes
f56a29b | 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 | import type { OperateBorderLines } from '@/lib/types/edit';
interface BorderLineProps {
readonly type: OperateBorderLines;
readonly isWide?: boolean;
readonly style?: React.CSSProperties;
readonly className?: string;
}
export function BorderLine({ type, isWide = false, style, className }: BorderLineProps) {
const borderClass = {
top: 'border-t',
bottom: 'border-b',
left: 'border-l',
right: 'border-r',
}[type];
const wideBeforeClass = isWide
? {
top: 'before:absolute before:-top-2 before:-left-2 before:w-[calc(100%+16px)] before:h-4 before:bg-transparent before:cursor-move before:content-[""]',
bottom:
'before:absolute before:-bottom-2 before:-left-2 before:w-[calc(100%+16px)] before:h-4 before:bg-transparent before:cursor-move before:content-[""]',
left: 'before:absolute before:-top-2 before:-left-2 before:w-4 before:h-[calc(100%+16px)] before:bg-transparent before:cursor-move before:content-[""]',
right:
'before:absolute before:-top-2 before:-right-2 before:w-4 before:h-[calc(100%+16px)] before:bg-transparent before:cursor-move before:content-[""]',
}[type]
: '';
return (
<div
className={`border-line absolute inset-0 border-dashed border-primary ${borderClass} ${wideBeforeClass} ${className || ''}`}
style={style}
/>
);
}
|