62 lines
2 KiB
JavaScript
62 lines
2 KiB
JavaScript
import Card from "@mui/material/Card";
|
|
import { Link } from "react-router-dom";
|
|
import CardContent from "@mui/material/CardContent";
|
|
import CardActions from "@mui/material/CardActions";
|
|
import Button from "@mui/material/Button";
|
|
import ButtonGroup from "@mui/material/ButtonGroup";
|
|
import Avatar from "@mui/material/Avatar";
|
|
import Chip from "@mui/material/Chip";
|
|
import Typography from "@mui/material/Typography";
|
|
import Box from "@mui/material/Box";
|
|
import IconButton from "@mui/material/IconButton";
|
|
|
|
import LinkedInIcon from "@mui/icons-material/LinkedIn";
|
|
import MailIcon from "@mui/icons-material/Mail";
|
|
|
|
export default function ContactCard(props) {
|
|
const { name, title, phone, email, linkedin, description, avatar } = props;
|
|
|
|
return (
|
|
<Card
|
|
sx={{
|
|
padding: "24px 0px 0px 0px",
|
|
width: 320,
|
|
maxWidth: "100%",
|
|
margin: 2,
|
|
boxShadow: "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
|
|
}}
|
|
>
|
|
<CardContent sx={{ alignItems: "center", textAlign: "center", pb: 0 }}>
|
|
<Avatar
|
|
src={avatar}
|
|
sx={{ width: "4.5rem", height: "4.5rem", margin: "0 auto" }}
|
|
component={Link}
|
|
to={linkedin}
|
|
/>
|
|
<Chip
|
|
size="sm"
|
|
label={title}
|
|
sx={{
|
|
mt: -1,
|
|
mb: 1,
|
|
zIndex: 5,
|
|
backgroundColor: "rgba(0, 115, 177,.1)",
|
|
color: "#0073b1",
|
|
}}
|
|
/>
|
|
<Typography level="title-lg">{name}</Typography>
|
|
<Typography level="body-sm" sx={{ maxWidth: "24ch", margin: "0 auto" }}>
|
|
{description}
|
|
</Typography>
|
|
</CardContent>
|
|
<CardActions style={{ display: "flex", justifyContent: "center" }}>
|
|
<IconButton size="sm" variant="plain" component={Link} to={linkedin} sx={{ color: "#0073b1" }}>
|
|
<LinkedInIcon />
|
|
</IconButton>
|
|
<IconButton size="sm" variant="plain" color="neutral" component={Link} to={email}>
|
|
<MailIcon />
|
|
</IconButton>
|
|
</CardActions>
|
|
</Card>
|
|
);
|
|
}
|