import * as React from 'react' ; import { useRecoilValue } from 'recoil' ; import { NavigationType } from '../../models/NavigationType' ; import { SettingsAtom } from '../../state' ; import { Sorting } from '../Header' ; import { Breadcrumb } from '../Header/Breadcrumb' ; import { Pagination } from '../Header/Pagination' ; export interface IMediaHeaderBottomProps { } export const MediaHeaderBottom = ( props ) => { const settings = useRecoilValue ( SettingsAtom ) ; if ( ! settings ?. wsFolder ) { return null ; } return ( < nav className = "w-full bg-gray-200 text-vulcan-300 dark:bg-vulcan-400 dark:text-whisper-600 border-b border-gray-300 dark:border-vulcan-100 flex justify-between py-2" aria - label = "Breadcrumb" > < Breadcrumb /> < Pagination / > < div className = { `flex px-5 flex-1 justify-end` } > < Sorting view = { NavigationType . Media } disableCustomSorting / > < /div> < /nav>); } ;