-
-
Notifications
You must be signed in to change notification settings - Fork 932
/
Card.tsx
35 lines (34 loc) · 936 Bytes
/
Card.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import React, { PropsWithChildren } from 'react';
/**
* @description
* A card component which can be used to group related content.
*
* @example
* ```ts
* import { Card } from '@vendure/admin-ui/react';
*
* export function MyComponent() {
* return (
* <Card title='My Title'>
* <p>Some content</p>
* </Card>
* );
* }
* ```
*
* @docsCategory react-components
*/
export function Card(props: PropsWithChildren<{ title?: string; paddingX?: boolean }>) {
return (
<div className={'vdr-card'}>
<div className={`card-container ${props.paddingX !== false ? 'padding-x' : ''}`}>
{props.title && (
<div className={'title-row'}>
<div className="title">{props.title}</div>
</div>
)}
<div className="contents">{props.children}</div>
</div>
</div>
);
}