From b3d65cc7df034d8678ac59f7ab30b9617e9415a6 Mon Sep 17 00:00:00 2001
From: NFish <douxc512@gmail.com>
Date: Tue, 26 Nov 2024 17:44:56 +0800
Subject: [PATCH] Feat: Divider component now supports gradient background
 (#11130)

---
 web/app/components/base/divider/index.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/web/app/components/base/divider/index.tsx b/web/app/components/base/divider/index.tsx
index 4b351dea99..fcee10a9e2 100644
--- a/web/app/components/base/divider/index.tsx
+++ b/web/app/components/base/divider/index.tsx
@@ -3,17 +3,21 @@ import React from 'react'
 import { type VariantProps, cva } from 'class-variance-authority'
 import classNames from '@/utils/classnames'
 
-const dividerVariants = cva(
-  'bg-divider-regular',
+const dividerVariants = cva('',
   {
     variants: {
       type: {
-        horizontal: 'w-full h-[0.5px] my-2',
+        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',
     },
   },
 )
@@ -23,9 +27,9 @@ type DividerProps = {
   style?: CSSProperties
 } & VariantProps<typeof dividerVariants>
 
-const Divider: FC<DividerProps> = ({ type, className = '', style }) => {
+const Divider: FC<DividerProps> = ({ type, bgStyle, className = '', style }) => {
   return (
-    <div className={classNames(dividerVariants({ type }), className)} style={style}></div>
+    <div className={classNames(dividerVariants({ type, bgStyle }), className)} style={style}></div>
   )
 }