127 lines
4.0 KiB
TypeScript
127 lines
4.0 KiB
TypeScript
import React from 'react';
|
|
import { Box, Link, Typography, Avatar, Grid, SxProps } from '@mui/material';
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
Divider,
|
|
useTheme,
|
|
} from '@mui/material';
|
|
import { useMediaQuery } from '@mui/material';
|
|
import { useUser } from "../hooks/useUser";
|
|
import { Candidate } from '../types/types';
|
|
import { CopyBubble } from "./CopyBubble";
|
|
|
|
interface CandidateInfoProps {
|
|
candidate: Candidate;
|
|
sx?: SxProps;
|
|
action?: string;
|
|
};
|
|
|
|
const CandidateInfo: React.FC<CandidateInfoProps> = (props: CandidateInfoProps) => {
|
|
const { candidate } = props;
|
|
const {
|
|
sx,
|
|
action = '',
|
|
} = props;
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
|
|
|
if (!candidate) {
|
|
return <Box>No user loaded.</Box>;
|
|
}
|
|
return (
|
|
<Card
|
|
elevation={1}
|
|
sx={{
|
|
display: "flex",
|
|
borderColor: 'transparent',
|
|
borderWidth: 2,
|
|
borderStyle: 'solid',
|
|
transition: 'all 0.3s ease',
|
|
...sx
|
|
}}
|
|
>
|
|
<CardContent sx={{ flexGrow: 1, p: 3, height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>
|
|
|
|
<Grid container spacing={2}>
|
|
<Grid
|
|
size={{ xs: 12, sm: 2 }}
|
|
sx={{
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
minWidth: "80px",
|
|
maxWidth: "80px"
|
|
}}>
|
|
<Avatar
|
|
src={candidate.hasProfile ? `/api/u/${candidate.username}/profile?timestamp=${Date.now()}` : ''}
|
|
alt={`${candidate.fullName}'s profile`}
|
|
sx={{
|
|
alignSelf: "flex-start",
|
|
width: 80,
|
|
height: 80,
|
|
border: '2px solid #e0e0e0',
|
|
}}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid size={{ xs: 12, sm: 10 }}>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'flex-start',
|
|
mb: 1 }}>
|
|
<Box>
|
|
<Box sx={{
|
|
display: "flex",
|
|
flexDirection: isMobile ? "column" : "row",
|
|
alignItems: "left",
|
|
gap: 1, "& > .MuiTypography-root": { m: 0 }
|
|
}}>
|
|
{
|
|
action !== '' &&
|
|
<Typography variant="body1">{action}</Typography>
|
|
}
|
|
<Typography variant="h5" component="h1"
|
|
sx={{
|
|
fontWeight: 'bold',
|
|
whiteSpace: 'nowrap'
|
|
}}>
|
|
{candidate.fullName}
|
|
</Typography>
|
|
</Box>
|
|
<Box sx={{ fontSize: "0.75rem", alignItems: "center" }} >
|
|
<Link href={`/u/${candidate.username}`}>{`/u/${candidate.username}`}</Link>
|
|
<CopyBubble
|
|
onClick={(event: any) => { event.stopPropagation() }}
|
|
tooltip="Copy link" content={`${window.location.origin}/u/{candidate.username}`} />
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Typography variant="body1" color="text.secondary">
|
|
{candidate.description}
|
|
</Typography>
|
|
|
|
<Divider sx={{ my: 2 }} />
|
|
|
|
{ candidate.location && <Typography variant="body2" sx={{ mb: 1 }}>
|
|
<strong>Location:</strong> {candidate.location.city}, {candidate.location.state || candidate.location.country}
|
|
</Typography> }
|
|
{ candidate.email && <Typography variant="body2" sx={{ mb: 1 }}>
|
|
<strong>Email:</strong> {candidate.email}
|
|
</Typography> }
|
|
{ candidate.phone && <Typography variant="body2">
|
|
<strong>Phone:</strong> {candidate.phone}
|
|
</Typography> }
|
|
</Grid>
|
|
|
|
</Grid>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export { CandidateInfo };
|