81 lines
3.2 KiB
JavaScript
81 lines
3.2 KiB
JavaScript
|
import PropTypes from 'prop-types'
|
|||
|
|
import {red, green, grey} from '@material-ui/core/colors'
|
|||
|
|
import {AutoRotatingCarousel, Slide} from 'material-auto-rotating-carousel'
|
|||
|
|
|
|||
|
|
export default function Carousel({handleOpen, setHandleOpen, isMobile}) {
|
|||
|
|
return (
|
|||
|
|
<AutoRotatingCarousel
|
|||
|
|
label='An nou ay'
|
|||
|
|
open={handleOpen}
|
|||
|
|
autoplay={false}
|
|||
|
|
mobile={isMobile}
|
|||
|
|
style={{position: 'absolute'}}
|
|||
|
|
onClose={() => setHandleOpen(false)}
|
|||
|
|
onStart={() => setHandleOpen(false)}
|
|||
|
|
>
|
|||
|
|
<Slide
|
|||
|
|
media={<img src='/logo.png' width={300} height={170} />}
|
|||
|
|
mediaBackgroundStyle={{backgroundColor: grey[900]}}
|
|||
|
|
style={{backgroundColor: grey[800]}}
|
|||
|
|
title='Bienvenue'
|
|||
|
|
subtitle='Voici un rapide tour d’horizon de ce que nous proposons'
|
|||
|
|
/>
|
|||
|
|
<Slide
|
|||
|
|
media={<img src='/awtis.JPG' />}
|
|||
|
|
mediaBackgroundStyle={{backgroundColor: red[400]}}
|
|||
|
|
style={{backgroundColor: red[600]}}
|
|||
|
|
title='La page "Awtis"'
|
|||
|
|
subtitle='Liste les différents artistes par ordre alphabétique.'
|
|||
|
|
/>
|
|||
|
|
<Slide
|
|||
|
|
media={<img src='/admiral.JPG' />}
|
|||
|
|
mediaBackgroundStyle={{backgroundColor: green[400]}}
|
|||
|
|
style={{backgroundColor: green[600]}}
|
|||
|
|
title='Biographie'
|
|||
|
|
subtitle='Disponible en cliquant sur l’artiste. Vous pourrez également consulter ses "teks" via l’icône à côté de son nom.'
|
|||
|
|
/>
|
|||
|
|
<Slide
|
|||
|
|
media={<img src='/admiral-teks.JPG' />}
|
|||
|
|
mediaBackgroundStyle={{backgroundColor: grey[900]}}
|
|||
|
|
style={{backgroundColor: grey[800]}}
|
|||
|
|
title='Liste des "tèks"'
|
|||
|
|
subtitle='Disponible en cliquant sur la flèche en dessous de la photo.'
|
|||
|
|
/>
|
|||
|
|
<Slide
|
|||
|
|
media={<img src='/teks.JPG' />}
|
|||
|
|
mediaBackgroundStyle={{backgroundColor: red[400]}}
|
|||
|
|
style={{backgroundColor: red[600]}}
|
|||
|
|
title='La page "Tèks"'
|
|||
|
|
subtitle='Regroupe les transcriptions et les traductions disponibles. Si aucun "tèks" n’est sélectionné, la page affiche les 6 derniers publiés sur le site.'
|
|||
|
|
/>
|
|||
|
|
<Slide
|
|||
|
|
media={<img src='/teks-cheche.JPG' />}
|
|||
|
|
mediaBackgroundStyle={{backgroundColor: green[400]}}
|
|||
|
|
style={{backgroundColor: green[600]}}
|
|||
|
|
title='Liste des "Tèks"'
|
|||
|
|
subtitle='La barre latérale gauche permet de sélectionner un "tèks" ou d’effectuer une recherche.'
|
|||
|
|
/>
|
|||
|
|
<Slide
|
|||
|
|
media={<img src='/stream.JPG' />}
|
|||
|
|
mediaBackgroundStyle={{backgroundColor: grey[900]}}
|
|||
|
|
style={{backgroundColor: grey[800]}}
|
|||
|
|
title='Streaming'
|
|||
|
|
subtitle='Vous avez la possiblité de visionner le clip, écouter et/ou télécharger la musique via les plateformes de streaming et de téléchargement.'
|
|||
|
|
/>
|
|||
|
|
<Slide
|
|||
|
|
media={<img src='/logo.png' width={300} height={170} />}
|
|||
|
|
mediaBackgroundStyle={{backgroundColor: grey[900]}}
|
|||
|
|
style={{backgroundColor: grey[800]}}
|
|||
|
|
title='Nous contacter'
|
|||
|
|
subtitle='Pour toute correction ou suggestion, vous pouvez nous contacter à cette adresse : kontak@o-k-i.net'
|
|||
|
|
/>
|
|||
|
|
</AutoRotatingCarousel>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Carousel.propTypes = {
|
|||
|
|
handleOpen: PropTypes.bool.isRequired, // eslint-disable-line react/boolean-prop-naming
|
|||
|
|
setHandleOpen: PropTypes.func.isRequired,
|
|||
|
|
isMobile: PropTypes.bool.isRequired
|
|||
|
|
}
|