102 lines
2.1 KiB
TypeScript
102 lines
2.1 KiB
TypeScript
|
import favicon from "public/favicon.png?url"
|
||
|
|
import linkedin from "public/icons/linkedin.svg?raw"
|
||
|
|
import github from "public/icons/github.svg?raw"
|
||
|
|
import aboutIcon from "public/icons/about.png?url"
|
||
|
|
import experienceIcon from "public/icons/experience.png?url"
|
||
|
|
import projectsIcon from "public/icons/projects.png?url"
|
||
|
|
import techIcon from "public/icons/tech.png?url"
|
||
|
|
|
||
|
|
const vr = hr(height("20px"), margin("0px 2px"))
|
||
|
|
|
||
|
|
export default function Taskbar({ url }: { url: string }) {
|
||
|
|
return div.window(
|
||
|
|
textWrapMode.nowrap,
|
||
|
|
overflowX.hidden,
|
||
|
|
margin("10px"),
|
||
|
|
div(
|
||
|
|
display.flex,
|
||
|
|
alignItems.center,
|
||
|
|
gap("2px"),
|
||
|
|
div(
|
||
|
|
display.flex,
|
||
|
|
paddingLeft("4px"),
|
||
|
|
img(
|
||
|
|
{ src: favicon },
|
||
|
|
width("12px"),
|
||
|
|
height("12px"),
|
||
|
|
marginRight("4px"),
|
||
|
|
),
|
||
|
|
div(fontWeight.bold, "Dan Finch"),
|
||
|
|
),
|
||
|
|
vr,
|
||
|
|
a(
|
||
|
|
{ title: "LinkedIn" },
|
||
|
|
{ href: "https://www.linkedin.com/in/danfinch/" },
|
||
|
|
raw(linkedin),
|
||
|
|
),
|
||
|
|
a(
|
||
|
|
{ title: "GitHub" },
|
||
|
|
{ href: "https://github.com/errilaz" },
|
||
|
|
raw(github),
|
||
|
|
),
|
||
|
|
vr,
|
||
|
|
Task({
|
||
|
|
icon: aboutIcon,
|
||
|
|
title: "About",
|
||
|
|
href: "/",
|
||
|
|
active: url === "/",
|
||
|
|
}),
|
||
|
|
Task({
|
||
|
|
icon: projectsIcon,
|
||
|
|
title: "Projects",
|
||
|
|
href: "/projects",
|
||
|
|
active: url === "/projects",
|
||
|
|
}),
|
||
|
|
Task({
|
||
|
|
icon: experienceIcon,
|
||
|
|
title: "Experience",
|
||
|
|
href: "/experience",
|
||
|
|
active: url === "/experience",
|
||
|
|
}),
|
||
|
|
Task({
|
||
|
|
icon: techIcon,
|
||
|
|
title: "Tech",
|
||
|
|
href: "/tech",
|
||
|
|
active: url === "/tech",
|
||
|
|
}),
|
||
|
|
),
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
function Task({
|
||
|
|
icon,
|
||
|
|
title,
|
||
|
|
href,
|
||
|
|
active,
|
||
|
|
}: {
|
||
|
|
icon: string
|
||
|
|
title: Content
|
||
|
|
href?: string
|
||
|
|
active?: boolean
|
||
|
|
}) {
|
||
|
|
return a.button(
|
||
|
|
{ href },
|
||
|
|
active && className("active"),
|
||
|
|
padding("0 4px"),
|
||
|
|
textAlign.left,
|
||
|
|
div(
|
||
|
|
width("100%"),
|
||
|
|
pad("4px"),
|
||
|
|
display.flex,
|
||
|
|
justifyContent.flexStart,
|
||
|
|
img(
|
||
|
|
{ src: icon },
|
||
|
|
width("12px"),
|
||
|
|
height("12px"),
|
||
|
|
marginRight("4px"),
|
||
|
|
),
|
||
|
|
span(title),
|
||
|
|
),
|
||
|
|
)
|
||
|
|
}
|