<script setup lang="js">
import { ref } from 'vue'
import { CustomCard } from '@/components/CustomCard.js'

const customCard = ref(new CustomCard())
</script>
<template>
  <div class="card">
    <div class="avatar">
<!--      <img :src="require(customCard.avatar)" alt="avatar" />-->
<!--      <img src="./images/avatar.jpg" alt="avatar" />-->
      <img :src="customCard.avatar" alt="avatar">
    </div>

    <div class="name">
      <h2>{{ customCard.name }}</h2>
    </div>

    <div class="content">
      <p>{{ customCard.content }}</p>
    </div>
  </div>
</template>

<style scoped>
.card {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 200px;

  .avatar {
    width: 50%;
    img {
      width: 80%;
      height: 80%;
    }
  }

  .name {
    width: 50%;
  }

  .content {
    width: 100%;
  }
}
</style>
