mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2025-11-15 17:21:35 +10:00
🚀 release v3.0.0
This commit is contained in:
Amruth Pillai
19
client/templates/Gengar/widgets/Heading.tsx
Normal file
19
client/templates/Gengar/widgets/Heading.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import { Theme } from '@reactive-resume/schema';
|
||||
import get from 'lodash/get';
|
||||
|
||||
import { useAppSelector } from '@/store/hooks';
|
||||
|
||||
const Heading: React.FC = ({ children }) => {
|
||||
const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
|
||||
|
||||
return (
|
||||
<h3
|
||||
className="mb-2 w-2/3 border-b-2 pb-1.5 font-bold uppercase"
|
||||
style={{ color: theme.primary, borderColor: theme.primary }}
|
||||
>
|
||||
{children}
|
||||
</h3>
|
||||
);
|
||||
};
|
||||
|
||||
export default Heading;
|
||||
80
client/templates/Gengar/widgets/Masthead.tsx
Normal file
80
client/templates/Gengar/widgets/Masthead.tsx
Normal file
@ -0,0 +1,80 @@
|
||||
import { css } from '@emotion/css';
|
||||
import { Email, Phone, Public, Room } from '@mui/icons-material';
|
||||
import { alpha } from '@mui/material';
|
||||
import { Theme } from '@reactive-resume/schema';
|
||||
import clsx from 'clsx';
|
||||
import get from 'lodash/get';
|
||||
import isEmpty from 'lodash/isEmpty';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import Markdown from '@/components/shared/Markdown';
|
||||
import { useAppSelector } from '@/store/hooks';
|
||||
import DataDisplay from '@/templates/shared/DataDisplay';
|
||||
import getProfileIcon from '@/utils/getProfileIcon';
|
||||
import { getContrastColor } from '@/utils/styles';
|
||||
import { addHttp, formatLocation, getPhotoClassNames } from '@/utils/template';
|
||||
|
||||
export const MastheadSidebar: React.FC = () => {
|
||||
const { name, headline, photo, email, phone, website, location, profiles } = useAppSelector(
|
||||
(state) => state.resume.basics
|
||||
);
|
||||
const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
|
||||
const contrast = useMemo(() => getContrastColor(theme.primary), [theme.primary]);
|
||||
const iconColor = useMemo(() => (contrast === 'dark' ? theme.text : theme.background), [theme, contrast]);
|
||||
|
||||
return (
|
||||
<div className="col-span-2 grid justify-items-start gap-3 p-4">
|
||||
{photo.visible && !isEmpty(photo.url) && (
|
||||
<img
|
||||
alt={name}
|
||||
src={photo.url}
|
||||
width={photo.filters.size}
|
||||
height={photo.filters.size}
|
||||
className={getPhotoClassNames(photo.filters)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<h1 className="mb-1">{name}</h1>
|
||||
<p className="opacity-75">{headline}</p>
|
||||
</div>
|
||||
|
||||
<div className={clsx('flex flex-col gap-2.5', css(`svg { color: ${iconColor} }`))}>
|
||||
<DataDisplay icon={<Room />} className="!gap-2 text-xs">
|
||||
{formatLocation(location)}
|
||||
</DataDisplay>
|
||||
|
||||
<DataDisplay icon={<Email />} className="!gap-2 text-xs" link={`mailto:${email}`}>
|
||||
{email}
|
||||
</DataDisplay>
|
||||
|
||||
<DataDisplay icon={<Phone />} className="!gap-2 text-xs" link={`tel:${phone}`}>
|
||||
{phone}
|
||||
</DataDisplay>
|
||||
|
||||
<DataDisplay icon={<Public />} link={website && addHttp(website)} className="!gap-2 text-xs">
|
||||
{website}
|
||||
</DataDisplay>
|
||||
|
||||
{profiles.map(({ id, username, network, url }) => (
|
||||
<DataDisplay key={id} icon={getProfileIcon(network)} link={url} className="!gap-2 text-xs">
|
||||
{username}
|
||||
</DataDisplay>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const MastheadMain: React.FC = () => {
|
||||
const primaryColor: string = useAppSelector((state) => get(state.resume, 'metadata.theme.primary'));
|
||||
const backgroundColor: string = useMemo(() => alpha(primaryColor, 0.15), [primaryColor]);
|
||||
|
||||
const { summary } = useAppSelector((state) => state.resume.basics);
|
||||
|
||||
return (
|
||||
<div className="grid gap-2 p-4" style={{ backgroundColor }}>
|
||||
<Markdown>{summary}</Markdown>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
126
client/templates/Gengar/widgets/Section.tsx
Normal file
126
client/templates/Gengar/widgets/Section.tsx
Normal file
@ -0,0 +1,126 @@
|
||||
import { Email, Link, Phone } from '@mui/icons-material';
|
||||
import { ListItem, Section } 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 DataDisplay from '@/templates/shared/DataDisplay';
|
||||
import { formatDateString } from '@/utils/date';
|
||||
import { parseListItemPath } from '@/utils/template';
|
||||
|
||||
import Heading from './Heading';
|
||||
|
||||
const Section: React.FC<SectionProps> = ({
|
||||
path,
|
||||
titlePath = 'title',
|
||||
subtitlePath = 'subtitle',
|
||||
headlinePath = 'headline',
|
||||
keywordsPath = 'keywords',
|
||||
}) => {
|
||||
const section: Section = 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">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex flex-col">
|
||||
{title && <span className="font-semibold">{title}</span>}
|
||||
{subtitle && <span className="opacity-75">{subtitle}</span>}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1 text-right text-xs">
|
||||
{date && <div className="opacity-50">({date})</div>}
|
||||
{headline && <span className="opacity-75">{headline}</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(level || levelNum > 0) && (
|
||||
<div className="grid gap-1">
|
||||
{level && <span className="opacity-75">{level}</span>}
|
||||
{levelNum > 0 && (
|
||||
<div className="flex">
|
||||
{Array.from(Array(8).keys()).map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="mr-1 h-2 w-4 rounded-sm border"
|
||||
style={{
|
||||
borderColor: primaryColor,
|
||||
backgroundColor: levelNum / (10 / 8) > index ? primaryColor : '',
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{summary && <Markdown>{summary}</Markdown>}
|
||||
|
||||
{url && (
|
||||
<DataDisplay icon={<Link />} link={url}>
|
||||
{url}
|
||||
</DataDisplay>
|
||||
)}
|
||||
|
||||
{keywords && (
|
||||
<div className="leading-normal">
|
||||
<span className="font-semibold">Keywords:</span>
|
||||
|
||||
{keywords.join(', ')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(phone || email) && (
|
||||
<div className="grid gap-1">
|
||||
{phone && (
|
||||
<DataDisplay icon={<Phone />} link={`tel:${phone}`}>
|
||||
{phone}
|
||||
</DataDisplay>
|
||||
)}
|
||||
|
||||
{email && (
|
||||
<DataDisplay icon={<Email />} link={`mailto:${email}`}>
|
||||
{email}
|
||||
</DataDisplay>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Section;
|
||||
Reference in New Issue
Block a user