Add content creation

src/views/contents/ContentCard.vue

@@ -0,0 +1,42 @@
+<template>
+
+
+  <div class=" shadow-lg rounded-lg max-w-sm">
+
+    <div class="h-48 object-cover bg-purple">
+
+      <v-img :src="props.content.url"
+             v-if="!isHttpUrl">
+      </v-img>
+
+      <iframe v-if="isHttpUrl"
+              :src="props.content.banner"
+              title="YouTube video player"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              referrerpolicy="strict-origin-when-cross-origin"
+              allowfullscreen>
+      </iframe>
+
+    </div>
+
+    <div class="text-lg font-bold">{{ props.content.title }}</div>
+    <div class="text-sm text-gray-500">{{ props.content.title }}</div>
+
+  </div>
+
+</template>
+
+<script setup>
+
+import {defineProps, computed} from 'vue';
+
+const isHttpUrl = computed(() => props.content.url.startsWith('http'))
+
+const props = defineProps({
+  content: {
+    type: Object,
+    required: true,
+  }
+});
+
+</script>