<template>
  <v-app id="inspire">
    <v-app-bar app class="secondary">
      <v-toolbar-title class="nav-bar--title">STRAPI APP</v-toolbar-title>
      <v-spacer></v-spacer>
      <div>
        <v-text-field
          hide-details
          solo
          dense
          placeholder="Rechercher"
          append-icon="mdi-magnify"
          v-model="search"
        ></v-text-field>
      </div>
    </v-app-bar>

    <v-main class="blue lighten-2">
        <v-container>
          <ErrorAlert>
            <ProductList :search="search"></ProductList>
          </ErrorAlert>
        </v-container>
    </v-main>
  </v-app>
</template>

<script>
import ErrorAlert from "@/components/utils/ErrorAlert";
import ProductList from "@/components/ProductList";

export default {
  name: "App",
  components: {
    ErrorAlert,
    ProductList,
  },
  data: () => ({
    search: ""
  })
};
</script>

<style scoped>
  .nav-bar--title {
    color: white;
  }
</style>
