zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(site): source URL auto-detection for installation page (#619)

Browse Source 
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Darius Cepulis
2026-02-26 09:19:28 -06:00
committed by GitHub
co-authored by Claude Opus 4.6
parent 897a5af7f6
commit efd322ad07
9 changed files with 857 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/ImageRadioGroup.tsx
+5 -20
View File
@@ -17,8 +17,6 @@ export interface ImageRadioGroupProps<T = string> {
options: ImageRadioOption<T>[];
'aria-label': string;
className?: string;
size?: 'sm' | 'md';
labelPosition?: 'block' | 'inline';
}
export default function ImageRadioGroup<T extends string = string>({
@@ -27,21 +25,15 @@ export default function ImageRadioGroup<T extends string = string>({
options,
'aria-label': ariaLabel,
className,
size = 'md',
labelPosition = 'block',
}: ImageRadioGroupProps<T>) {
const boxSize = size === 'sm' ? 8 : 20;
return (
<RadioGroup
value={value}
onValueChange={(newValue) => onChange(newValue as T)}
aria-label={ariaLabel}
className={twMerge(clsx('grid auto-rows-min', size === 'sm' && 'gap-2', size === 'md' && 'gap-4'), className)}
className={twMerge(clsx('grid auto-rows-min gap-4'), className)}
style={{
gridTemplateColumns:
labelPosition === 'block'
? `repeat(auto-fill, minmax(calc(var(--spacing) * ${boxSize}), 1fr))`
: 'repeat(auto-fill, minmax(calc(var(--spacing) * 40), 1fr))',
gridTemplateColumns: `repeat(auto-fill, minmax(calc(var(--spacing) * 20), 1fr))`,
}}
>
{options.map((option) => {
@@ -52,18 +44,15 @@ export default function ImageRadioGroup<T extends string = string>({
<Radio.Root
value={option.value}
className={clsx(
'group inline-flex items-center gap-2',
isDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
labelPosition === 'block' ? 'flex-col' : 'flex-row'
'group inline-flex items-center gap-2 flex-col',
isDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
)}
key={option.value}
disabled={isDisabled}
>
<div
className={clsx(
'relative flex items-center justify-center aspect-square',
size === 'sm' && 'rounded-lg',
size === 'md' && 'rounded-xl',
'relative flex items-center justify-center aspect-square w-full rounded-xl',
'border border-light-40 dark:border-dark-80',
isSelected
? 'bg-light-60 dark:bg-dark-90'
@@ -71,10 +60,6 @@ export default function ImageRadioGroup<T extends string = string>({
'bg-light-80 dark:bg-dark-100 group-intent:bg-light-60/50 dark:group-intent:bg-dark-90/50',
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-yellow/50'
)}
style={{
width: labelPosition === 'block' ? '100%' : undefined,
height: labelPosition === 'inline' ? `calc(var(--spacing) * ${boxSize})` : undefined,
}}
>
<Radio.Indicator className="sr-only" />
<div className="flex items-center justify-center w-full h-full">{option.image}</div>