1import { useState } from 'react';
2
3import { Button } from '@proton/atoms';
4import {
5    DrawerAppHeadline,
6    DrawerAppScrollContainer,
7    DrawerAppSection,
8    Info,
9    Option,
10    QuickSettingsSectionRow,
11    SelectTwo,
12    Toggle,
13} from '@proton/components';
14
15import { getTitle } from '../../helpers/title';
16import mdx from './QuickSettings.mdx';
17
18export default {
19    component: DrawerAppScrollContainer,
20    title: getTitle(__filename, false),
21    parameters: {
22        docs: {
23            page: mdx,
24        },
25    },
26};
27
28export const Basic = () => {
29    const [value1, setValue1] = useState('ant');
30    const [value2, setValue2] = useState('grid');
31    const [value3, setValue3] = useState('week');
32    const [isChecked1, setIsChecked1] = useState(true);
33    const [isChecked2, setIsChecked2] = useState(true);
34
35    return (
36        <div className="quickSettings py-2" style={{ width: '280px', 'min-height': '400px' }}>
37            <DrawerAppScrollContainer>
38                <DrawerAppSection>
39                    <QuickSettingsSectionRow
40                        label="Select"
41                        action={
42                            <SelectTwo
43                                unstyled
44                                originalPlacement="bottom-end"
45                                value={value1}
46                                onChange={({ value: v }) => setValue1(v)}
47                            >
48                                <Option title="Ant" value="ant" />
49                                <Option title="Zebra" value="zebra" />
50                            </SelectTwo>
51                        }
52                    />
53                </DrawerAppSection>
54                <DrawerAppSection>
55                    <QuickSettingsSectionRow
56                        label="Toggle"
57                        labelInfo={<Info title="Optional info tooltip" />}
58                        action={
59                            <Toggle
60                                id="toggle-basic"
61                                checked={isChecked1}
62                                onChange={() => {
63                                    setIsChecked1(!isChecked1);
64                                }}
65                            />
66                        }
67                    />
68                </DrawerAppSection>
69                <DrawerAppSection>
70                    <DrawerAppHeadline>Optional Headline</DrawerAppHeadline>
71                    <QuickSettingsSectionRow
72                        label="Layout"
73                        action={
74                            <SelectTwo
75                                unstyled
76                                originalPlacement="bottom-end"
77                                value={value2}
78                                onChange={({ value: v }) => setValue2(v)}
79                            >
80                                <Option title="Grid" value="grid" />
81                                <Option title="Row" value="row" />
82                            </SelectTwo>
83                        }
84                    />
85                    <QuickSettingsSectionRow
86                        label="View"
87                        action={
88                            <SelectTwo
89                                unstyled
90                                originalPlacement="bottom-end"
91                                value={value3}
92                                onChange={({ value: v }) => setValue3(v)}
93                            >
94                                <Option title="Day" value="day" />
95                                <Option title="Week" value="week" />
96                                <Option title="Month" value="month" />
97                            </SelectTwo>
98                        }
99                    />
100
101                    <QuickSettingsSectionRow
102                        label="Toggle"
103                        action={
104                            <Toggle
105                                id="toggle-basic2"
106                                checked={isChecked2}
107                                onChange={() => {
108                                    setIsChecked2(!isChecked2);
109                                }}
110                            />
111                        }
112                    />
113                </DrawerAppSection>
114
115                <Button onClick={() => {}} className="shrink-0 text-sm mx-auto" shape="ghost" color="norm">
116                    Action
117                </Button>
118            </DrawerAppScrollContainer>
119        </div>
120    );
121};