✨ feat(people): add employee details

src/components/molecules/EmplyeeCard/index.tsx

@@ -1,16 +1,28 @@
-import { Card, CardContent, CardMedia, CardProps, Typography } from '@mui/material'
-import { FC } from 'react'
+import { FC, useMemo } from 'react'
+import { Card, CardActionArea, CardContent, CardMedia, CardProps, Typography } from '@mui/material'
 
-export interface EmplyeeCardProps extends CardProps {
+import { EmployeeDescription } from 'components/molecules/EmployeeDescription/index.js'
+
+export type EmployeeCardProps = Omit<CardProps, 'onClick'> & {
   name: string
   image: string
   position?: string
+  description?: Partial<EmployeeDescription>
+  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, description: EmployeeDescription) => void
 }
 
-export const EmplyeeCard: FC<EmplyeeCardProps> = ({ name, position, image, sx, ...props }) => {
-  return (
-    <Card sx={{ flexShrink: 0, width: 270, height: 360, ...sx }} {...props}>
-      <CardMedia component="img" sx={{ minHeight: '140' }} image={image} alt={`${name} image`} />
+export const EmplyeeCard: FC<EmployeeCardProps> = ({ name, position, image, description = {}, sx, onClick, ...props }) => {
+  const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    onClick(event, {
+      title: name,
+      image: image,
+      position: position,
+      ...description,
+    })
+  }
+  const content = useMemo(
+    () => [
+      <CardMedia component="img" sx={{ minHeight: '140' }} image={image} alt={`${name} image`} />,
       <CardContent>
         <Typography gutterBottom variant="h5" component="div">
           {name}
@@ -20,7 +32,13 @@ export const EmplyeeCard: FC<EmplyeeCardProps> = ({ name, position, image, sx, .
             {position}
           </Typography>
         )}
-      </CardContent>
+      </CardContent>,
+    ],
+    [name, position, image]
+  )
+  return (
+    <Card sx={{ flexShrink: 0, width: 270, height: 360, ...sx }} {...props} onClick={handleClick}>
+      <CardActionArea>{content}</CardActionArea>
     </Card>
   )
 }