60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import React from "react";
|
|
|
|
interface RadioProps {
|
|
id: string; // Unique ID for the radio button
|
|
name: string; // Group name for the radio button
|
|
value: string; // Value of the radio button
|
|
checked: boolean; // Whether the radio button is checked
|
|
label: string; // Label text for the radio button
|
|
onChange: (value: string) => void; // Handler for when the radio button is toggled
|
|
className?: string; // Optional custom classes for styling
|
|
}
|
|
|
|
const RadioSm: React.FC<RadioProps> = ({
|
|
id,
|
|
name,
|
|
value,
|
|
checked,
|
|
label,
|
|
onChange,
|
|
className = "",
|
|
}) => {
|
|
return (
|
|
<label
|
|
htmlFor={id}
|
|
className={`flex cursor-pointer select-none items-center text-sm text-gray-500 dark:text-gray-400 ${className}`}
|
|
>
|
|
<span className="relative">
|
|
{/* Hidden Input */}
|
|
<input
|
|
type="radio"
|
|
id={id}
|
|
name={name}
|
|
value={value}
|
|
checked={checked}
|
|
onChange={() => onChange(value)}
|
|
className="sr-only"
|
|
/>
|
|
{/* Styled Radio Circle */}
|
|
<span
|
|
className={`mr-2 flex h-4 w-4 items-center justify-center rounded-full border ${
|
|
checked
|
|
? "border-brand-500 bg-brand-500"
|
|
: "bg-transparent border-gray-300 dark:border-gray-700"
|
|
}`}
|
|
>
|
|
{/* Inner Dot */}
|
|
<span
|
|
className={`h-1.5 w-1.5 rounded-full ${
|
|
checked ? "bg-white" : "bg-white dark:bg-[#1e2636]"
|
|
}`}
|
|
></span>
|
|
</span>
|
|
</span>
|
|
{label}
|
|
</label>
|
|
);
|
|
};
|
|
|
|
export default RadioSm;
|