Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-13 00:03:27 +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

55
apps/artboard/src/templates/pikachu.tsx
View File

@ -137,16 +137,17 @@ const Rating = ({ level }: RatingProps) => (
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 group-[.summary]:text-background" />}
{!iconOnRight && ( icon ?? <i className="ph ph-bold ph-link text-primary group-[.summary]:text-background" />)}
<a
href={url.href}
target="_blank"
@ -155,10 +156,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 group-[.summary]:text-background" />)}
</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 group-[.summary]:text-background" />
}
iconOnRight={true}
className={className}
/>
);
} else {
return (
<div className={className}>
{name}
</div>
);
}
};
type SectionProps<T> = {
section: SectionWithItem<T> | CustomSectionGroup;
children?: (item: T) => React.ReactNode;
@ -200,7 +231,7 @@ const Section = <T,>({
<div key={item.id} className={cn("space-y-2", className)}>
<div>
{children?.(item as T)}
{url !== undefined && <Link url={url} />}
{url !== undefined && section.separateLinks && <Link url={url} />}
</div>
{summary !== undefined && !isEmptyString(summary) && (
@ -260,7 +291,7 @@ const Experience = () => {
{(item) => (
<div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
<div className="text-left">
<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>
@ -282,7 +313,7 @@ const Education = () => {
{(item) => (
<div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
<div className="text-left">
<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.score}</div>
</div>
@ -306,7 +337,7 @@ const Awards = () => {
<div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
<div className="text-left">
<div className="font-bold">{item.title}</div>
<div>{item.awarder}</div>
<LinkedEntity name={item.awarder} url={item.url} separateLinks={section.separateLinks}/>
</div>
<div className="shrink-0 text-right group-[.sidebar]:text-left">
@ -327,7 +358,7 @@ const Certifications = () => {
<div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
<div className="text-left">
<div className="font-bold">{item.name}</div>
<div>{item.issuer}</div>
<LinkedEntity name={item.issuer} url={item.url} separateLinks={section.separateLinks}/>
</div>
<div className="shrink-0 text-right group-[.sidebar]:text-left">
@ -372,7 +403,7 @@ const Publications = () => {
{(item) => (
<div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
<div className="text-left">
<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>
@ -393,7 +424,7 @@ const Volunteer = () => {
{(item) => (
<div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
<div className="text-left">
<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>
@ -430,7 +461,7 @@ const Projects = () => {
{(item) => (
<div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
<div className="text-left">
<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>
@ -450,7 +481,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>
)}
@ -471,7 +502,7 @@ const Custom = ({ id }: { id: string }) => {
{(item) => (
<div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
<div className="text-left">
<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>