<template>
  <div v-if="props.item" class="shadow rounded-md p-4 bg-white">
    <div v-if="props.item?.titleAndContents?.length">
      <div v-for="(item, index) in props.item?.titleAndContents" :key="index"
        class="border-0 border-b last:border-b-0 border-solid border-gray-100 py-2">
        <div class="text-gray-900 text-lg mb-1">
          <i class="inline-block align-middle w-0 h-0 border-4 border-solid border-blue-600 transform-gpu rotate-45 mr-2"></i>
          <span class="inline-block align-middle">{{ item.title }}</span>
        </div>
        <div class="text-gray-500">{{ item.content }}</div>

      </div>
    </div>
  </div>
</template>
<script setup>
import { defineProps } from "vue";

const props = defineProps({
  item: {
    type: Object
  }
})
</script>
<style lang="scss" scoped>
</style>
