source list UI done

webUI/react/src/components/SourceCard.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import Button from '@material-ui/core/Button';
+import Avatar from '@material-ui/core/Avatar';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: 16,
+    },
+    bullet: {
+        display: 'inline-block',
+        margin: '0 2px',
+        transform: 'scale(0.8)',
+    },
+    title: {
+        fontSize: 14,
+    },
+    pos: {
+        marginBottom: 12,
+    },
+    icon: {
+        width: theme.spacing(7),
+        height: theme.spacing(7),
+        flex: '0 0 auto',
+        marginRight: 16,
+    },
+}));
+
+interface IProps {
+    source: ISource
+}
+
+export default function SourceCard(props: IProps) {
+    const {
+        source: {
+            name, lang, iconUrl, supportsLatest,
+        },
+    } = props;
+
+    const classes = useStyles();
+    const langPress = lang === 'all' ? 'All' : lang.toUpperCase();
+
+    return (
+        <Card>
+            <CardContent className={classes.root}>
+                <div style={{ display: 'flex' }}>
+                    <Avatar
+                        variant="rounded"
+                        className={classes.icon}
+                        alt={name}
+                        src={iconUrl}
+                    />
+                    <div style={{ display: 'flex', flexDirection: 'column' }}>
+                        <Typography variant="h5" component="h2">
+                            {name}
+                        </Typography>
+                        <Typography variant="caption" display="block" gutterBottom>
+                            {langPress}
+                        </Typography>
+                    </div>
+                </div>
+                <div style={{ display: 'flex' }}>
+                    {supportsLatest && <Button variant="outlined">Latest</Button>}
+                    <Button variant="outlined" style={{ marginLeft: 20 }}>Browse</Button>
+                </div>
+            </CardContent>
+        </Card>
+    );
+}

webUI/react/src/components/TemporaryDrawer.tsx

@@ -16,6 +16,7 @@ const useStyles = makeStyles({
 
 interface IProps {
     drawerOpen: boolean
+
     setDrawerOpen(state: boolean): void
 }
 
@@ -39,6 +40,14 @@ export default function TemporaryDrawer({ drawerOpen, setDrawerOpen }: IProps) {
                         <ListItemText primary="Extensions" />
                     </ListItem>
                 </Link>
+                <Link to="/sources" style={{ color: 'inherit', textDecoration: 'none' }}>
+                    <ListItem button key="Sources">
+                        <ListItemIcon>
+                            <InboxIcon />
+                        </ListItemIcon>
+                        <ListItemText primary="Sources" />
+                    </ListItem>
+                </Link>
             </List>
         </div>
     );