121 lines
4.2 KiB
TypeScript
121 lines
4.2 KiB
TypeScript
import { Email, Phone } from '@mui/icons-material';
|
|
import { ListItem, Section as SectionType } from '@reactive-resume/schema';
|
|
import get from 'lodash/get';
|
|
import isArray from 'lodash/isArray';
|
|
import isEmpty from 'lodash/isEmpty';
|
|
|
|
import Markdown from '@/components/shared/Markdown';
|
|
import { useAppSelector } from '@/store/hooks';
|
|
import { SectionProps } from '@/templates/sectionMap';
|
|
import { formatDateString } from '@/utils/date';
|
|
import { addHttp, parseListItemPath } from '@/utils/template';
|
|
|
|
import BadgeDisplay from './BadgeDisplay';
|
|
import Heading from './Heading';
|
|
|
|
const Section: React.FC<SectionProps> = ({
|
|
path,
|
|
titlePath = 'title',
|
|
subtitlePath = 'subtitle',
|
|
headlinePath = 'headline',
|
|
keywordsPath = 'keywords',
|
|
}) => {
|
|
const section: SectionType = useAppSelector((state) => get(state.resume, path, {}));
|
|
const dateFormat: string = useAppSelector((state) => get(state.resume, 'metadata.date.format'));
|
|
const primaryColor: string = useAppSelector((state) => get(state.resume, 'metadata.theme.primary'));
|
|
|
|
if (!section.visible) return null;
|
|
|
|
if (isArray(section.items) && isEmpty(section.items)) return null;
|
|
|
|
return (
|
|
<section>
|
|
<Heading>{section.name}</Heading>
|
|
|
|
<div
|
|
className="grid items-start gap-4"
|
|
style={{ gridTemplateColumns: `repeat(${section.columns}, minmax(0, 1fr))` }}
|
|
>
|
|
{section.items.map((item: ListItem) => {
|
|
const id = item.id,
|
|
title = parseListItemPath(item, titlePath),
|
|
subtitle = parseListItemPath(item, subtitlePath),
|
|
headline = parseListItemPath(item, headlinePath),
|
|
keywords: string[] = get(item, keywordsPath),
|
|
url: string = get(item, 'url'),
|
|
summary: string = get(item, 'summary'),
|
|
level: string = get(item, 'level'),
|
|
levelNum: number = get(item, 'levelNum'),
|
|
phone: string = get(item, 'phone'),
|
|
email: string = get(item, 'email'),
|
|
date = formatDateString(get(item, 'date'), dateFormat);
|
|
|
|
return (
|
|
<div key={id} id={id} className="grid gap-1">
|
|
{title && <span className="font-bold">{title}</span>}
|
|
|
|
{subtitle && <span className="opacity-75">{subtitle}</span>}
|
|
|
|
{headline && <span className="opacity-75">{headline}</span>}
|
|
|
|
{(level || levelNum > 0) && (
|
|
<div className="grid gap-1">
|
|
{level && <span className="opacity-75">{level}</span>}
|
|
{levelNum > 0 && (
|
|
<div className="flex justify-center">
|
|
{Array.from(Array(5).keys()).map((_, index) => (
|
|
<div
|
|
key={index}
|
|
className="mr-1 h-3 w-4 rounded border-2"
|
|
style={{
|
|
borderColor: primaryColor,
|
|
backgroundColor: levelNum / (10 / 5) > index ? primaryColor : '',
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{date && <div className="opacity-50">({date})</div>}
|
|
|
|
{summary && <Markdown>{summary}</Markdown>}
|
|
|
|
{url && (
|
|
<div className="inline-flex justify-center">
|
|
<a href={addHttp(url)} target="_blank" rel="noreferrer">
|
|
{url}
|
|
</a>
|
|
</div>
|
|
)}
|
|
|
|
{keywords && <BadgeDisplay items={keywords} />}
|
|
|
|
{(phone || email) && (
|
|
<div className="grid gap-1">
|
|
{phone && (
|
|
<div className="inline-flex items-center justify-center gap-x-2">
|
|
<Phone />
|
|
<span>{phone}</span>
|
|
</div>
|
|
)}
|
|
|
|
{email && (
|
|
<div className="inline-flex items-center justify-center gap-x-2">
|
|
<Email />
|
|
<span>{email}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Section;
|