From 0b620a344f20901ad1582740d2fc3197dfc66daa Mon Sep 17 00:00:00 2001
From: Triston Armstrong <tarmstrong95@proton.me>
Date: Fri, 29 Dec 2023 19:17:02 -0600
Subject: [PATCH] convert some more components to typescript

---
 components/Job.js                      | 14 ----------
 components/Job.tsx                     | 22 +++++++++++++++
 components/{Project.js => Project.tsx} |  8 +++++-
 components/Skill.js                    |  8 ------
 components/Skill.tsx                   | 15 ++++++++++
 pages/index.tsx                        | 38 ++++++++++++++++++--------
 6 files changed, 70 insertions(+), 35 deletions(-)
 delete mode 100644 components/Job.js
 create mode 100644 components/Job.tsx
 rename components/{Project.js => Project.tsx} (75%)
 delete mode 100644 components/Skill.js
 create mode 100644 components/Skill.tsx

diff --git a/components/Job.js b/components/Job.js
deleted file mode 100644
index 64bb7b5..0000000
--- a/components/Job.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export default function Job({ logo, name, details, dateFrom, dateTo }) {
-  return (
-    <div className="flex items-center gap-x-3 border rounded-xl w-full p-2 bg-slate-500 bg-opacity-20 border-slate-500 border-opacity-0">
-      <img src={logo} className="w-10 h-10 rounded-full" />
-      <div className="flex flex-col flex-1">
-        <div className="flex justify-between">
-          <span className="block text-sm font-bold ">{name}</span>
-          <span className="block text-xs font-bold ">{dateFrom} - {dateTo}</span>
-        </div>
-        <span className="block text-xs ">{details}</span>
-      </div>
-    </div>
-  )
-}
diff --git a/components/Job.tsx b/components/Job.tsx
new file mode 100644
index 0000000..f7eb029
--- /dev/null
+++ b/components/Job.tsx
@@ -0,0 +1,22 @@
+export interface JobProps {
+  logo: string
+  name: string
+  details: string
+  dateFrom: string
+  dateTo: string
+}
+
+export default function Job({ logo, name, details, dateFrom, dateTo }: JobProps) {
+  return (
+    <div className="flex items-center gap-x-3 border rounded-xl w-full p-2 bg-slate-500 bg-opacity-20 border-slate-500 border-opacity-0" >
+      <img src={logo} className="w-10 h-10 rounded-full" />
+      <div className="flex flex-col flex-1" >
+        <div className="flex justify-between" >
+          <span className="block text-sm font-bold " > {name} </span>
+          <span className="block text-xs font-bold " > {dateFrom} - {dateTo} </span>
+        </div>
+        <span className="block text-xs " > {details} </span>
+      </div>
+    </div>
+  )
+}
diff --git a/components/Project.js b/components/Project.tsx
similarity index 75%
rename from components/Project.js
rename to components/Project.tsx
index d7a1fe5..611ed5e 100644
--- a/components/Project.js
+++ b/components/Project.tsx
@@ -1,6 +1,12 @@
 import ExternalLinkIcon from "./ExternalLinkIcon";
 
-export default function Project({ label, date, url }) {
+export interface ProjectProps {
+  label: string
+  date: string
+  url: string
+}
+
+export default function Project({ label, date, url }: ProjectProps) {
   return (
     <div className="flex flex-row items-baseline justify-between gap-2">
       <p className="text-sm ">{label}</p>
diff --git a/components/Skill.js b/components/Skill.js
deleted file mode 100644
index 53bc2cf..0000000
--- a/components/Skill.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function Skill({ label, link = "#" }) {
-  return (
-    <a href={link} target="_blank" style={{ textDecoration: 'none !important' }}>
-      <div className={`hover:scale-110 transition duration-100 bg-slate-500 text-white rounded-xl px-2 py-1 text-xs`}>{label}</div>
-    </a>
-  )
-}
-
diff --git a/components/Skill.tsx b/components/Skill.tsx
new file mode 100644
index 0000000..fdf58aa
--- /dev/null
+++ b/components/Skill.tsx
@@ -0,0 +1,15 @@
+export interface SkillProps {
+  label: string
+  link?: string
+}
+
+export default function Skill({ label, link = "#" }: SkillProps) {
+  return (
+    <a href={link} target="_blank" style={{ textDecoration: 'none !important' }}>
+      <div className={`hover:scale-110 transition duration-100 bg-slate-500 text-white rounded-xl px-2 py-1 text-xs`}>
+        {label}
+      </div>
+    </a>
+  )
+}
+
diff --git a/pages/index.tsx b/pages/index.tsx
index 4dbc260..1e09827 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,11 +1,18 @@
-import Job from "../components/Job.js";
-import Skill from "../components/Skill.js";
-import Project from "../components/Project.js";
+import Job, { type JobProps } from "../components/Job";
+import Skill, { type SkillProps } from "../components/Skill";
+import Project, { type ProjectProps } from "../components/Project";
 import Head from "next/head";
-import { UsefulLinksList } from '../components/UsefulLinks/index.js'
-import { SocialLinksList } from '../components/SocialLinks/SocialLinks.js'
+import { UsefulLinksList } from '../components/UsefulLinks/index'
+import { SocialLinksList } from '../components/SocialLinks/SocialLinks'
+import type { InferGetStaticPropsType, GetStaticProps } from 'next'
 
-export default function Landing({ jobs, skills, projects }) {
+interface LandingProps {
+  jobs: JobsType[]
+  skills: SkillsType[]
+  projects: ProjectsType[]
+}
+
+export default function Landing({ jobs, skills, projects }: LandingProps) {
   return (
     <div>
       <Head>
@@ -46,7 +53,7 @@ export default function Landing({ jobs, skills, projects }) {
           <article>
             <h2 className="text-1xl font-bold uppercase">Skills</h2>
             <div className="flex gap-2 py-4" id="skills">
-              {skills.map(skill => <Skill key={skill.label} label={skill.label} color={skill.color} />)}
+              {skills.map(skill => <Skill key={skill.label} label={skill.label} />)}
             </div>
           </article>
 
@@ -77,7 +84,11 @@ export default function Landing({ jobs, skills, projects }) {
 }
 
 
-export function getStaticProps() {
+export function getStaticProps(): ReturnType<GetStaticProps<{
+  projects: ProjectsType[],
+  skills: SkillsType[],
+  jobs: JobsType[]
+}>> {
   return {
     props: {
       projects: [
@@ -94,10 +105,10 @@ export function getStaticProps() {
         { label: "Armstrong Editor", date: "12/14/2022", url: "https://github.com/tristonarmstrong/armstrong-editor" },
       ],
       skills: [
-        { label: "Typescript", color: "blue-500" },
-        { label: "Python", color: "green-800" },
-        { label: "Rust", color: "yellow-800" },
-        { label: "Javascript", color: "yellow-500" },
+        { label: "Typescript" },
+        { label: "Python" },
+        { label: "Rust" },
+        { label: "Javascript" },
       ],
       jobs: [
         {
@@ -134,3 +145,6 @@ export function getStaticProps() {
 }
 
 
+type SkillsType = SkillProps
+type JobsType = JobProps
+type ProjectsType = ProjectProps