122 lines
3.1 KiB
TypeScript
122 lines
3.1 KiB
TypeScript
|
|
import Image from 'next/image'
|
|
import React from 'react'
|
|
import styles from './navbar.module.css'
|
|
import { CiViewTable } from 'react-icons/ci';
|
|
import { BsToggleOn, BsSearch } from 'react-icons/bs';
|
|
import { RxEyeClosed, RxEyeOpen } from 'react-icons/rx';
|
|
import { TbArrowWaveRightDown } from 'react-icons/tb';
|
|
import { CgProfile } from 'react-icons/cg';
|
|
import { RiBillLine } from 'react-icons/ri';
|
|
import { AiOutlineHome, AiOutlineBank } from 'react-icons/ai';
|
|
|
|
|
|
|
|
export default function Navbar() {
|
|
return (
|
|
<nav className={styles.navbar}>
|
|
<div className={styles.left}>
|
|
<div className={styles.logoDiv}>
|
|
<Image
|
|
src="/foldlogo.svg"
|
|
alt="Fold Logo"
|
|
className={styles.foldLogo}
|
|
width={40}
|
|
height={40}
|
|
priority
|
|
/>
|
|
</div>
|
|
<div className={styles.actionsDiv}>
|
|
<div className={styles.holder}>
|
|
<CiViewTable
|
|
className={styles.calendarLogo}
|
|
size={20}
|
|
/>
|
|
</div>
|
|
<div className={styles.holder}>
|
|
<RxEyeClosed
|
|
className={styles.calendarLogo}
|
|
size={20}
|
|
/>
|
|
<BsToggleOn
|
|
className={styles.calendarLogo}
|
|
size={20}
|
|
/>
|
|
<RxEyeOpen
|
|
className={styles.calendarLogo}
|
|
size={20}
|
|
/>
|
|
</div>
|
|
<div className={`${styles.holder} ${styles.search}`}>
|
|
<BsSearch
|
|
className={styles.calendarLogo}
|
|
size={20}
|
|
/>
|
|
<input
|
|
className={styles.input}
|
|
placeholder="Search anything"
|
|
size={25}
|
|
/>
|
|
<button
|
|
className={styles.guidingButton}
|
|
>
|
|
cmd
|
|
</button>
|
|
<button
|
|
className={styles.guidingButton}
|
|
>
|
|
k
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.right}>
|
|
<div className={styles.actionsDiv}>
|
|
<button
|
|
className={styles.tabButton}
|
|
>
|
|
<AiOutlineHome
|
|
className={styles.tabButtonIcon}
|
|
size={20}
|
|
/>
|
|
Home
|
|
</button>
|
|
<button
|
|
className={styles.tabButton}
|
|
>
|
|
<RiBillLine
|
|
className={styles.tabButtonIcon}
|
|
size={20}
|
|
/>
|
|
Transactions
|
|
</button>
|
|
<button
|
|
className={styles.tabButton}
|
|
>
|
|
<TbArrowWaveRightDown
|
|
className={styles.tabButtonIcon}
|
|
size={20}
|
|
/>
|
|
Cash Flow
|
|
</button>
|
|
<button
|
|
className={styles.tabButton}
|
|
>
|
|
<AiOutlineBank
|
|
className={styles.tabButtonIcon}
|
|
size={20}
|
|
/>
|
|
Banks
|
|
</button>
|
|
</div>
|
|
<div className={styles.logoDiv}>
|
|
<CgProfile
|
|
className={styles.calendarLogo}
|
|
size={38}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|