71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
/* eslint-disable react/display-name */
|
|
import React, { forwardRef } from 'react';
|
|
|
|
import { Flex } from '../layout';
|
|
import { CardStyles } from './card.styles';
|
|
|
|
export abstract class Card {
|
|
static readonly Container = forwardRef<HTMLDivElement, Card.ContainerProps>(
|
|
({ children, ...props }, ref) => {
|
|
return (
|
|
<CardStyles.Container ref={ref} {...props}>
|
|
{children}
|
|
</CardStyles.Container>
|
|
);
|
|
}
|
|
);
|
|
|
|
static readonly Heading = forwardRef<HTMLHeadingElement, Card.HeadingProps>(
|
|
({ title, leftIcon, rightIcon, css, ...props }, ref) => {
|
|
return (
|
|
<Flex css={{ justifyContent: 'space-between', ...css }}>
|
|
<Flex>
|
|
{leftIcon}
|
|
<CardStyles.Heading ref={ref} {...props}>
|
|
{title}
|
|
</CardStyles.Heading>
|
|
</Flex>
|
|
{rightIcon}
|
|
</Flex>
|
|
);
|
|
}
|
|
);
|
|
|
|
static readonly Body = forwardRef<HTMLDivElement, Card.BodyProps>(
|
|
({ children, ...props }, ref) => {
|
|
return (
|
|
<CardStyles.Body ref={ref} {...props}>
|
|
{children}
|
|
</CardStyles.Body>
|
|
);
|
|
}
|
|
);
|
|
|
|
static readonly Text = forwardRef<HTMLDivElement, Card.CardTextProps>(
|
|
({ children, ...props }, ref) => {
|
|
return (
|
|
<CardStyles.Text {...props} ref={ref}>
|
|
{children}
|
|
</CardStyles.Text>
|
|
);
|
|
}
|
|
);
|
|
}
|
|
|
|
export namespace Card {
|
|
export type ContainerProps = React.ComponentProps<
|
|
typeof CardStyles.Container
|
|
>;
|
|
|
|
export type HeadingProps = {
|
|
title: string;
|
|
css?: React.CSSProperties;
|
|
leftIcon?: React.ReactNode;
|
|
rightIcon?: React.ReactNode;
|
|
} & React.ComponentProps<typeof CardStyles.Heading>;
|
|
|
|
export type BodyProps = React.ComponentProps<typeof CardStyles.Body>;
|
|
|
|
export type CardTextProps = React.ComponentProps<typeof CardStyles.Text>;
|
|
}
|