James BruntonandGitHub
d2b38ef4b8
# Description of Changes Move frontend code into `core` folder and add infrastructure for `proprietary` folder to include premium, non-OSS features
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import '@app/components/shared/dividerWithText/DividerWithText.css';
|
|
|
|
interface TextDividerProps {
|
|
text?: string
|
|
className?: string
|
|
style?: React.CSSProperties
|
|
variant?: 'default' | 'subcategory'
|
|
respondsToDarkMode?: boolean
|
|
opacity?: number
|
|
}
|
|
|
|
export default function DividerWithText({ text, className = '', style, variant = 'default', respondsToDarkMode = true, opacity }: TextDividerProps) {
|
|
const variantClass = variant === 'subcategory' ? 'subcategory' : '';
|
|
const themeClass = respondsToDarkMode ? '' : 'force-light';
|
|
const styleWithOpacity = opacity !== undefined ? { ...(style || {}), ['--text-divider-opacity' as any]: opacity } : style;
|
|
|
|
if (text) {
|
|
return (
|
|
<div
|
|
className={`text-divider ${variantClass} ${themeClass} ${className}`}
|
|
style={styleWithOpacity}
|
|
>
|
|
<div className="text-divider__rule" />
|
|
<span className="text-divider__label">{text}</span>
|
|
<div className="text-divider__rule" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`h-px my-2.5 ${themeClass} ${className}`}
|
|
style={styleWithOpacity}
|
|
/>
|
|
);
|
|
}
|