feat(about): add linkedin links

src/components/team-member.tsx

@@ -3,23 +3,27 @@ import Avatar from "@material-ui/core/Avatar";
 import CardHeader from "@material-ui/core/CardHeader";
 import { createStyles, makeStyles } from "@material-ui/styles";
 import React, { FC } from "react";
+import LinkedInIcon from "@material-ui/icons/LinkedIn";
+import Button from "@material-ui/core/Button";
+import CardActions from "@material-ui/core/CardActions";
 
 type TeamMemberProps = {
   job: string;
   name: string;
   photo: string;
+  url: string;
 };
 
 const useStyles = makeStyles(() =>
   createStyles({
     root: {
-      height: 100,
+      minHeight: 120,
       minWidth: 200,
     },
   })
 );
 
-const TeamMember: FC<TeamMemberProps> = ({ job, name, photo }) => {
+const TeamMember: FC<TeamMemberProps> = ({ job, name, photo, url }) => {
   const classes = useStyles();
   return (
     <Card className={classes.root}>
@@ -32,6 +36,16 @@ const TeamMember: FC<TeamMemberProps> = ({ job, name, photo }) => {
         title={name}
         subheader={job}
       />
+      <CardActions>
+        <Button
+          size="small"
+          startIcon={<LinkedInIcon />}
+          target="_blank"
+          href={url}
+        >
+          Voir le profil
+        </Button>
+      </CardActions>
     </Card>
   );
 };

src/display-data/team-data.ts

@@ -1,43 +1,51 @@
 export const currentMembers = [
+  {
+    job: "Designer UX/UI",
+    name: "Saniya AL SAADI",
+    photo: "images/team/saniya.jpg",
+    url: "https://www.linkedin.com/in/saniyaas/",
+  },
   {
     job: "Développeur",
     name: "Clément BERTHOU",
     photo: "images/team/clement.jpg",
+    url: "https://www.linkedin.com/in/cberthou/",
   },
   {
     job: "Product Manager de la Fabrique",
     name: "Eric HEIJLIGERS",
     photo: "images/team/eric.jpg",
+    url: "https://www.linkedin.com/in/eric-heijligers-34522444/",
   },
   {
     job: "Apprentie Archiviste",
     name: "Jennifer JACQUOT",
     photo: "images/team/jennifer.jpg",
+    url: "https://www.linkedin.com/in/jennifer-jacquot-026967152/",
   },
   {
     job: "Cheffe du bureau des Archives",
     name: "Anne LAMBERT",
     photo: "images/team/anne.jpg",
+    url: "https://www.linkedin.com/in/anne-lambert-014b20128/",
   },
   {
     job: "Archiviste",
     name: "Thibaut LARRÈDE",
     photo: "images/team/thibaut.jpg",
+    url: "https://www.linkedin.com/in/thibautlarrede/",
   },
   {
     job: "Développeur",
     name: "Benjamin MORALI",
     photo: "images/team/benjamin.jpg",
+    url: "https://www.linkedin.com/in/benjamin-morali/",
   },
   {
     job: "Product Owner d’Archifiltre",
     name: "Chloé MOSER",
     photo: "images/team/chloe.jpg",
-  },
-  {
-    job: "Designer UX/UI",
-    name: "Saniya AL SAADI",
-    photo: "images/team/saniya.jpg",
+    url: "https://www.linkedin.com/in/chlo%C3%A9-moser-4a86554a/",
   },
 ];
 
@@ -46,20 +54,24 @@ export const oldMembers = [
     job: "Développeur",
     name: "Jean-Baptiste ASSOUAD",
     photo: "images/team/jb.jpg",
+    url: "https://www.linkedin.com/in/jean-baptiste-assouad-53a545121/",
   },
   {
     job: "Coach des projets en mode agile",
     name: "Hélène DAM",
     photo: "images/team/helene.jpg",
+    url: "https://www.linkedin.com/in/hlnedm/",
   },
   {
     job: "Data Scientist",
     name: "Emmanuel GAUTIER",
     photo: "images/team/emmanuel.jpg",
+    url: "https://www.linkedin.com/in/emmanuelgautierecp/",
   },
   {
     job: "Designer UX/UI",
     name: "Christophe MAMFOUMBI",
     photo: "images/team/christophe.jpg",
+    url: "https://www.linkedin.com/in/christophemamfoumbiphalente/",
   },
 ];

src/pages/a-propos.tsx

@@ -10,8 +10,18 @@ import TimelineElement from "../components/timeline-element";
 import { currentMembers, oldMembers } from "../display-data/team-data";
 import { timelineElements } from "../display-data/timeline-data";
 import Layout from "../layout";
+import { createStyles, makeStyles } from "@material-ui/styles";
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    grid: {
+      width: "100%",
+    },
+  })
+);
 
 const Downloads: FC = () => {
+  const classes = useStyles();
   return (
     <Layout>
       <SEO title="FAQ" />
@@ -21,9 +31,9 @@ const Downloads: FC = () => {
         </Typography>
       </Box>
       <Grid container spacing={2}>
-        {currentMembers.map(({ job, name, photo }) => (
-          <Grid key={name} item md={3}>
-            <TeamMember job={job} name={name} photo={photo} />
+        {currentMembers.map(({ job, name, photo, url }) => (
+          <Grid key={name} item md={3} className={classes.grid}>
+            <TeamMember job={job} name={name} photo={photo} url={url} />
           </Grid>
         ))}
       </Grid>
@@ -33,9 +43,9 @@ const Downloads: FC = () => {
         </Typography>
       </Box>
       <Grid container spacing={2}>
-        {oldMembers.map(({ job, name, photo }) => (
-          <Grid key={name} item md={3}>
-            <TeamMember job={job} name={name} photo={photo} />
+        {oldMembers.map(({ job, name, photo, url }) => (
+          <Grid key={name} item md={3} className={classes.grid}>
+            <TeamMember job={job} name={name} photo={photo} url={url} />
           </Grid>
         ))}
       </Grid>