From e77cdd07ebc614d8eb8f44c9d036dd37cbada4ba Mon Sep 17 00:00:00 2001
From: AderKonstantin <aderkonstantin9@gmail.com>
Date: Wed, 26 Mar 2025 14:00:01 +0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(header):=20add=20search=20icon?=
 =?UTF-8?q?=20and=20update=20header=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The changes in this commit include:

- Add a search icon to the header, which is implemented using the `Image` component from Next.js.
- Update the header layout to have a more balanced and centered design, with the site title and search icon aligned.
- Adjust the spacing and typography of the header elements to improve the overall visual appearance.

These changes are made to enhance the user experience of the header, making it more visually appealing and functional.
---
 components/blogpost.tsx    |  2 +-
 components/header/main.tsx | 41 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 components/header/main.tsx

diff --git a/components/blogpost.tsx b/components/blogpost.tsx
index a5fb889..281f5dd 100644
--- a/components/blogpost.tsx
+++ b/components/blogpost.tsx
@@ -20,7 +20,7 @@ interface BlogAreaProps {
 
 export default function BlogArea({ blogposts }: BlogAreaProps) {
     return (
-        <div className="blog-area pt-16 pb-8 border-t border-white w-full">
+        <div className="blog-area pt-16 pb-8 w-full">
             <div className="blogposts">
                 {blogposts.map((blogpost, index) => (
                     <div key={index} className="blogpost flex flex-row overflow-hidden mb-14">
diff --git a/components/header/main.tsx b/components/header/main.tsx
new file mode 100644
index 0000000..978238d
--- /dev/null
+++ b/components/header/main.tsx
@@ -0,0 +1,41 @@
+import searchPic from '@/public/search.svg';
+
+
+import Image from "next/image";
+import Link from "next/link";
+
+import AnimatedLink from '../animatedLink';
+import HeaderToolbar from "../header/toolbar";
+
+export default function MainHeader() {
+    return (
+        <header className="flex flex-col">
+        <div className="flex flex-row mt-12 mb-22">
+          <ul className="w-full flex flex-row justify-between items-baseline list-none">
+            <li className="text-4xl">
+              <AnimatedLink href="https://blog.aderk.tech/en">
+                aderk.tech
+              </AnimatedLink>
+            </li>
+
+            <li className="text-6xl flex items-center justify-center filter brightness-0 invert">
+              <Link href="#">
+                <Image
+                  src={searchPic}
+                  alt="search"
+                  width={32}
+                  height={32}
+                />
+              </Link>
+            </li>
+          </ul>
+        </div>
+        <div className="text-2xl mb-20">
+          <p className="leading-10">
+            Hello. I am is a programmer, hacker, and gamer. Love comics, coding, read books. There I am posting articles about science and another staff, that’s im like.
+          </p>
+        </div>
+        <HeaderToolbar />
+      </header>
+    );
+}
\ No newline at end of file