index.tsx raw

   1  import { cn } from '@/lib/utils'
   2  import { useScreenSize } from '@/providers/ScreenSizeProvider'
   3  import BackgroundAudio from '../BackgroundAudio'
   4  import AccountButton from './AccountButton'
   5  import BookmarkButton from './BookmarkButton'
   6  import HomeButton from './HomeButton'
   7  import NotificationsButton from './NotificationsButton'
   8  import PostButton from './PostButton'
   9  import SearchButton from './SearchButton'
  10  import SettingsButton from './SettingsButton'
  11  
  12  export default function BottomNavigationBar() {
  13    const { isTabletScreen } = useScreenSize()
  14  
  15    return (
  16      <div
  17        className={cn('fixed bottom-0 w-full z-40 bg-chrome-background border-t')}
  18        style={{
  19          paddingBottom: 'env(safe-area-inset-bottom)'
  20        }}
  21      >
  22        <BackgroundAudio className="rounded-none border-x-0 border-t-0 border-b bg-background" />
  23        <div className="w-full flex justify-around items-center [&_svg]:size-4 [&_svg]:shrink-0">
  24          <HomeButton />
  25          <NotificationsButton />
  26          {isTabletScreen && (
  27            <>
  28              <SearchButton />
  29              <BookmarkButton />
  30              <PostButton />
  31              <SettingsButton />
  32            </>
  33          )}
  34          <AccountButton />
  35        </div>
  36      </div>
  37    )
  38  }
  39