<template>
  <div class="content_body">
    <div
      class="game"
      v-for="(item, index) in list"
      :key="index"
      @click="openDetails"
    >
      <h-img :src="item.icon" />
      <!-- {{ item }} -->
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, type PropType } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
onMounted(async () => {});
const props = defineProps({
  list: {
    type: Array as PropType<Array<CustomObject>>,
    default: [],
    required: true,
  },
});
function openDetails() {
  router.push("/gameDetails");
}
</script>
<style lang="scss" scoped>
.content_body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 0.2rem;
  .game {
    // border-radius: $border-radius;
    overflow: hidden;
  }
}
</style>
