New UI for List items - Graphql

.gitignore

@@ -5,6 +5,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env
 .env.development.local

components/Image.tsx

@@ -1,19 +1,37 @@
 import React, { ReactElement } from 'react';
 import NextImage from 'next/image';
+import { Avatar, createStyles, makeStyles, Theme } from '@material-ui/core';
 
 interface Props {
-    image: string;
+    image: Maybe<string> | undefined;
     name: string;
 }
 
+const useStyles = makeStyles((theme: Theme) =>
+    createStyles({
+        avatar: {
+            color: theme.palette.common.white,
+            backgroundColor: theme.palette.primary.main,
+        },
+    })
+);
+
 export default function Image({ image, name }: Props): ReactElement {
+    const firstLetter = name.slice(0, 1).toUpperCase();
+    const classes = useStyles();
+
+    if (!image) {
+        return <Avatar className={classes.avatar}>{firstLetter}</Avatar>;
+    }
+
     if (image.startsWith('/')) {
-        return <NextImage src={image} width={50} height={50} alt={name} data-testid="image" />;
+        return <NextImage src={image || firstLetter} width={50} height={50} alt={name} data-testid="image" />;
     }
+
     return (
         <>
             {/* used for non optimizable entries (files not stored in public directory) */}
-            <img data-testid="image" src={image} width={50} height={50} alt={name} />
+            <img data-testid="image" src={image || firstLetter} width={50} height={50} alt={name} />
         </>
     );
 }

components/link/Link.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Link as MUILink } from '@material-ui/core';
+import Link from 'next/link';
+
+type Props = {
+    href: string;
+    as?: string;
+    label: string;
+    color?: 'inherit' | 'initial' | 'primary' | 'secondary' | 'textPrimary' | 'textSecondary' | 'error' | undefined;
+};
+
+export default function CustomLink({ href, as, label, color = 'inherit' }: Props) {
+    return (
+        <Link passHref href={href} as={as}>
+            <MUILink color={color}>{label}</MUILink>
+        </Link>
+    );
+}

components/list/ListItem.tsx

@@ -0,0 +1,60 @@
+import Image from '../Image';
+import {
+    ListItem as MUIListItem,
+    ListItemAvatar,
+    Avatar,
+    ListItemText,
+    Grid,
+    Typography,
+    makeStyles,
+    createStyles,
+    Theme,
+} from '@material-ui/core';
+import Link from '../link/Link';
+import { Image as ImageType } from '../../pages/index';
+
+const useStyles = makeStyles((theme: Theme) =>
+    createStyles({
+        info: {
+            justify: 'center',
+            padding: theme.spacing(2),
+        },
+        avatar: {
+            backgroundColor: theme.palette.gray.light,
+        },
+    })
+);
+
+export type Link = {
+    label: string;
+    href: string;
+    as?: string;
+};
+
+type Props = {
+    name: string;
+    image: ImageType | undefined;
+    link: Link;
+};
+
+export default function ListItem({ name, image, link }: Props) {
+    const classes = useStyles();
+    return (
+        <MUIListItem divider>
+            <Grid container alignItems="center">
+                <ListItemAvatar>
+                    <Avatar alt={name} className={classes.avatar}>
+                        {/* NextJS Image optimization example. Props are src(any file under the public dir), width, and height */}
+                        <Image image={image} name={name} />
+                    </Avatar>
+                </ListItemAvatar>
+                <ListItemText>
+                    <Typography variant="body1">{name}</Typography>
+                </ListItemText>
+                <Grid container item xs={12} md={3} className={classes.info} justify="flex-end" alignItems="center">
+                    <Link href={link.href} as={link?.as} label={link.label} />
+                </Grid>
+            </Grid>
+        </MUIListItem>
+    );
+}

lib/tools.ts

@@ -74,4 +74,16 @@ export const tools: Omit<Tool, 'id'>[] = [
         link: 'https://github.com/dequelabs/axe-core-npm/blob/develop/packages/react/README.md',
         image: '/axe.svg',
     },
+    {
+        name: 'Deque Axe',
+        description:
+            'Test your React application with the axe-core accessibility testing library. Results will show in the Chrome DevTools console.',
+        link: 'https://github.com/dequelabs/axe-core-npm/blob/develop/packages/react/README.md',
+        image: {
+            src: '/axe.svg',
+            width: 50,
+            height: 50,
+            alt: 'axe-core/react',
+        },
+    },
 ];