education skills

src/components/KeywordsPipeList.test.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+import KeywordsPipeList from './KeywordsPipeList';
+
+describe('KeywordsPipeList', () => {
+  it('renders null if there keywords is undefined', () => {
+    const { container } = render(<KeywordsPipeList keywords={undefined} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+  it('renders null if there keywords is empty', () => {
+    // We don't want an empty <ul>
+    const { container } = render(<KeywordsPipeList keywords={[]} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+  it('renders a list of all of the keywords sorted alphabetically', () => {
+    render(<KeywordsPipeList keywords={['one', 'two', 'three']} />);
+    expect(screen.getByRole('list')).toHaveTextContent('onethreetwo');
+  });
+  it('appends className props to predefined classes', () => {
+    render(<KeywordsPipeList className="mb-2" keywords={['anything']} />);
+    expect(screen.getByRole('list')).toHaveClass('mb-2');
+    expect(screen.getByRole('list')).toHaveClass('text-gray-500');
+  });
+  // If tests knew about tailwind we could probably test the pipes
+  // but that is overkill at this point
+});

src/components/KeywordsPipeList.tsx

@@ -0,0 +1,32 @@
+import { twMerge } from 'tailwind-merge';
+
+type KeywordsPipeListProps = {
+  keywords?: string[];
+} & React.HTMLAttributes<HTMLUListElement>;
+
+const KeywordsPipeList: React.FC<KeywordsPipeListProps> = ({
+  keywords,
+  className,
+  ...rest
+}) => {
+  if (!keywords || !keywords.length) {
+    return null;
+  }
+  return (
+    <ul
+      className={twMerge('text-gray-500 dark:text-gray-400', className)}
+      {...rest}
+    >
+      {keywords.sort().map((k) => (
+        <li
+          className="inline after:content-['_|_'] last:after:content-none"
+          key={k}
+        >
+          {k}
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default KeywordsPipeList;

src/data/index.ts

@@ -13,6 +13,7 @@ const AdditionalFields = z.object({
   education: z.array(
     z.object({
       name: z.string().optional(),
+      skills: z.array(z.string()).optional(),
     }),
   ),
 });

src/data/resume.json

@@ -409,7 +409,14 @@
       "minorArea": "Mathematics",
       "startDate": "2002-07-01",
       "endDate": "2007-05-15",
-      "score": "3.3"
+      "score": "3.3",
+      "skills": [
+        "C++",
+        "Java",
+        "Visual Basic",
+        "PHP",
+        "Data Structures & Algorithms"
+      ]
     }
   ],
   "skills": [

src/pages/ResumeTimeline/EducationTimelineItem.tsx

@@ -1,6 +1,7 @@
 import { MdSchool } from 'react-icons/md';
 import { Timeline, Card } from 'flowbite-react';
 import { ResumeProfile } from 'data';
+import KeywordsPipeList from 'components/KeywordsPipeList';
 import ResumeTimelineDates from './Dates';
 
 type EducationTimelineItemProps = {
@@ -49,7 +50,7 @@ const EducationTimelineItem: React.FC<EducationTimelineItemProps> = ({
           </div>
         </Timeline.Title>
         <Timeline.Body>
-          <ul>
+          <ul className="mb-4">
             <li>
               <strong>Major:</strong> {education.area}
             </li>
@@ -63,6 +64,7 @@ const EducationTimelineItem: React.FC<EducationTimelineItemProps> = ({
               <strong>GPA:</strong> {education.score}
             </li>
           </ul>
+          <KeywordsPipeList keywords={education.skills} />
         </Timeline.Body>
       </Card>
     </Timeline.Content>

src/pages/ResumeTimeline/WorkTimelineItem.tsx

@@ -1,5 +1,5 @@
 import { PiBuildingOfficeFill } from 'react-icons/pi';
-import { Timeline, Card } from 'flowbite-react';
+import { Timeline, Card, Button } from 'flowbite-react';
 import { ResumeProfile } from 'data';
 import ResumeTimelineDates from './Dates';
 
@@ -43,7 +43,7 @@ const WorkTimelineItem: React.FC<WorkTimelineItemProps> = ({ work }) => (
           </div>
         </Timeline.Title>
         <Timeline.Body>{work.summary}</Timeline.Body>
-        {/* <Button>Read more</Button> */}
+        <Button>Read more</Button>
       </Card>
     </Timeline.Content>
   </Timeline.Item>

src/pages/Skills/index.tsx

@@ -1,6 +1,7 @@
 import ScrollPageHeading from 'components/ScrollPages/Heading';
 import data from 'data/index';
 import { Accordion } from 'flowbite-react';
+import KeywordsPipeList from 'components/KeywordsPipeList';
 import LevelRating from './LevelRating';
 import SkillTitle from './Title';
 import SkillDescription from './Description';
@@ -23,18 +24,7 @@ const Skills: React.FC = () => {
             </Accordion.Title>
             <Accordion.Content>
               <SkillDescription name={skill.name} />
-              {skill.keywords && (
-                <ul className="mb-2 text-gray-500 dark:text-gray-400">
-                  {skill.keywords.sort().map((k) => (
-                    <li
-                      className="inline after:content-['_|_'] last:after:content-none"
-                      key={k}
-                    >
-                      {k}
-                    </li>
-                  ))}
-                </ul>
-              )}
+              {skill.keywords && <KeywordsPipeList keywords={skill.keywords} />}
             </Accordion.Content>
           </Accordion.Panel>
         ))}