Merge pull request #2 from AderKonstantin/header-toolbar

Header toolbar
This commit is contained in:
AderKonstantin
2025-03-26 00:34:43 +03:00
committed by GitHub
6 changed files with 78 additions and 0 deletions

View File

@@ -0,0 +1,64 @@
'use client';
import Image from 'next/image';
import Link from 'next/link';
import globePic from '../../public/globe.svg';
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';
import AnimatedLink from '../animatedLink';
export default function Toolbar() {
return (
<div className="flex h-24 justify-between items-center border-t-white border-t">
<div className="flex items-baseline">
<p><AnimatedLink href='#'>Science</AnimatedLink> | <AnimatedLink href='#'>Software</AnimatedLink> | <AnimatedLink href='#'>Hardware</AnimatedLink> | <AnimatedLink href='#'>Rockets</AnimatedLink> | <AnimatedLink href='#'>Startups</AnimatedLink></p>
</div>
<div className="flex items-baseline">
<ul className="inline-flex items-center gap-4">
<li className="inline filter brightness-0 invert">
<Link href="#">
<Image
src={globePic}
alt="lang"
width={32}
height={32}
/>
</Link>
</li>
<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={settingsPic}
alt="settings"
width={32}
height={32}
/>
</Link>
</li>
</ul>
</div>
</div>
);
}

3
public/email.svg Normal file
View File

@@ -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>

After

Width:  |  Height:  |  Size: 290 B

1
public/rss-feed.svg Normal file
View File

@@ -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>

After

Width:  |  Height:  |  Size: 551 B

3
public/search.svg Normal file
View File

@@ -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>

After

Width:  |  Height:  |  Size: 225 B

6
public/settings.svg Normal file
View File

@@ -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>

After

Width:  |  Height:  |  Size: 757 B

1
public/support.svg Normal file
View File

@@ -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>

After

Width:  |  Height:  |  Size: 525 B