feat: add image and video chip

2024-11-28 15:40:05 +05:30
parent 820fce8bfc
commit d9ef6df4de
3 changed files with 69 additions and 12 deletions
@@ -0,0 +1,16 @@
+<script setup>
+defineProps({
+  attachment: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="size-[72px] overflow-hidden contain-content rounded-xl cursor-pointer"
+  >
+    <img class="w-full h-full object-cover" :src="attachment.dataUrl" />
+  </div>
+</template>
@@ -0,0 +1,34 @@
+<script setup>
+import Icon from 'next/icon/Icon.vue';
+defineProps({
+  attachment: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="size-[72px] overflow-hidden contain-content rounded-xl cursor-pointer relative group"
+  >
+    <video
+      :src="attachment.dataUrl"
+      class="w-full h-full object-cover"
+      muted
+      playsInline
+    />
+    <div
+      class="absolute w-full h-full inset-0 p-1 flex items-center justify-center"
+    >
+      <div
+        class="size-7 bg-n-alpha-2 backdrop-blur-sm rounded-full overflow-hidden shadow-[0_5px_15px_rgba(0,0,0,0.4)]"
+      >
+        <Icon
+          icon="i-teenyicons-play-small-solid"
+          class="size-7 text-n-slate-12/60 backdrop-blur"
+        />
+      </div>
+    </div>
+  </div>
+</template>