37 lines
942 B
TypeScript
Raw Permalink Normal View History

2023-05-15 08:51:32 +08:00
import type { CSSProperties, FC } from 'react'
import React from 'react'
import { type VariantProps, cva } from 'class-variance-authority'
import classNames from '@/utils/classnames'
2023-05-15 08:51:32 +08:00
const dividerVariants = cva('',
{
variants: {
type: {
horizontal: 'w-full h-[0.5px] my-2 ',
vertical: 'w-[1px] h-full mx-2',
},
bgStyle: {
gradient: 'bg-gradient-to-r from-divider-regular to-background-gradient-mask-transparent',
solid: 'bg-divider-regular',
},
},
defaultVariants: {
type: 'horizontal',
bgStyle: 'solid',
},
},
)
export type DividerProps = {
2023-05-15 08:51:32 +08:00
className?: string
style?: CSSProperties
} & VariantProps<typeof dividerVariants>
2023-05-15 08:51:32 +08:00
const Divider: FC<DividerProps> = ({ type, bgStyle, className = '', style }) => {
2023-05-15 08:51:32 +08:00
return (
<div className={classNames(dividerVariants({ type, bgStyle }), className)} style={style}></div>
2023-05-15 08:51:32 +08:00
)
}
export default Divider