website/_components/navbar.tsx

63 lines
1.8 KiB
TypeScript
Raw Normal View History

2024-03-05 18:38:42 -05:00
export default function () {
const iconStyle = {
filter: "var(--filter-green)",
};
2023-07-26 09:50:04 -04:00
return (
<nav className="navbar">
<ul className="navbar-list">
<li className="navbar-list-item home">
<a href="/" title="Home">
<img
src="https://static.fosterhangdaan.com/icons/tabler-icons/v2.47.0/svg/home.svg"
className="icon"
style={iconStyle}
alt="home"
/>
</a>
</li>
<li className="navbar-list-item">
<a href="/blog/" title="Blog">
<img
src="https://static.fosterhangdaan.com/icons/tabler-icons/v2.47.0/svg/news.svg"
className="icon"
style={iconStyle}
2023-10-05 11:09:26 -04:00
alt="blog"
/>
</a>
</li>
<li className="navbar-list-item">
<a href="/resume/" title="Resume">
<img
src="https://static.fosterhangdaan.com/icons/tabler-icons/v2.47.0/svg/file-cv.svg"
className="icon"
style={iconStyle}
2023-10-05 11:09:26 -04:00
alt="resume"
/>
</a>
</li>
<li className="navbar-list-item">
<a href="/gpg-key/" title="GPG Key">
<img
src="https://static.fosterhangdaan.com/icons/tabler-icons/v2.47.0/svg/key.svg"
className="icon"
style={iconStyle}
alt="gpg key"
/>
</a>
</li>
<li className="navbar-list-item">
<a href="/about/" title="About">
<img
src="https://static.fosterhangdaan.com/icons/tabler-icons/v2.47.0/svg/info-circle.svg"
className="icon"
style={iconStyle}
2023-10-05 11:09:26 -04:00
alt="about"
/>
</a>
2023-07-26 09:50:04 -04:00
</li>
</ul>
</nav>
);
}