66 lines
1.4 KiB
TypeScript
66 lines
1.4 KiB
TypeScript
import { Box } from '@pikku/mantine/core';
|
|
import React from 'react';
|
|
|
|
interface CSSArrowSeparatorProps {
|
|
/**
|
|
* Color of the arrow (default: dimmed)
|
|
*/
|
|
color?: string;
|
|
/**
|
|
* Size of the arrow in pixels (default: 20)
|
|
*/
|
|
size?: number;
|
|
/**
|
|
* Margin around the component (default: 'lg')
|
|
*/
|
|
margin?: string | number;
|
|
}
|
|
|
|
export const CSSArrowSeparator: React.FC<CSSArrowSeparatorProps> = ({
|
|
color = 'var(--mantine-color-dimmed)',
|
|
size = 20,
|
|
margin = 'lg'
|
|
}) => {
|
|
return (
|
|
<Box style={{ margin }}>
|
|
{/* Top horizontal line */}
|
|
<Box
|
|
style={{
|
|
width: '100%',
|
|
height: '1px',
|
|
backgroundColor: color,
|
|
marginBottom: '4px',
|
|
}}
|
|
/>
|
|
|
|
{/* Arrow pointing down */}
|
|
<Box
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<Box
|
|
style={{
|
|
width: 0,
|
|
height: 0,
|
|
borderLeft: `${size}px solid transparent`,
|
|
borderRight: `${size}px solid transparent`,
|
|
borderTop: `${size}px solid ${color}`,
|
|
}}
|
|
/>
|
|
</Box>
|
|
|
|
{/* Bottom horizontal line */}
|
|
<Box
|
|
style={{
|
|
width: '100%',
|
|
height: '1px',
|
|
backgroundColor: color,
|
|
marginTop: '4px',
|
|
}}
|
|
/>
|
|
</Box>
|
|
);
|
|
}; |