1import { useMemo, useState } from 'react';
2
3import { Button, Input } from '@proton/atoms';
4import type { IconName } from '@proton/components';
5import { ButtonGroup, Icon, Mark } from '@proton/components';
6import iconSvg from '@proton/icons/assets/sprite-icons.svg';
7
8import { getTitle } from '../../helpers/title';
9import mdx from './Icons.mdx';
10
11export default {
12    title: getTitle(__filename, false),
13    parameters: {
14        docs: {
15            page: mdx,
16        },
17    },
18};
19
20type IconProps = React.ComponentProps<typeof Icon>;
21
22const sizes: Required<IconProps>['size'][] = [4, 5, 7, 10, 15];
23
24export const Icons = () => {
25    const [selectedSize, setSelectedSize] = useState<Required<IconProps>['size']>(10);
26    const primaryIconNames: IconName[] = iconSvg.match(/id="ic-([^"]+)/g).map((x: string) => x.replace('id="ic-', ''));
27    const [search, setSearch] = useState('');
28
29    const iconResults = useMemo(() => {
30        if (search.length <= 1) {
31            return primaryIconNames;
32        }
33        return primaryIconNames.filter((x) => x.toLowerCase().includes(search.toLocaleLowerCase()));
34    }, [search]);
35
36    return (
37        <>
38            <div className="flex flex-nowrap gap-4">
39                <Input
40                    prefix={<Icon name="magnifier" />}
41                    placeholder={`Search ${primaryIconNames.length} icons by name…`}
42                    value={search}
43                    onChange={({ target: { value } }) => setSearch(value)}
44                    className="flex-1"
45                />
46                <ButtonGroup>
47                    {sizes.map((size) => (
48                        <Button
49                            onClick={() => setSelectedSize(size)}
50                            selected={size === selectedSize}
51                            title={`Set icon size to ${size}`}
52                        >
53                            {size}
54                        </Button>
55                    ))}
56                </ButtonGroup>
57            </div>
58            <div className="icon-grid mt-8">
59                {iconResults.map((iconName) => (
60                    <div className="border rounded text-center p-4" key={iconName}>
61                        <Icon name={iconName} size={selectedSize} />
62                        <div className="mt-4 text-monospace lh120 user-select">
63                            <Mark value={search}>{iconName}</Mark>
64                        </div>
65                    </div>
66                ))}
67            </div>
68        </>
69    );
70};