Initial commit

app/components/base/divider/index.tsx

@@ -0,0 +1,36 @@
+import type { CSSProperties, FC } from 'react'
+import React from 'react'
+import { type VariantProps, cva } from 'class-variance-authority'
+import classNames from '@/utils/classnames'
+
+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 = {
+  className?: string
+  style?: CSSProperties
+} & VariantProps<typeof dividerVariants>
+
+const Divider: FC<DividerProps> = ({ type, bgStyle, className = '', style }) => {
+  return (
+    <div className={classNames(dividerVariants({ type, bgStyle }), className)} style={style}></div>
+  )
+}
+
+export default Divider

app/components/base/divider/with-label.tsx

@@ -0,0 +1,23 @@
+import type { FC } from 'react'
+import type { DividerProps } from '.'
+import Divider from '.'
+import classNames from '@/utils/classnames'
+
+export type DividerWithLabelProps = DividerProps & {
+  label: string
+}
+
+export const DividerWithLabel: FC<DividerWithLabelProps> = (props) => {
+  const { label, className, ...rest } = props
+  return <div
+    className="flex items-center gap-2 my-2"
+  >
+    <Divider {...rest} className={classNames('flex-1', className)} />
+    <span className="text-text-tertiary text-xs">
+      {label}
+    </span>
+    <Divider {...rest} className={classNames('flex-1', className)} />
+  </div>
+}
+
+export default DividerWithLabel