2024-02-03 00:34:54 +03:00
|
|
|
import React from 'react';
|
|
|
|
import { Card } from '../src/primitive-components/card/card';
|
|
|
|
import { CardActionArea } from '../src/primitive-components/card/card-action-area';
|
|
|
|
import { Button } from '../src/primitive-components/button-components/button/button';
|
|
|
|
|
|
|
|
const cardStyles = { width: '256px', aspectRatio: 1 };
|
2024-02-01 00:58:19 +03:00
|
|
|
|
2024-01-31 23:46:06 +03:00
|
|
|
export default function Page() {
|
2024-02-01 00:58:19 +03:00
|
|
|
return (
|
2024-02-03 00:34:54 +03:00
|
|
|
<main>
|
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
display: 'flex',
|
|
|
|
flexDirection: 'column',
|
|
|
|
alignItems: 'center',
|
|
|
|
gap: '8px',
|
|
|
|
padding: '8px',
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<div style={{ display: 'flex', gap: '8px' }}>
|
|
|
|
<Card style={cardStyles} variant={'filled'}>
|
|
|
|
<CardActionArea>
|
|
|
|
<h1>Header</h1>
|
|
|
|
</CardActionArea>
|
|
|
|
<div>
|
|
|
|
<Button>label</Button>
|
|
|
|
</div>
|
|
|
|
</Card>
|
|
|
|
<Card style={cardStyles} variant={'outlined'} />
|
|
|
|
<Card style={cardStyles} variant={'elevated'} />
|
2024-02-01 00:58:19 +03:00
|
|
|
</div>
|
|
|
|
</div>
|
2024-02-03 00:34:54 +03:00
|
|
|
</main>
|
2024-02-01 00:58:19 +03:00
|
|
|
);
|
2024-01-31 23:46:06 +03:00
|
|
|
}
|