1import { getTitle } from '../../helpers/title';
2import mdx from './Opacity.mdx';
3
4export default {
5    title: getTitle(__filename, false),
6    parameters: {
7        docs: {
8            page: mdx,
9        },
10    },
11};
12
13const values = ['0', '30', '40', '50', '65', '70', '100'];
14
15const demoItemClasses =
16    'user-select flex items-center justify-center bg-primary rounded-sm text-center';
17
18export const Opacity = () => {
19    return (
20        <div
21            className="border rounded w-full relative flex flex-nowrap gap-2 overflow-auto items-center justify-space-around text-2xs"
22            style={{ height: '9rem' }}
23        >
24            {values.map((value) => (
25                <div
26                    key={value}
27                    className="bg-strong shrink-0 rounded"
28                    style={{ display: 'flow-root', '--border-radius-md': '10%' }}
29                >
30                    <div className={`${demoItemClasses} opacity-${value}`} style={{ width: '4rem', height: '3rem' }}>
31                        opacity-{value}
32                    </div>
33                </div>
34            ))}
35        </div>
36    );
37};