Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-12 15:52:56 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: separate links option at section level to reduce section item height

Browse Source
This commit is contained in:
Jonathan Zaehringer
2024-03-20 22:20:56 +01:00
parent b23efa773f
commit 6f2e75f22b
15 changed files with 547 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
apps/artboard/src/templates/nosepass.tsx
View File

@ -110,16 +110,17 @@ const Summary = () => {
type LinkProps = {
url: URL;
icon?: React.ReactNode;
iconOnRight?: boolean;
label?: string;
className?: string;
};
const Link = ({ url, icon, label, className }: LinkProps) => {
const Link = ({ url, icon, iconOnRight, label, className }: LinkProps) => {
if (!isUrl(url.href)) return null;
return (
<div className="flex items-center gap-x-1.5">
{icon ?? <i className="ph ph-bold ph-link text-primary" />}
{!iconOnRight && (icon ?? <i className="ph ph-bold ph-link text-primary" />)}
<a
href={url.href}
target="_blank"
@ -128,10 +129,40 @@ const Link = ({ url, icon, label, className }: LinkProps) => {
>
{label || url.label || url.href}
</a>
{iconOnRight && (icon ?? <i className="ph ph-bold ph-link text-primary" />)}
</div>
);
};
type LinkedEntityProps = {
name: string;
url: URL;
separateLinks: boolean;
className?: string;
};
const LinkedEntity = ({ name, url, separateLinks, className}: LinkedEntityProps) => {
if (!separateLinks && isUrl(url.href)) {
return (
<Link
url={url}
label={name}
icon={
<i className="ph ph-bold ph-globe text-primary" />
}
iconOnRight={true}
className={className}
/>
);
} else {
return (
<div className={className}>
{name}
</div>
);
}
};
type SectionProps<T> = {
section: SectionWithItem<T> | CustomSectionGroup;
children?: (item: T) => React.ReactNode;
@ -184,7 +215,7 @@ const Section = <T,>({
<div className="col-span-3 space-y-1">
{children?.(item as T)}
{url !== undefined && <Link url={url} />}
{url !== undefined && section.separateLinks && <Link url={url} />}
{summary !== undefined && !isEmptyString(summary) && (
<div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
@ -219,7 +250,7 @@ const Section = <T,>({
<div key={item.id}>
{children?.(item as T)}
{url !== undefined && <Link url={url} />}
{url !== undefined && section.separateLinks && <Link url={url} />}
{summary !== undefined && !isEmptyString(summary) && (
<div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
@ -277,7 +308,7 @@ const Experience = () => {
<Section<Experience> section={section} urlKey="url" dateKey="date" summaryKey="summary">
{(item) => (
<div>
<div className="font-bold">{item.company}</div>
<LinkedEntity name={item.company} url={item.url} separateLinks={section.separateLinks} className="font-bold"/>
<div>{item.position}</div>
<div>{item.location}</div>
</div>
@ -293,7 +324,7 @@ const Education = () => {
<Section<Education> section={section} urlKey="url" dateKey="date" summaryKey="summary">
{(item) => (
<div>
<div className="font-bold">{item.institution}</div>
<LinkedEntity name={item.institution} url={item.url} separateLinks={section.separateLinks} className="font-bold"/>
<div>{item.area}</div>
<div>{item.studyType}</div>
<div>{item.score}</div>
@ -311,7 +342,7 @@ const Awards = () => {
{(item) => (
<div>
<div className="font-bold">{item.title}</div>
<div>{item.awarder}</div>
<LinkedEntity name={item.awarder} url={item.url} separateLinks={section.separateLinks}/>
</div>
)}
</Section>
@ -326,7 +357,7 @@ const Certifications = () => {
{(item) => (
<div>
<div className="font-bold">{item.name}</div>
<div>{item.issuer}</div>
<LinkedEntity name={item.issuer} url={item.url} separateLinks={section.separateLinks}/>
</div>
)}
</Section>
@ -365,7 +396,7 @@ const Publications = () => {
<Section<Publication> section={section} urlKey="url" dateKey="date" summaryKey="summary">
{(item) => (
<div>
<div className="font-bold">{item.name}</div>
<LinkedEntity name={item.name} url={item.url} separateLinks={section.separateLinks} className="font-bold"/>
<div>{item.publisher}</div>
</div>
)}
@ -380,7 +411,7 @@ const Volunteer = () => {
<Section<Volunteer> section={section} urlKey="url" dateKey="date" summaryKey="summary">
{(item) => (
<div>
<div className="font-bold">{item.organization}</div>
<LinkedEntity name={item.organization} url={item.url} separateLinks={section.separateLinks} className="font-bold"/>
<div>{item.position}</div>
<div>{item.location}</div>
</div>
@ -417,7 +448,7 @@ const Projects = () => {
>
{(item) => (
<div>
<div className="font-bold">{item.name}</div>
<LinkedEntity name={item.name} url={item.url} separateLinks={section.separateLinks} className="font-bold"/>
<div>{item.description}</div>
</div>
)}
@ -432,7 +463,7 @@ const References = () => {
<Section<Reference> section={section} urlKey="url" summaryKey="summary">
{(item) => (
<div>
<div className="font-bold">{item.name}</div>
<LinkedEntity name={item.name} url={item.url} separateLinks={section.separateLinks} className="font-bold"/>
<div>{item.description}</div>
</div>
)}
@ -453,7 +484,7 @@ const Custom = ({ id }: { id: string }) => {
>
{(item) => (
<div>
<div className="font-bold">{item.name}</div>
<LinkedEntity name={item.name} url={item.url} separateLinks={section.separateLinks} className="font-bold"/>
<div>{item.description}</div>
<div>{item.location}</div>
</div>