My personal website
renderg.host
1import { usePageTheme } from '@/components/Layout/Layout';
2import { cn } from '@/lib/utils';
3import React from 'react';
4import { dividerHorizontal, dividerVertical } from './Divider.styles';
5import { DividerProps } from './Divider.types';
6
7export const Divider: React.FC<DividerProps> = ({ className = '', orientation = 'horizontal' }) => {
8 const pageTheme = usePageTheme();
9
10 // Theme-based divider colors:
11 // Accent: white border
12 // Default: black border in light mode, white in dark
13 const themeClasses =
14 pageTheme === 'accent' ? 'border-bones-white' : 'border-bones-black-20 dark:border-bones-white-20';
15
16 const orientationStyles = orientation === 'vertical' ? dividerVertical : dividerHorizontal;
17
18 return <hr className={cn(orientationStyles, themeClasses, className)} />;
19};