1dcf21738b
Adds `AnimatedLink` component to the toolbar, allowing for animated links to different sections of the website. This improves the user experience and provides a more visually appealing way to navigate the site.
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-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>
|
|
);
|
|
} |