material-you-react/app/components/buttons.tsx

87 lines
2.8 KiB
TypeScript
Raw Normal View History

2024-02-01 00:58:19 +03:00
'use client';
import React, { useCallback, useState } from 'react';
2024-02-01 15:23:59 +03:00
import { Button } from '../../src/primitive-components/components';
2024-02-01 00:58:19 +03:00
export default function Buttons() {
const [state, setState] = useState(1);
const callback = useCallback(
() => setState(prevState => prevState + 1),
[state],
);
return (
2024-02-02 13:39:02 +03:00
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
}}
>
2024-02-01 00:58:19 +03:00
<h1> Buttons </h1>
2024-02-02 13:39:02 +03:00
<div
style={{
display: 'flex',
flexDirection: 'row',
gap: '2em',
width: '100%',
height: '100%',
}}
>
2024-02-01 00:58:19 +03:00
<div>
<h2> Default buttons </h2>
<div
style={{
display: 'flex',
flexDirection: 'column',
width: '150px',
gap: '0.5em',
}}
>
<Button
centralRipple
onClick={callback}
variant={'filled'}
>
2024-02-02 13:39:02 +03:00
Label
2024-02-01 00:58:19 +03:00
</Button>
<Button variant={'outlined'}>Label</Button>
<Button variant={'tonal'}>Label</Button>
<Button variant={'elevated'}>Label</Button>
<Button variant={'text'}>Label</Button>
</div>
</div>
<div>
<h2> Buttons with icon </h2>
<div
style={{
display: 'flex',
flexDirection: 'column',
width: '150px',
gap: '0.5em',
}}
>
<Button icon={'add'} variant={'filled'}>
Label
</Button>
<Button icon={'add'} variant={'outlined'}>
Label
</Button>
<Button icon={'add'} variant={'tonal'}>
Label
</Button>
<Button icon={'add'} variant={'elevated'}>
Label
</Button>
<Button icon={'add'} variant={'text'}>
Label
</Button>
</div>
</div>
</div>
</div>
);
}