MicroClub Separator

1'use client';
2 
3import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
4 
5import { cn } from '@/lib/utils';
6 
7type McSeparatorProps = SeparatorPrimitive.Props & {
8  size?: number;
9};
10 
11export default function McSeparator({
12  className,
13  orientation = 'horizontal',
14  size,
15  ...props
16}: McSeparatorProps) {
17  const isVertical = orientation === 'vertical';
18 
19  return (
20    <div className={cn('w-fit', isVertical ? 'h-full' : 'w-full')}>
21      <SeparatorPrimitive
22        data-slot="separator"
23        orientation={orientation}
24        style={{
25          [isVertical ? 'height' : 'width']: size ? `${size}px` : undefined,
26        }}
27        className={cn(
28          'shrink-0 border border-border',
29          isVertical ? 'w-[1px]' : 'h-[1px]',
30          className
31        )}
32        {...props}
33      />
34    </div>
35  );
36}
37 
38export { McSeparator };