Add carousel to index

2020-12-17 09:08:18 +01:00
parent 68ea5a7a36
commit e9d9c4619f
10 changed files with 189 additions and 8 deletions
@@ -0,0 +1,80 @@
+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
+}