feat(projects, pipeline): project detail page.

src/pipelines/pipeline-list.tsx

@@ -0,0 +1,53 @@
+import { gql, useQuery } from '@apollo/client';
+import { Link } from '@curi/react-dom';
+import { List, ListItem, Typography, ListItemText } from '@material-ui/core';
+import { FC } from 'react';
+import { Pipeline } from '../generated/graphql';
+import { Fragment } from 'react';
+import { CallMerge } from '@material-ui/icons';
+
+interface Props {
+  projectId: string;
+}
+
+const PIPELINES = gql`
+  query Pipelines($projectId: String!) {
+    pipelines(projectId: $projectId) {
+      id
+      name
+      branch
+    }
+  }
+`
+
+export const PipelineList: FC<Props> = ({ projectId }) => {
+  const {data, loading} = useQuery<{pipelines: Pipeline[]}, {projectId: string}>(PIPELINES, {
+    variables: {projectId}
+  })
+  return (
+    <List>
+      {data?.pipelines.map((pipeline) => (
+        <Link name="pipeline-details" params={{pipelineId: pipeline.id}}>
+          <Item pipeline={pipeline} key={pipeline.id} />
+        </Link>
+      ))}
+    </List>
+  );
+}
+
+const Item = ({pipeline}: {pipeline: Pipeline}) => {
+
+  return (
+    <ListItem button>
+      <ListItemText
+        primary={pipeline.name}
+        secondary={
+          <Typography component="span" variant="body2" color="textSecondary">
+            <CallMerge fontSize="small" />
+            {pipeline.branch}
+          </Typography>
+        }
+      />
+    </ListItem>
+  );
+}