✨ feat(header): add search icon and update header layout
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.
This commit is contained in:
@@ -20,7 +20,7 @@ interface BlogAreaProps {
|
|||||||
|
|
||||||
export default function BlogArea({ blogposts }: BlogAreaProps) {
|
export default function BlogArea({ blogposts }: BlogAreaProps) {
|
||||||
return (
|
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">
|
<div className="blogposts">
|
||||||
{blogposts.map((blogpost, index) => (
|
{blogposts.map((blogpost, index) => (
|
||||||
<div key={index} className="blogpost flex flex-row overflow-hidden mb-14">
|
<div key={index} className="blogpost flex flex-row overflow-hidden mb-14">
|
||||||
|
|||||||
41
components/header/main.tsx
Normal file
41
components/header/main.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user