1import { useState } from 'react';
2
3import { Button } from '@proton/atoms/Button/Button';
4import { Checkbox } from '@proton/components';
5
6import Card from './Card';
7import mdx from './Card.mdx';
8
9export default {
10    component: Card,
11    title: 'components/Card',
12    parameters: { docs: { page: mdx } },
13};
14
15export const Basic = () => (
16    <Card>
17        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit doloribus nobis eos iusto. Ducimus numquam laborum
18        aliquid culpa! Dolor voluptatem modi inventore error, qui repudiandae consequatur autem vitae illum
19        voluptatibus?
20    </Card>
21);
22
23export const WithActionHorizontal = () => (
24    <Card className="flex items-center">
25        <p className="m-0 mr-8 flex-1">
26            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore ipsa dolores delectus fugit consequuntur
27            impedit velit officia tenetur, magni placeat, voluptatum porro unde repudiandae cum explicabo assumenda
28            distinctio, mollitia voluptate.
29        </p>
30        <Button color="norm">Upgrade</Button>
31    </Card>
32);
33
34const toggles = ['bordered', 'rounded', 'background'] as const;
35
36export const Sandbox = () => {
37    const [selectedToggles, setSelectedToggles] = useState([true, false, true]);
38
39    const tabsExample = (
40        <Card
41            {...selectedToggles.reduce<{ [key: string]: boolean }>((acc, value, i) => {
42                acc[toggles[i]] = value;
43                return acc;
44            }, {})}
45        >
46            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit doloribus nobis eos iusto. Ducimus numquam
47            laborum aliquid culpa! Dolor voluptatem modi inventore error, qui repudiandae consequatur autem vitae illum
48            voluptatibus?
49        </Card>
50    );
51
52    return (
53        <div className="flex items-stretch py-7">
54            <div>{tabsExample}</div>
55            <div className="mr-8">
56                <strong className="block mt-4">Options</strong>
57                {toggles.map((prop, i) => {
58                    return (
59                        <div className="mb-2">
60                            <Checkbox
61                                checked={selectedToggles[i]}
62                                onChange={({ target: { checked } }) => {
63                                    setSelectedToggles(
64                                        selectedToggles.map((oldValue, otherIndex) =>
65                                            otherIndex === i ? checked : oldValue
66                                        )
67                                    );
68                                }}
69                            >
70                                {prop}
71                            </Checkbox>
72                        </div>
73                    );
74                })}
75            </div>
76        </div>
77    );
78};