AderKonstantin/darkwave
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 feat(toolbar): Enhance toolbar with icons and links

Browse Source 
Adds new icons and links to the toolbar component, including email, RSS feed, support, and settings. The icons are now displayed as images using the Next.js `Image` component, and the links are wrapped in `Link` components for better navigation. The overall layout and styling of the toolbar have also been improved.
This commit is contained in:
AderKonstantin
2025-03-25 22:48:31 +03:00
parent 106fad8fa6
commit 719fa4f19f
6 changed files with 63 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
components/header/toolbar.tsx
View File

@@ -1,15 +1,58 @@
'use client';
import Image from 'next/image';
import Link from 'next/link';
import emailPic from '../../public/email.svg';
import rssPic from '../../public/rss-feed.svg';
import supportPic from '../../public/support.svg';
import settingsPic from '../../public/settings.svg';
export default function BlogArea() {
export default function Toolbar() {
return (
<div className="flex h-24 justify-between items-center border-t-white border-t">
<div className=""><p>Software Engineer | HomeLab | Nerd</p></div>
<div className="">
<ul className="">
<li className="inline ml-2">email</li>
<li className="inline ml-2">rss</li>
<li className="inline ml-2">support</li>
<li className="inline ml-2">settings</li>
<ul className="inline-flex items-center gap-4">
<li className="inline filter brightness-0 invert">
<Link href="#">
<Image
src={emailPic}
alt="email"
width={32}
height={32}
/>
</Link>
</li>
<li className="inline filter brightness-0 invert">
<Link href="#">
<Image
src={rssPic}
alt="rss"
width={32}
height={32}
/>
</Link>
</li>
<li className="inline filter brightness-0 invert">
<Link href="#">
<Image
src={supportPic}
alt="support"
width={32}
height={32}
/>
</Link>
</li>
<li className="inline filter brightness-0 invert">
<Link href="#">
<Image
src={settingsPic}
alt="settings"
width={32}
height={32}
/>
</Link>
</li>
</ul>
</div>
</div>