feat(home): Refactor header and remove search icon

The changes in this commit focus on refactoring the header component and removing the search icon. The main changes are:

- Replaced the `HeaderToolbar` component with a new `MainHeader` component.
- Removed the search icon and its associated code.
- Improved the layout and styling of the header section.

These changes aim to simplify the header structure and remove unnecessary elements, making the page more focused and visually appealing.
This commit is contained in:
AderKonstantin
2025-03-26 14:02:40 +03:00
parent e77cdd07eb
commit 600a734ad4

View File

@@ -1,6 +1,3 @@
import searchPic from '../public/search.svg';
import mastodonPic from '../public/mastodon.svg'; import mastodonPic from '../public/mastodon.svg';
import githubPic from '../public/github.svg'; import githubPic from '../public/github.svg';
import instagramPic from '../public/instagram.svg'; import instagramPic from '../public/instagram.svg';
@@ -13,7 +10,8 @@ import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import AnimatedLink from '../components/animatedLink'; import AnimatedLink from '../components/animatedLink';
import BlogArea from "../components/blogpost"; import BlogArea from "../components/blogpost";
import HeaderToolbar from "../components/header/toolbar";
import MainHeader from "@/components/header/main";
// Mock data for blog posts // Mock data for blog posts
const blogposts = [ const blogposts = [
@@ -50,34 +48,7 @@ const blogposts = [
export default function Home() { export default function Home() {
return ( return (
<div className="text-xl 2xl:mx-64 xl:mx-32 md:mx-6"> <div className="text-xl 2xl:mx-64 xl:mx-32 md:mx-6">
<header className="flex flex-col"> <MainHeader />
<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, thats im like.
</p>
</div>
<HeaderToolbar />
</header>
<main> <main>
<BlogArea blogposts={blogposts} /> <BlogArea blogposts={blogposts} />
@@ -132,13 +103,13 @@ export default function Home() {
</li> </li>
</ul> </ul>
<ul className="list-none m-4"> <ul className="list-none m-4">
<li className="text-2xl mb-3"><h3 className='inline'>Games</h3><Image src={gamePic} alt="lang" width={24} height={24} className="ml-2 inline filter brightness-0 invert"/></li> <li className="text-2xl mb-3"><h3 className='inline'>Games</h3><Image src={gamePic} alt="lang" width={24} height={24} className="ml-2 inline filter brightness-0 invert" /></li>
<li className="text-xl"> <li className="text-xl">
<AnimatedLink href="#">Robot Fire</AnimatedLink> <AnimatedLink href="#">Robot Fire</AnimatedLink>
</li> </li>
</ul> </ul>
<ul className="list-none m-4"> <ul className="list-none m-4">
<li className="text-2xl mb-3"><h3 className='inline'>Other Projects</h3><Image src={projectPic} alt="lang" width={24} height={24} className="ml-2 inline filter brightness-0 invert"/></li> <li className="text-2xl mb-3"><h3 className='inline'>Other Projects</h3><Image src={projectPic} alt="lang" width={24} height={24} className="ml-2 inline filter brightness-0 invert" /></li>
<li className="text-xl"> <li className="text-xl">
<AnimatedLink href="#">cloudberrygames</AnimatedLink> <AnimatedLink href="#">cloudberrygames</AnimatedLink>
</li> </li>