action panel tabs

This commit is contained in:
JzoNg
2024-10-27 12:36:54 +08:00
parent aba48749da
commit 8c25915d2b
2 changed files with 41 additions and 46 deletions

View File

@ -3,12 +3,12 @@ import type { FC } from 'react'
import React from 'react'
import cn from '@/utils/classnames'
type Option = {
interface Option {
value: string
text: string | JSX.Element
}
type ItemProps = {
interface ItemProps {
className?: string
isActive: boolean
onClick: (v: string) => void
@ -23,10 +23,10 @@ const Item: FC<ItemProps> = ({
return (
<div
key={option.value}
className={cn(className, !isActive && 'cursor-pointer', 'relative pb-2.5 leading-6 text-base font-semibold')}
className={cn('relative pb-2.5 text-text-tertiary system-sm-semibold-uppercase', !isActive && 'cursor-pointer', className)}
onClick={() => !isActive && onClick(option.value)}
>
<div className={cn(isActive ? 'text-gray-900' : 'text-gray-600')}>{option.text}</div>
<div className={cn(isActive && 'text-text-primary')}>{option.text}</div>
{isActive && (
<div className='absolute bottom-0 left-0 right-0 h-0.5 bg-[#155EEF]'></div>
)}
@ -34,7 +34,7 @@ const Item: FC<ItemProps> = ({
)
}
type Props = {
interface Props {
className?: string
value: string
onChange: (v: string) => void
@ -52,7 +52,7 @@ const TabSlider: FC<Props> = ({
itemClassName,
}) => {
return (
<div className={cn(className, !noBorderBottom && 'border-b border-[#EAECF0]', 'flex space-x-6')}>
<div className={cn('flex space-x-6', !noBorderBottom && 'border-b border-[#EAECF0]', className)}>
{options.map(option => (
<Item
isActive={option.value === value}