diff --git a/components/teks/teks.js b/components/teks/teks.js index b1f1250..f6d8a97 100644 --- a/components/teks/teks.js +++ b/components/teks/teks.js @@ -13,17 +13,14 @@ import ExplicitIcon from '@mui/icons-material/Explicit' import {formatJsonString, getAlias} from '../../lib/utils/format' -import VweKomante from '../komante/vwe-komante' - import EntegreMizik from './entegre-mizik' import OkiMizik from './oki-mizik' -import Pataje from './pataje' import DiferansDialog from './diferans-dialog' const PREFIX = 'teks' const classes = { - root: `${PREFIX}-root`, + container: `${PREFIX}-container`, tooltip: `${PREFIX}-tooltip`, text: `${PREFIX}-text`, gridText: `${PREFIX}-gridText`, @@ -33,13 +30,10 @@ const classes = { pataje: `${PREFIX}-pataje` } -const Root = styled('div')(( - { - theme - } -) => ({ - [`& .${classes.text}`]: { - marginBottom: '0.5em' +const Root = styled('div')(props => ({ + [`&.${classes.container}`]: { + marginTop: '3em', + marginLeft: props.isMobile ? '' : '240px', }, [`& .${classes.gridText}`]: { @@ -49,19 +43,9 @@ const Root = styled('div')(( padding: '1em' }, - [`& .${classes.grid}`]: { - marginTop: '1em' - }, - [`& .${classes.pataje}`]: { - position: 'fixed', - top: '59px', - left: '110px', - zIndex: 2, - [theme.breakpoints.up('sm')]: { - top: '62px', - left: '340px' - } + position: 'absolute', + zIndex: 9999 } })) @@ -113,23 +97,25 @@ const alignTeks = (langArray, isMobile) => { } } -const Alert = forwardRef(function Alert(props, ref) { - return -}) - const ExplicitTooltip = Tooltip -export default function Teks({parole, paroleId, commentaires, open, success, error, setSuccess, setError, handleClose}) { - const isMobile = useMediaQuery('(max-width:800px)') +export default function Teks({parole}) { + const isMobile = useMediaQuery('(max-width:600px)') const langArray = langToArray(parole) const aliases = getAlias(parole.artistes, parole.prioriteArtistes) + useEffect(() => { + const isBrowser = () => typeof window !== 'undefined' + if (!isBrowser()) { + return + } + + window.scrollTo({top: 0, behavior: 'smooth'}) + }, []) + return ( - - - - - + + {aliases} @@ -140,7 +126,6 @@ export default function Teks({parole, paroleId, commentaires, open, success, err - 0 ? 6 : null}> - - + 0 ? 6 : null}> + + Transcription {formatJsonString(parole.transcription)} - + {langArray.map(({title, flag, lang}) => ( - - - + + + {flag === 'fr' && ( 🇫🇷 @@ -217,47 +202,14 @@ export default function Teks({parole, paroleId, commentaires, open, success, err {formatJsonString(lang)} - + ))} - {success && ( - - - {success} - - - )} - {error && ( - - - Une erreur s’est produite : {error.message} - - - )} - - {commentaires && ( - - )} - ) } Teks.propTypes = { parole: PropTypes.object.isRequired, - paroleId: PropTypes.number.isRequired, - commentaires: PropTypes.array, - open: PropTypes.bool.isRequired, - success: PropTypes.string, - error: PropTypes.string, - setSuccess: PropTypes.func.isRequired, - setError: PropTypes.func.isRequired, - handleClose: PropTypes.func.isRequired -} - -Teks.defaultProps = { - commentaires: null, - success: '', - error: '' }