61 lines
2.0 KiB
TypeScript
61 lines
2.0 KiB
TypeScript
import Box from '@mui/material/Box';
|
|
import type { CardProps } from '@mui/material/Card';
|
|
import Card from '@mui/material/Card';
|
|
import CardHeader from '@mui/material/CardHeader';
|
|
import Typography from '@mui/material/Typography';
|
|
import { varAlpha } from 'minimal-shared/utils';
|
|
import { Iconify } from 'src/components/iconify';
|
|
import { fShortenNumber } from 'src/utils/format-number';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
type Props = CardProps & {
|
|
title?: string;
|
|
subheader?: string;
|
|
list: { value: string; label: string; total: number }[];
|
|
};
|
|
|
|
export function AnalyticsTrafficBySite({ title, subheader, list, sx, ...other }: Props) {
|
|
return (
|
|
<Card sx={sx} {...other}>
|
|
<CardHeader title={title} subheader={subheader} />
|
|
<Box
|
|
sx={{
|
|
p: 3,
|
|
gap: 2,
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(2, 1fr)',
|
|
}}
|
|
>
|
|
{list.map((site) => (
|
|
<Box
|
|
key={site.label}
|
|
sx={(theme) => ({
|
|
py: 2.5,
|
|
display: 'flex',
|
|
borderRadius: 1.5,
|
|
textAlign: 'center',
|
|
alignItems: 'center',
|
|
flexDirection: 'column',
|
|
border: `solid 1px ${varAlpha(theme.vars.palette.grey['500Channel'], 0.12)}`,
|
|
})}
|
|
>
|
|
{site.value === 'twitter' && <Iconify width={32} icon="socials:twitter" />}
|
|
{site.value === 'facebook' && <Iconify width={32} icon="socials:facebook" />}
|
|
{site.value === 'google' && <Iconify width={32} icon="socials:google" />}
|
|
{site.value === 'linkedin' && <Iconify width={32} icon="socials:linkedin" />}
|
|
|
|
<Typography variant="h6" sx={{ mt: 1 }}>
|
|
{fShortenNumber(site.total)}
|
|
</Typography>
|
|
|
|
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
|
|
{site.label}
|
|
</Typography>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</Card>
|
|
);
|
|
}
|