tristonarmstrong/XeNote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

convert some more components to typescript

Browse Source
This commit is contained in:
Triston Armstrong 2023-12-29 19:17:02 -06:00
parent 36236ceead
commit 0b620a344f
6 changed files with 70 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/Job.js
View File

@ -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>
)
}

22
components/Job.tsx Normal file
View File

@ -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>
)
}

8
components/Project.js → components/Project.tsx
View File

@ -1,6 +1,12 @@
import ExternalLinkIcon from "./ExternalLinkIcon"; 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 ( return (
<div className="flex flex-row items-baseline justify-between gap-2"> <div className="flex flex-row items-baseline justify-between gap-2">
<p className="text-sm ">{label}</p> <p className="text-sm ">{label}</p>

8
components/Skill.js
View File

@ -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>
)
}

15
components/Skill.tsx Normal file
View File

@ -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>
)
}

38
pages/index.tsx
View File

@ -1,11 +1,18 @@
import Job from "../components/Job.js"; import Job, { type JobProps } from "../components/Job";
import Skill from "../components/Skill.js"; import Skill, { type SkillProps } from "../components/Skill";
import Project from "../components/Project.js"; import Project, { type ProjectProps } from "../components/Project";
import Head from "next/head"; import Head from "next/head";
import { UsefulLinksList } from '../components/UsefulLinks/index.js' import { UsefulLinksList } from '../components/UsefulLinks/index'
import { SocialLinksList } from '../components/SocialLinks/SocialLinks.js' 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 ( return (
<div> <div>
<Head> <Head>
@ -46,7 +53,7 @@ export default function Landing({ jobs, skills, projects }) {
<article> <article>
<h2 className="text-1xl font-bold uppercase">Skills</h2> <h2 className="text-1xl font-bold uppercase">Skills</h2>
<div className="flex gap-2 py-4" id="skills"> <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> </div>
</article> </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 { return {
props: { props: {
projects: [ projects: [
@ -94,10 +105,10 @@ export function getStaticProps() {
{ label: "Armstrong Editor", date: "12/14/2022", url: "https://github.com/tristonarmstrong/armstrong-editor" }, { label: "Armstrong Editor", date: "12/14/2022", url: "https://github.com/tristonarmstrong/armstrong-editor" },
], ],
skills: [ skills: [
{ label: "Typescript", color: "blue-500" }, { label: "Typescript" },
{ label: "Python", color: "green-800" }, { label: "Python" },
{ label: "Rust", color: "yellow-800" }, { label: "Rust" },
{ label: "Javascript", color: "yellow-500" }, { label: "Javascript" },
], ],
jobs: [ jobs: [
{ {
@ -134,3 +145,6 @@ export function getStaticProps() {
} }
type SkillsType = SkillProps
type JobsType = JobProps
type ProjectsType = ProjectProps