47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
import { FC, useMemo } from 'react'
|
|
import { Card, CardActionArea, CardContent, CardMedia, CardProps, Typography } from '@mui/material'
|
|
|
|
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<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}
|
|
</Typography>
|
|
{position && (
|
|
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
|
|
{position}
|
|
</Typography>
|
|
)}
|
|
</CardContent>,
|
|
],
|
|
[name, position, image]
|
|
)
|
|
return (
|
|
<Card sx={{ flexShrink: 0, width: 270, height: 360, ...sx }} {...props} onClick={handleClick}>
|
|
<CardActionArea>{content}</CardActionArea>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export default EmplyeeCard
|