Accueil.vue

<script setup>
import Header from '../components/Header.vue'
import FilmRow from '../components/FilmRow.vue';
</script>

<template>
  <Header>
  </Header>
  <h1>Recherchez votre film</h1>
  <form>
    <input type="text" placeholder="Exemple : Cars">
    <button>Rechercher</button>
  </form>
  
</template>

<script>
import Header from '../components/Header.vue'
import FilmRow from '../components/FilmRow.vue';
export default {
  components: {
    Header,
    FilmRow
  },
  data() {
    return {
      films: [
        { id: 1, title: 'Film 1', poster: 'lien_vers_affiche_1' },
        { id: 2, title: 'Film 2', poster: 'lien_vers_affiche_2' },
      ],
      filmsInRows: []
    };
  },
  mounted() {
    this.filmsInRows = this.chunkArray(this.films, 4);
  },
  methods: {
    chunkArray(array, size) {
      const chunkedArr = [];
      let index = 0;
      while (index < array.length) {
        chunkedArr.push(array.slice(index, size + index));
        index += size;
      }
      return chunkedArr;
    }
  }
};

</script>

<style scoped>
input {
    display: block;
    padding: 10px;
    font-size: 20px;
    border: none;
    outline: none;
    background-color: var(--color-background);
    color: var(--color-text);
    flex-grow:2;
    border-radius: 5px;
  }
  
  
  form {
    margin: 10px auto;
    width: 45%;
    display:flex;
    flex-direction:row;
    border:1px solid #e6007e;
    border-radius: 5px;
  }
  
  
  
  /* remove the input focus blue box, it will be in the wrong place. */
  input:focus {
    outline: none;
  }
  
  /* Add the focus effect to the form so it contains the button */
  form:focus-within { 
    outline: none; 
  }

button {
  /* Just a little styling to make it pretty */
  border:1px solid #e6007e;
  background:#e6007e;
  /* color: var(--color-text); */
  border-radius: 0 4px 4px 0;
}
</style>