87 lines
2.8 KiB
TypeScript
87 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import React, { useCallback, useState } from 'react';
|
|
import { Button } from '../../src/primitive-components/components';
|
|
|
|
export default function Buttons() {
|
|
const [state, setState] = useState(1);
|
|
|
|
const callback = useCallback(
|
|
() => setState(prevState => prevState + 1),
|
|
[state],
|
|
);
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<h1> Buttons </h1>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
gap: '2em',
|
|
width: '100%',
|
|
height: '100%',
|
|
}}
|
|
>
|
|
<div>
|
|
<h2> Default buttons </h2>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
width: '150px',
|
|
gap: '0.5em',
|
|
}}
|
|
>
|
|
<Button
|
|
centralRipple
|
|
onClick={callback}
|
|
variant={'filled'}
|
|
>
|
|
Label
|
|
</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>
|
|
);
|
|
}
|