frontend/src/components/DestinationInfoCard.vue

<template>
  <v-img 
    src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" 
    height="100%" 
    cover
    ></v-img>

  <v-card 
  class="stick-bottom card-height" 
  width="100%" 
  style="padding-top: 15px; font-weight:bold;"
  :title="destination.title" 
  :subtitle="destination.subTitle"
  >

    <v-list lines="one">
      <v-list-item>
        <template v-slot:prepend>
          <v-avatar>
            <img :src="detial[0].icon" 
            class="iconCheck"
            />
          </v-avatar>
        </template>
        <v-list-item-title class="textCheck">{{detial[0].title}}</v-list-item-title>
        <v-list-item-subtitle >{{detial[0].subtitle}}</v-list-item-subtitle>
      </v-list-item>

      <v-list-item>
        <template v-slot:prepend>
          <v-avatar>
            <img :src="detial[1].icon" 
            class="icon"
            />
          </v-avatar>
        </template>
        <v-list-item-title class="text-decoration-underline">{{detial[1].title}}</v-list-item-title>
        <v-list-item-subtitle>{{detial[1].subtitle}}</v-list-item-subtitle>
      </v-list-item>

      <v-list-item>
        <template v-slot:prepend>
          <v-avatar>
            <img :src="detial[2].icon" 
            class="icon"
            />
          </v-avatar>
        </template>
        <v-list-item-title>{{detial[2].title}}</v-list-item-title>
        <v-list-item-subtitle>{{detial[2].subtitle}}</v-list-item-subtitle>
      </v-list-item>


    </v-list>

    <v-card-actions class="stick-bottom btnlist-height justify-sa">
      <v-btn rounded="xl" variant="tonal" width="45vw" height="44px">
        เพิ่มลงในสถานที่โปรด</v-btn>
      <v-btn rounded="xl" variant="flat" class="text-white" width="45vw" height="44px" color="#f16322">
        ดูเส้นทาง</v-btn>
    </v-card-actions>

    <v-btn variant="tonal" icon="mdi-close" style="position: absolute; top: 15px; right: 15px;" />


  </v-card>
</template>
  
<script setup>
import findLocation from '../../icons/Material/find-location.svg';
import clock from '../../icons/Material/clock.svg';
import check from '../../icons/Material/check-round.svg';
const destination = {
  title: "อนุสาวรีย์ชัยสมรภูมิ",
  subTitle: "ราชเทวี , กรุงเทพมหานคร"
}
const detial = [
  {
    color: '',
    icon: check,
    subtitle: 'เรียนรู้เพิ่มเติม',
    title: 'Unrestricted Wheelchair access',
  },
  {
    color: '',
    icon: findLocation,
    subtitle: '',
    title: '13.76493, 100.53828',
  },
  {
    color: '',
    icon: clock,
    subtitle: '',
    title: 'Mo-Su 11:30-22:00',
  },
]
</script>

<style>
.stick-bottom {
  position: fixed;
  bottom: 0;
}

.card-height {
  height: 75%;
}

.btnlist-height {
  height: 25%;
  width: 100%;
}

.v-card-actions.justify-sa {
  display: flex;
  justify-content: space-around;
}

.btn-width {
  width: 35vw;
}

.text-white {
  color: white;
}

.icon, .iconCheck {
  width: 30px;
  height: 30px;
}
.iconCheck, .textCheck {
  filter: invert(55%) sepia(39%) saturate(601%) hue-rotate(73deg) brightness(97%) contrast(98%);
}

v-list:disabled {
  color: purple;
}
</style>