bdac10ac57
Part of #145. Fourteen files whose user-facing strings are generic enough to belong in `common` — loading and empty states, the confirmation modal, the shared input modals (text/date/user/attachment viewer), the mobile nav bar, the autocomplete input, the error screen and the file-upload error paths. Extends the namespace that already exists, so `src/i18n/config.js` is untouched and this cannot collide with any other extraction PR over the `ns:` array. 28 keys added to `public/locales/en/common.json`. English only — no translations, no behaviour change. Every t() value is checked against this branch's base: the string must appear character-for-character in the code it replaces (36 call sites). One value is matched loosely and worth naming: `errorScreen.hideDetails`. The base renders `{showDetails ? 'Hide' : 'Show'} error details`, so neither full phrase exists contiguously in the source — only one branch of the ternary can. Both keys hold exactly what each branch renders. The sentence is kept whole rather than split around the ternary, because a split sentence cannot be reordered by a translator.
110 lines
2.9 KiB
JavaScript
110 lines
2.9 KiB
JavaScript
import * as React from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import Box from '@mui/joy/Box'
|
|
import ListItemDecorator from '@mui/joy/ListItemDecorator'
|
|
import Tabs from '@mui/joy/Tabs'
|
|
import TabList from '@mui/joy/TabList'
|
|
import Tab, { tabClasses } from '@mui/joy/Tab'
|
|
import HomeRoundedIcon from '@mui/icons-material/HomeRounded'
|
|
import FavoriteBorder from '@mui/icons-material/FavoriteBorder'
|
|
import Search from '@mui/icons-material/Search'
|
|
import Person from '@mui/icons-material/Person'
|
|
|
|
export default function NavBarMobile() {
|
|
const { t } = useTranslation('common')
|
|
const [index, setIndex] = React.useState(0)
|
|
const colors = ['primary', 'danger', 'success', 'warning']
|
|
return (
|
|
<Box
|
|
sx={{
|
|
position: 'absolute',
|
|
width: '100%',
|
|
bottom: 0,
|
|
|
|
flexGrow: 1,
|
|
|
|
p: 1,
|
|
borderTopLeftRadius: '12px',
|
|
borderTopRightRadius: '12px',
|
|
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<Tabs
|
|
size='lg'
|
|
aria-label={t('bottomNav')}
|
|
value={index}
|
|
onChange={(event, value) => setIndex(value)}
|
|
sx={theme => ({
|
|
p: 1,
|
|
borderRadius: 16,
|
|
maxWidth: 500,
|
|
// mx: 'auto',
|
|
boxShadow: theme.shadow.sm,
|
|
'--joy-shadowChannel': theme.vars.palette[colors[index]].darkChannel,
|
|
[`& .${tabClasses.root}`]: {
|
|
py: 1,
|
|
flex: 1,
|
|
transition: '0.3s',
|
|
fontWeight: 'md',
|
|
fontSize: 'md',
|
|
[`&:not(.${tabClasses.selected}):not(:hover)`]: {
|
|
opacity: 0.7,
|
|
},
|
|
},
|
|
})}
|
|
>
|
|
<TabList
|
|
variant='plain'
|
|
size='sm'
|
|
disableUnderline
|
|
sx={{ borderRadius: 'lg', p: 0 }}
|
|
>
|
|
<Tab
|
|
disableIndicator
|
|
orientation='vertical'
|
|
{...(index === 0 && { color: colors[0] })}
|
|
>
|
|
<ListItemDecorator>
|
|
<HomeRoundedIcon />
|
|
</ListItemDecorator>
|
|
Home
|
|
</Tab>
|
|
<Tab
|
|
disableIndicator
|
|
orientation='vertical'
|
|
{...(index === 1 && { color: colors[1] })}
|
|
>
|
|
<ListItemDecorator>
|
|
<FavoriteBorder />
|
|
</ListItemDecorator>
|
|
Likes
|
|
</Tab>
|
|
<Tab
|
|
disableIndicator
|
|
orientation='vertical'
|
|
{...(index === 2 && { color: colors[2] })}
|
|
>
|
|
<ListItemDecorator>
|
|
<Search />
|
|
</ListItemDecorator>
|
|
Search
|
|
</Tab>
|
|
<Tab
|
|
disableIndicator
|
|
orientation='vertical'
|
|
{...(index === 3 && { color: colors[3] })}
|
|
>
|
|
<ListItemDecorator>
|
|
<Person />
|
|
</ListItemDecorator>
|
|
{t('profile')}
|
|
</Tab>
|
|
</TabList>
|
|
</Tabs>
|
|
</Box>
|
|
)
|
|
}
|