Added new template - Leafish

2025-11-15 01:01:43 +10:00 · 2022-04-03 20:23:06 +03:00
parent c67e2ac9f8
commit 648f182e76
7 changed files with 265 additions and 0 deletions
--- a/client/templates/Leafish/widgets/Section.tsx
+++ b/client/templates/Leafish/widgets/Section.tsx
@ -0,0 +1,127 @@
+import { Email, Link, 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 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: 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 className="mb-4">
+      <Heading>{section.name}</Heading>
+
+      <div
+        className="grid items-start gap-4"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, minmax(0, 1fr))` }}
+        id={`Section_${section.id}`}
+      >
+        {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 mb-2 Section_${section.id}_inner`}>
+              <div>
+                {title && <div className="font-bold Section_title">{title}</div>}
+                {subtitle && <div className="Section_subtitle">{subtitle}</div>}
+                {date && (
+                  <div className="italic text-xs Section_date" style={{ color: primaryColor }}>
+                    ({date})
+                  </div>
+                )}
+                {headline && <div className="opacity-50 Section_headline">{headline}</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(5).keys()).map((_, index) => (
+                        <div
+                          key={index}
+                          className="mr-1 h-3 w-3 rounded-full border-2"
+                          style={{
+                            borderColor: primaryColor,
+                            backgroundColor: levelNum / (10 / 5) > index ? primaryColor : '',
+                          }}
+                        />
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {summary && (
+                <div>
+                  <div className="italic text-xs" style={{ color: primaryColor }}>
+                    Overview
+                  </div>
+                  <Markdown className={`marker:text-[${primaryColor}]`}>{summary}</Markdown>
+                </div>
+              )}
+
+              {url && (
+                <DataDisplay icon={<Link />} link={url} className="text-xs">
+                  {url}
+                </DataDisplay>
+              )}
+
+              {keywords && <div>{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;