convert some more components to typescript
This commit is contained in:
parent
36236ceead
commit
0b620a344f
@ -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
22
components/Job.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
@ -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>
|
||||
@ -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
15
components/Skill.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user