7c3071cf0d
Adds a bottom border to the toolbar component to create a more distinct separation between the toolbar and the content below it. This change improves the visual hierarchy and overall design of the page.
64 lines
2.6 KiB
TypeScript
64 lines
2.6 KiB
TypeScript
'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-white border-t border-b">
|
|
<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>
|
|
);
|
|
} |