Post.vue 720 B

123456789101112131415161718192021222324252627282930
  1. <template>
  2. <div class="flex flex-col gap-2 text-foreground bg-background-100 rounded-lg overflow-hidden show">
  3. <img
  4. :src="props.image"
  5. :alt="props.title"
  6. class="h-[170px] object-cover object-center"
  7. >
  8. <span class="px-2 leading-none text-xl font-semibold">
  9. {{ props.title }}
  10. </span>
  11. <span class="px-2 font-medium">
  12. {{ props.description }}
  13. </span>
  14. <span class="w-full text-right -mt-2 px-2 pb-2 text-sm font-medium opacity-50">
  15. {{ props.date }}
  16. </span>
  17. </div>
  18. </template>
  19. <script setup lang="ts">
  20. const props = withDefaults(
  21. defineProps<{
  22. image?: string
  23. title?: string
  24. description?: string
  25. date?: string
  26. }>(), {
  27. },
  28. )
  29. </script>