From 719fa4f19fa508ec2ecf72d5549d679710416833 Mon Sep 17 00:00:00 2001
From: AderKonstantin <aderkonstantin9@gmail.com>
Date: Tue, 25 Mar 2025 22:48:31 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20feat(toolbar):=20Enhance=20toolb?=
 =?UTF-8?q?ar=20with=20icons=20and=20links?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 components/header/toolbar.tsx | 55 +++++++++++++++++++++++++++++++----
 public/email.svg              |  3 ++
 public/rss-feed.svg           |  1 +
 public/search.svg             |  3 ++
 public/settings.svg           |  6 ++++
 public/support.svg            |  1 +
 6 files changed, 63 insertions(+), 6 deletions(-)
 create mode 100644 public/email.svg
 create mode 100644 public/rss-feed.svg
 create mode 100644 public/search.svg
 create mode 100644 public/settings.svg
 create mode 100644 public/support.svg

diff --git a/components/header/toolbar.tsx b/components/header/toolbar.tsx
index 97f2a8b..3cdaece 100644
--- a/components/header/toolbar.tsx
+++ b/components/header/toolbar.tsx
@@ -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>
diff --git a/public/email.svg b/public/email.svg
new file mode 100644
index 0000000..14a19b5
--- /dev/null
+++ b/public/email.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 2-8.4 7.05a1 1 0 0 1-1.2 0L1 2m18 0a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1m18 0v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2"/>
+</svg>
diff --git a/public/rss-feed.svg b/public/rss-feed.svg
new file mode 100644
index 0000000..a94b740
--- /dev/null
+++ b/public/rss-feed.svg
@@ -0,0 +1 @@
+<svg height="24" preserveAspectRatio="xMinYMin" viewBox="-4 -4 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m1.996 15.97a1.996 1.996 0 1 1 0-3.992 1.996 1.996 0 0 1 0 3.992zm-.876-7.993a.998.998 0 0 1 -.247-1.98 8.103 8.103 0 0 1 9.108 8.04v.935a.998.998 0 1 1 -1.996 0v-.934a6.108 6.108 0 0 0 -6.865-6.06zm-1.12-6.912a.998.998 0 0 1 .93-1.063c7.787-.519 14.518 5.372 15.037 13.158.042.626.042 1.254 0 1.88a.998.998 0 1 1 -1.992-.133c.036-.538.036-1.077 0-1.614-.445-6.686-6.225-11.745-12.91-11.299a.998.998 0 0 1 -1.065-.93z"/></svg>
\ No newline at end of file
diff --git a/public/search.svg b/public/search.svg
new file mode 100644
index 0000000..324f91f
--- /dev/null
+++ b/public/search.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
+</svg>
diff --git a/public/settings.svg b/public/settings.svg
new file mode 100644
index 0000000..abe44a0
--- /dev/null
+++ b/public/settings.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+  <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+    <path d="M19 11V9a1 1 0 0 0-1-1h-.757l-.707-1.707.535-.536a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0l-.536.535L12 2.757V2a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v.757l-1.707.707-.536-.535a1 1 0 0 0-1.414 0L2.929 4.343a1 1 0 0 0 0 1.414l.536.536L2.757 8H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h.757l.707 1.707-.535.536a1 1 0 0 0 0 1.414l1.414 1.414a1 1 0 0 0 1.414 0l.536-.535L8 17.243V18a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-.757l1.707-.708.536.536a1 1 0 0 0 1.414 0l1.414-1.414a1 1 0 0 0 0-1.414l-.535-.536.707-1.707H18a1 1 0 0 0 1-1Z"/>
+    <path d="M10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/>
+  </g>
+</svg>
diff --git a/public/support.svg b/public/support.svg
new file mode 100644
index 0000000..963e56c
--- /dev/null
+++ b/public/support.svg
@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="#000"><path d="m7.824 5.937a1 1 0 0 0 .726-.312 2.042 2.042 0 0 1 2.835-.065 1 1 0 0 0 1.388-1.441 3.994 3.994 0 0 0 -5.674.13 1 1 0 0 0 .725 1.688z"/><path d="m17 7a7 7 0 1 0 -14 0 3 3 0 0 0 -3 3v2a3 3 0 0 0 3 3h1a1 1 0 0 0 1-1v-7a5 5 0 1 1 10 0v7.083a2.92 2.92 0 0 1 -2.917 2.917h-.083a2 2 0 0 0 -2-2h-1a2 2 0 0 0 -2 2v1a2 2 0 0 0 2 2h1a1.993 1.993 0 0 0 1.722-1h.361a4.92 4.92 0 0 0 4.824-4h.093a3 3 0 0 0 3-3v-2a3 3 0 0 0 -3-3z"/></g></svg>
\ No newline at end of file