foeveryng_Product

<!-- Nunito Font -->
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800;900&display=swap"
      rel="stylesheet"
    />
    <!-- Fontawesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
      integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
      crossorigin="anonymous"
    />

<!---------------------------------------------------------------------------------------------->

<template>
  <div class="product-wrapper">
    <v-img
      contain
      height="150"
      src="https://pngimg.com/uploads/lipstick/lipstick_PNG23968.png"
    ></v-img>
    <p style="font-weight: 700" class="my-3">
      The Red Lipstick that everyone wants to own
    </p>
    <div class="d-flex row align-center px-1">
      <v-rating
        background-color="warning lighten-2"
        color="warning"
        hover
        length="5"
        size="20"
        value="3"
      ></v-rating>
      <span style="color: #a8a8a8" class="pl-2">(12)</span>
    </div>
    <p style="font-weight: 800" class="mt-3 mb-2">Rs. 1,350</p>
    <div class="d-flex row px-3 justify-space-between align-center">
      <span
        style="
          text-decoration: line-through;
          font-weight: 300;
          font-size: 0.9em;
          color: darkslategray;
        "
        >Rs. 1,500</span
      >
      <span style="color: #ed7a9b">10% off</span>
    </div>
    <div class="d-flex row justify-space-between align-center pa-3">
      <div
        style="
          background: #e0e0e0;
          color: #4682b4;
          font-weight: 600;
          padding: 4px 20px;
          border-radius: 20px;
          cursor: pointer;
        "
      >
        Add To Cart
      </div>
      <div v-on:click="toggleIcon" style="" class="heart-btn">
        <i
          class="far fa-heart heart"
          v-bind:class="{ heart_active: isActive, fas: isActive }"
        ></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Product",
  data() {
    return {
      isActive: false,
    };
  },
  methods: {
    toggleIcon: function () {
      this.isActive = !this.isActive;
    },
  },
};
</script>

<style scoped lang="scss">
.product-wrapper {
  font-family: "Nunito", sans-serif;
  box-shadow: 0 0 20px #aaaaaa70;
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.heart-btn {
  position: relative;
  background: lighten(#e0e0e0, 5%);
  border-radius: 50%;
  height: 30px;
  width: 30px;
  cursor: pointer;
}
.heart {
  transition: 0.3s;
  color: #e63e62;
  position: absolute;
  font-size: 1.1em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%);
}
.heart_active {
  filter: drop-shadow(3px 3px 6px gray);
  font-size: 1em !important;
  transform: translate(-50%, -42%) !important;
}
</style>