🎨 feat(toolbar): Enhance toolbar with icons and links
Adds new icons and links to the toolbar component, including email, RSS feed, support, and settings. The icons are now displayed as images using the Next.js `Image` component, and the links are wrapped in `Link` components for better navigation. The overall layout and styling of the toolbar have also been improved.
This commit is contained in:
AderKonstantin
@@ -1,15 +1,58 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
import Image from 'next/image';
|
||||||
|
import Link from 'next/link';
|
||||||
|
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';
|
||||||
|
|
||||||
export default function BlogArea() {
|
|
||||||
|
export default function Toolbar() {
|
||||||
return (
|
return (
|
||||||
<div className="flex h-24 justify-between items-center border-t-white border-t">
|
<div className="flex h-24 justify-between items-center border-t-white border-t">
|
||||||
<div className=""><p>Software Engineer | HomeLab | Nerd</p></div>
|
<div className=""><p>Software Engineer | HomeLab | Nerd</p></div>
|
||||||
<div className="">
|
<div className="">
|
||||||
<ul className="">
|
<ul className="inline-flex items-center gap-4">
|
||||||
<li className="inline ml-2">email</li>
|
<li className="inline filter brightness-0 invert">
|
||||||
<li className="inline ml-2">rss</li>
|
<Link href="#">
|
||||||
<li className="inline ml-2">support</li>
|
<Image
|
||||||
<li className="inline ml-2">settings</li>
|
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={supportPic}
|
||||||
|
alt="support"
|
||||||
|
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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
3
public/email.svg
Normal file
3
public/email.svg
Normal 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
1
public/rss-feed.svg
Normal 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
3
public/search.svg
Normal 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
6
public/settings.svg
Normal 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
1
public/support.svg
Normal 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 |
Reference in New Issue
Block a user