e88ae7268a
This commit updates a variety of user interface styles and interactivity across multiple components. Changes include altering color schemes and border styles, modifying button interactivity and behaviors, and updating font weights. An emphasis has been placed on enhancing visual appearance, improving user experience, and maintaining a more consistent look-and-feel across the application.
71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
|
|
import { CheckIcon } from '@radix-ui/react-icons';
|
|
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
|
|
|
|
import { cn } from '../utils/cn';
|
|
|
|
const RadioGroup = React.forwardRef<
|
|
React.ElementRef<typeof RadioGroupPrimitive.Root>,
|
|
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
|
|
>(({ className, ...props }, ref) => {
|
|
return (
|
|
<RadioGroupPrimitive.Root
|
|
className={cn('grid gap-2', className)}
|
|
{...props}
|
|
ref={ref}
|
|
/>
|
|
);
|
|
});
|
|
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
|
|
|
|
const RadioGroupItem = React.forwardRef<
|
|
React.ElementRef<typeof RadioGroupPrimitive.Item>,
|
|
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
|
|
>(({ className, ...props }, ref) => {
|
|
return (
|
|
<RadioGroupPrimitive.Item
|
|
ref={ref}
|
|
className={cn(
|
|
'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
|
|
<CheckIcon className="h-3.5 w-3.5 fill-primary" />
|
|
</RadioGroupPrimitive.Indicator>
|
|
</RadioGroupPrimitive.Item>
|
|
);
|
|
});
|
|
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
|
|
|
|
const RadioGroupItemLabel = (
|
|
props: React.PropsWithChildren<{
|
|
className?: string;
|
|
selected?: boolean;
|
|
}>,
|
|
) => {
|
|
return (
|
|
<label
|
|
className={cn(
|
|
props.className,
|
|
'flex cursor-pointer rounded-md' +
|
|
' items-center space-x-4 border border-input' +
|
|
' transition-duration-500 p-4 text-sm transition-all focus-within:border-primary',
|
|
{
|
|
[`border-primary`]: props.selected,
|
|
[`hover:border-primary`]: !props.selected,
|
|
},
|
|
)}
|
|
>
|
|
{props.children}
|
|
</label>
|
|
);
|
|
};
|
|
RadioGroupItemLabel.displayName = 'RadioGroupItemLabel';
|
|
|
|
export { RadioGroup, RadioGroupItem, RadioGroupItemLabel };
|