feat: Extend Apps page with search and data

packages/web/src/components/AppRow/index.tsx

@@ -1,28 +1,64 @@
+import { Link } from 'react-router-dom';
 import Card from '@mui/material/Card';
+import Box from '@mui/material/Box';
+import Avatar from '@mui/material/Avatar';
 import CardActionArea from '@mui/material/CardActionArea';
-import CardContent from '@mui/material/CardContent';
-import Typography from '@mui/material/Typography';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+
+import useFormatMessage from 'hooks/useFormatMessage';
+import { CardContent, Typography, DesktopOnlyBreakline } from './style';
 
 type AppRowProps = {
   icon?: React.ReactNode;
   name: string;
   connectionNumber?: number;
   flowNumber?: number;
+  to: string;
 }
 
-export default function AppRow(props: AppRowProps) {
-  const { name } = props;
+const countTranslation = (value: React.ReactNode) => (<><strong>{value}</strong><DesktopOnlyBreakline /></>);
+
+function AppRow(props: AppRowProps) {
+  const formatMessage = useFormatMessage();
+  const { name, to } = props;
 
   return (
-    <Card sx={{ my: 1 }}>
-      <CardActionArea>
+    <Link to={to}>
+      <Card sx={{ my: 2 }}>
+        <CardActionArea>
+        <CardContent>
+            <Box>
+              <Avatar variant="square">
+                {name[0].toUpperCase()}
+              </Avatar>
+            </Box>
 
-       <CardContent>
-          <Typography gutterBottom variant="h6" component="div">
-            {name}
-          </Typography>
-        </CardContent>
-      </CardActionArea>
-    </Card>
+            <Box>
+              <Typography variant="h6">
+                {name}
+              </Typography>
+            </Box>
+
+            <Box sx={{ px: 2 }}>
+              <Typography variant="body2">
+                {formatMessage('app.connections', { count: countTranslation(Math.round(Math.random() * 100)) })}
+              </Typography>
+            </Box>
+
+            <Box sx={{ px: 2 }}>
+              <Typography variant="body2">
+                {formatMessage('app.flows', { count: countTranslation(Math.round(Math.random() * 100)) })}
+              </Typography>
+            </Box>
+
+            <Box>
+              <ChevronRightIcon />
+            </Box>
+          </CardContent>
+        </CardActionArea>
+      </Card>
+    </Link>
   );
 }
+
+export default AppRow;

packages/web/src/components/AppRow/style.ts

@@ -0,0 +1,26 @@
+import { styled } from '@mui/material/styles';
+import MuiCardContent from '@mui/material/CardContent';
+import MuiTypography from '@mui/material/Typography';
+
+export const CardContent = styled(MuiCardContent)(({ theme }) => ({
+  display: 'grid',
+  gridTemplateRows: 'auto',
+  gridTemplateColumns: 'auto 1fr auto auto auto',
+  gridColumnGap: theme.spacing(2),
+  alignItems: 'center',
+}));
+
+
+export const Typography = styled(MuiTypography)(({ theme }) => ({
+  '&.MuiTypography-h6': {
+    textTransform: 'capitalize',
+  },
+  textAlign: 'center',
+  display: 'inline-block',
+}));
+
+export const DesktopOnlyBreakline = styled('br')(({ theme }) => ({
+  [theme.breakpoints.down('md')]: {
+    display: 'none',
+  }
+}));