Template for React/Nextjs powered by Tailwind CSS

menuBarSection.tsx

/*
Copyright © Tilt 2023 - https://github.com/t1ltxz-gxd
Description:
This is a template for menu bar.

Preview: https://i.imgur.com/QPtXYDN.png
*/

import Link from "next/link";
import {Button} from "@/components/ui/button";
import {BsPersonFill} from "react-icons/bs";
import {IoApps, IoMail} from "react-icons/io5";
import {FaHome} from "react-icons/fa";

const Menu = () => {
  return (
      <div className='fixed bottom-0 sm:bottom-12 w-full sm:w-fit left-1/2 -translate-x-1/2 bg-accent rounded-t-xl
      sm:rounded-full py-3 px-6 flex items-center justify-around sm:justify-center gap-12 z-30 '>
          <Link href='#'><Button variant='ghost' size='icon'><FaHome className='hover:text-primary h-[1.2rem] w-[1.2rem]'/></Button></Link>
          <Link href='#about'><Button variant='ghost' size='icon'><BsPersonFill className='hover:text-primary h-[1.2rem] w-[1.2rem]'/></Button></Link>
          <Link href='#projects'><Button variant='ghost' size='icon'><IoApps className='hover:text-primary h-[1.2rem] w-[1.2rem]'/></Button></Link>
          <Link href='#contact'><Button variant='ghost' size='icon'><IoMail className='hover:text-primary h-[1.2rem] w-[1.2rem]'/></Button></Link>
      </div>
  )
}

export default Menu;