ui: drawing design

components/ImagePlaceholder.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const props = defineProps({
+  gradient: {
+    type: String,
+    default: '90deg, #FFC0CB 0%, #FFC0CB 100%'
+  },
+  aspect: {
+    type: String,
+    default: '16/9'
+  }
+})
+
+const elem = ref<HTMLElement>()
+const size = computed(() => {
+  return {
+    width: elem.value?.getBoundingClientRect().width.toFixed(0),
+    height: elem.value?.getBoundingClientRect().height.toFixed(0)
+  }
+})
+</script>
+
+<template>
+  <div ref="elem" class="gradient-background flex justify-center items-center"
+       :style="`aspect-ratio: ${aspect};`">
+    <ClientOnly>
+      <h1 class="text-white/80 drop-shadow-2xl text-sm font-bold">
+        {{ size.width }} x {{ size.height }}
+      </h1>
+    </ClientOnly>
+  </div>
+</template>
+
+<style scoped>
+.gradient-background {
+  @apply rounded-lg;
+  @apply bg-gradient-to-r from-indigo-800 to-purple-600;
+}
+</style>