diff --git a/packages/web/src/components/FlowRow/index.tsx b/packages/web/src/components/FlowRow/index.tsx index c2acc43c..43856d55 100644 --- a/packages/web/src/components/FlowRow/index.tsx +++ b/packages/web/src/components/FlowRow/index.tsx @@ -7,6 +7,7 @@ import MoreHorizIcon from '@mui/icons-material/MoreHoriz'; import { DateTime } from 'luxon'; import type { IFlow } from '@automatisch/types'; +import IntermediateStepCount from 'components/IntermediateStepCount'; import AppIcon from 'components/AppIcon'; import FlowContextMenu from 'components/FlowContextMenu'; import useFormatMessage from 'hooks/useFormatMessage'; @@ -45,14 +46,21 @@ export default function FlowRow(props: FlowRowProps): React.ReactElement { - {["Twitter", "+3", "Github"].map((app) => ( - - ))} + + + + + + <Typography variant="body2"> + +{count} + </Typography> + </Container> + ); +} \ No newline at end of file diff --git a/packages/web/src/components/IntermediateStepCount/style.ts b/packages/web/src/components/IntermediateStepCount/style.ts new file mode 100644 index 00000000..e4580f42 --- /dev/null +++ b/packages/web/src/components/IntermediateStepCount/style.ts @@ -0,0 +1,12 @@ +import { styled } from '@mui/material/styles'; + +export const Container = styled('div')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + minWidth: 50, + height: 50, + border: '1px solid #000', + borderRadius: theme.shape.borderRadius, +})); diff --git a/packages/web/src/graphql/queries/get-flows.ts b/packages/web/src/graphql/queries/get-flows.ts index d752bebb..c18bf02a 100644 --- a/packages/web/src/graphql/queries/get-flows.ts +++ b/packages/web/src/graphql/queries/get-flows.ts @@ -11,8 +11,8 @@ export const GET_FLOWS = gql` node { id name - createdAt - updatedAt + createdAt + updatedAt } } }