starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-01 06:53:11 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Better SegmentedControl styles

Browse Source
This commit is contained in:
Gregory Schier
2025-01-13 11:08:04 -08:00
parent 587667fe79
commit eea87ac02f
1 changed files with 27 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src-web/components/core/SegmentedControl.tsx
View File

@@ -1,3 +1,4 @@
import classNames from 'classnames';
import { useRef } from 'react'; import { useRef } from 'react';
import { useStateWithDeps } from '../../hooks/useStateWithDeps'; import { useStateWithDeps } from '../../hooks/useStateWithDeps';
import type { IconProps } from './Icon'; import type { IconProps } from './Icon';
@@ -18,10 +19,10 @@ export function SegmentedControl<T extends string>({ value, onChange, options, n
return ( return (
<HStack <HStack
ref={containerRef} ref={containerRef}
space={1}
role="group" role="group"
dir="ltr" dir="ltr"
className="mb-auto bg-surface opacity-0 group-focus-within/markdown:opacity-100 group-hover/markdown:opacity-100 transition-opacity transform-gpu" space={0.5}
className="bg-surface-highlight rounded-md mb-auto opacity-0 group-focus-within/markdown:opacity-100 group-hover/markdown:opacity-100 transition-opacity transform-gpu"
onKeyDown={(e) => { onKeyDown={(e) => {
const selectedIndex = options.findIndex((o) => o.value === selectedValue); const selectedIndex = options.findIndex((o) => o.value === selectedValue);
if (e.key === 'ArrowRight') { if (e.key === 'ArrowRight') {
@@ -37,20 +38,30 @@ export function SegmentedControl<T extends string>({ value, onChange, options, n
} }
}} }}
> >
{options.map((o, i) => ( {options.map((o, i) => {
<IconButton const isSelected = selectedValue === o.value;
size="xs" const isActive = value === o.value;
variant={value === o.value ? 'solid' : 'border'} return (
color={value === o.value ? 'secondary' : 'default'} <IconButton
role="radio" size="xs"
event={{ id: name, value: String(o.value) }} variant={isActive ? "border" : "solid"}
tabIndex={selectedValue === o.value ? 0 : -1} // color={isActive ? "secondary": "default"}
key={i} color={isActive ? "default" : "default"}
title={o.label} role="radio"
icon={o.icon} event={{ id: name, value: String(o.value) }}
onClick={() => onChange(o.value)} tabIndex={isSelected ? 0 : -1}
/> className={classNames(
))} '!px-1.5 !w-auto',
!isActive && 'opacity-disabled',
'focus:ring-border-focus',
)}
key={i}
title={o.label}
icon={o.icon}
onClick={() => onChange(o.value)}
/>
);
})}
</HStack> </HStack>
); );
} }