Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

update how tabs looks

This commit is contained in:
Nate Kelley 2025-02-24 15:00:18 -07:00
parent 1997f3d3a8
commit bb7af41bf2
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
2 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/components/ui/segmented/Segmented.stories.tsx
View File

@ -1,5 +1,6 @@
import type { Meta, StoryObj } from '@storybook/react'; import type { Meta, StoryObj } from '@storybook/react';
import { Segmented } from './Segmented'; import { Segmented } from './Segmented';
import { HouseModern } from '../icons';
const meta: Meta<typeof Segmented> = { const meta: Meta<typeof Segmented> = {
title: 'Base/Segmented', title: 'Base/Segmented',
@ -14,9 +15,9 @@ export default meta;
type Story = StoryObj<typeof Segmented>; type Story = StoryObj<typeof Segmented>;
const defaultItems = [ const defaultItems = [
{ value: 'tab1', label: 'Tab 1' }, { value: 'tab1', label: 'Tab 1', icon: <HouseModern /> },
{ value: 'tab2', label: 'Tab 2', disabled: true }, { value: 'tab2', label: 'Tab 2', disabled: true, icon: <HouseModern /> },
{ value: 'tab3', label: 'Tab 3' } { value: 'tab3', label: 'Tab 3', icon: <HouseModern /> }
]; ];
export const Default: Story = { export const Default: Story = {

10
web/src/components/ui/segmented/Segmented.tsx
View File

@ -93,7 +93,8 @@ export const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
onMouseEnter={() => !item.disabled && setHoveredValue(item.value)} onMouseEnter={() => !item.disabled && setHoveredValue(item.value)}
onMouseLeave={() => setHoveredValue(null)} onMouseLeave={() => setHoveredValue(null)}
className={cn( className={cn(
'relative z-10 flex items-center justify-center gap-2 rounded-md px-2.5 text-sm transition-colors', 'relative z-10 flex items-center justify-center gap-x-1.5 gap-y-1 rounded-md transition-colors',
size === 'default' ? 'px-2.5' : 'px-3',
innerHeight, innerHeight,
'focus-visible:ring-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', 'focus-visible:ring-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
selectedValue === item.value selectedValue === item.value
@ -102,10 +103,11 @@ export const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
hoveredValue === item.value && selectedValue !== item.value && 'bg-gray-50/50', hoveredValue === item.value && selectedValue !== item.value && 'bg-gray-50/50',
item.disabled item.disabled
? 'text-foreground/30 hover:text-foreground/30 cursor-not-allowed' ? 'text-foreground/30 hover:text-foreground/30 cursor-not-allowed'
: 'cursor-pointer' : 'cursor-pointer',
size === 'large' ? 'flex-col' : 'flex-row'
)}> )}>
{item.icon && <span className="flex items-center">{item.icon}</span>} {item.icon && <span className={cn('flex items-center text-sm')}>{item.icon}</span>}
{item.label} <span className={cn('text-sm')}>{item.label}</span>
</Tabs.Trigger> </Tabs.Trigger>
))} ))}
</Tabs.List> </Tabs.List>