1import { useState } from 'react';
2
3import { Radio, RadioGroup } from '@proton/components';
4
5import { getTitle } from '../../helpers/title';
6import mdx from './Radio.mdx';
7
8export default {
9    component: Radio,
10    title: getTitle(__filename, false),
11    parameters: {
12        docs: {
13            page: mdx,
14        },
15    },
16};
17
18const weather = ['Snow', 'Sunshine', 'Rain'] as const;
19
20export const Basic = () => {
21    const [selectedColor, setSelectedColor] = useState<(typeof weather)[number] | undefined>(undefined);
22
23    return (
24        <div>
25            <RadioGroup
26                name="selected-weather"
27                onChange={(v) => setSelectedColor(v)}
28                value={selectedColor}
29                options={weather.map((option) => ({ value: option, label: option }))}
30            />
31        </div>
32    );
33};