e77cdd07eb
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.
41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
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>
|
||
);
|
||
} |