source: ReserveNGo-frontend/src/components/Project/Locale_details.vue

<script>


import { restaurantStore } from '@/PiniaStores/restaurantStore.js'

export default {
  data(){
    return {
      restaurant:{
        name: '',
        address: ''
      },
      restaurantStore: restaurantStore()
    }
  }
}

</script>

<template>
    <div id="container" class="px-5 py-2">
      <p>Local details...</p>
      <p>Working hours: {{restaurantStore.workingHours}}</p>
      <ul v-for="service in restaurantStore.availableServices" :key="service">
        <li>{{service}}</li>
      </ul>
      <p>Average rating...</p>
      <router-link to="/more_details">
      <button class="btn btn-dark">More details</button>
      </router-link>
      <button class="btn btn-dark ms-2">Make reservation</button>
    </div>
</template>

<style scoped>

#container {

  font-size: 20px;
  margin: 30px auto;
  border: transparent;
  /*border-radius: 10px;*/
  border-left: 3px solid #8377D1;
  background-color: #FBFFF1;


}

</style>