mirror of https://github.com/msgbyte/tailchat
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
import * as React from 'react';
|
|
import { FC, createElement } from 'react';
|
|
import { Card, Box, Typography, Divider } from '@mui/material';
|
|
import { Link, To } from 'react-router-dom';
|
|
import { ReactNode } from 'react';
|
|
import { LoadingIndicator } from 'react-admin';
|
|
|
|
import cartouche from './cartouche.png';
|
|
import cartoucheDark from './cartoucheDark.png';
|
|
|
|
interface Props {
|
|
icon: FC<any>;
|
|
to: To;
|
|
title?: string;
|
|
subtitle?: string | number;
|
|
children?: ReactNode;
|
|
}
|
|
|
|
const CardWithIcon = (props: Props) => {
|
|
const { icon, title, subtitle, to, children } = props;
|
|
|
|
return (
|
|
<Card
|
|
sx={{
|
|
minHeight: 52,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
flex: '1',
|
|
'& a': {
|
|
textDecoration: 'none',
|
|
color: 'inherit',
|
|
},
|
|
}}
|
|
>
|
|
<Link to={to}>
|
|
<Box
|
|
sx={{
|
|
overflow: 'inherit',
|
|
padding: '16px',
|
|
background: (theme) =>
|
|
`url(${
|
|
theme.palette.mode === 'dark' ? cartoucheDark : cartouche
|
|
}) no-repeat`,
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
'& .icon': {
|
|
color: (theme) =>
|
|
theme.palette.mode === 'dark' ? 'inherit' : '#dc2440',
|
|
},
|
|
}}
|
|
>
|
|
<Box width="3em" className="icon">
|
|
{createElement(icon, { fontSize: 'large' })}
|
|
</Box>
|
|
<Box textAlign="right">
|
|
<Typography color="textSecondary">{title}</Typography>
|
|
<Typography variant="h5" component="h2">
|
|
{subtitle ?? <LoadingIndicator />}
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
</Link>
|
|
{children && <Divider />}
|
|
{children}
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default CardWithIcon;
|