feat: introduce basic flows page

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

@@ -18,7 +18,7 @@ function AppFlowRow(props: AppFlowRowProps) {
   return (
     <>
       <Card sx={{ my: 2 }}>
-        <CardActionArea component={Link} to={URLS.FLOW('dummy')}>
+        <CardActionArea component={Link} to={URLS.FLOW(flow.id)}>
           <CardContent>
             <Box>
               <Typography variant="h6" noWrap>

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

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import Card from '@mui/material/Card';
+import Box from '@mui/material/Box';
+import CardActionArea from '@mui/material/CardActionArea';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+
+import type { Flow } from 'types/flow';
+import * as URLS from 'config/urls';
+import { CardContent, Typography } from './style';
+
+type FlowRowProps = {
+  flow: Flow;
+}
+
+export default function FlowRow(props: FlowRowProps) {
+  const { flow } = props;
+
+  return (
+    <Link to={URLS.FLOW(flow.id)}>
+      <Card sx={{ mb: 1 }}>
+        <CardActionArea>
+          <CardContent>
+            <Box>
+              <Typography variant="h6" noWrap>
+                {flow.name}
+              </Typography>
+            </Box>
+
+            <Box>
+              <ArrowForwardIosIcon sx={{ color: (theme) => theme.palette.primary.main }} />
+            </Box>
+          </CardContent>
+        </CardActionArea>
+      </Card>
+    </Link>
+  );
+}

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

@@ -0,0 +1,27 @@
+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: '1fr auto',
+  gridColumnGap: theme.spacing(2),
+  alignItems: 'center',
+}));
+
+
+export const Typography = styled(MuiTypography)(({ theme }) => ({
+  '&.MuiTypography-h6': {
+    textTransform: 'capitalize',
+  },
+  display: 'inline-block',
+  width: 500,
+  maxWidth: '70%',
+}));
+
+export const DesktopOnlyBreakline = styled('br')(({ theme }) => ({
+  [theme.breakpoints.down('sm')]: {
+    display: 'none',
+  }
+}));