@opengis/cms 0.0.21 → 0.0.22

package/src/components/media/FileUploadProgress.vue

@@ -0,0 +1,29 @@
+<template>
+  <div v-if="uploads?.length" class="fixed bottom-4 right-4 w-96 bg-white shadow-lg rounded-lg p-4 z-50">
+    <div class="font-bold mb-2">{{ $t("media.uploadingFiles") }}</div>
+    <div v-for="upload in uploads" :key="upload.id" class="mb-3">
+      <div class="flex justify-between items-center mb-1">
+        <span class="truncate w-2/3">{{ upload?.name }}</span>
+        <span v-if="upload.status === 'success'" class="text-green-600">✔</span>
+        <span v-else-if="upload.status === 'error'" class="text-red-600">✖</span>
+        <span v-else class="text-blue-600">{{ upload?.progress }}%</span>
+      </div>
+      <div class="w-full bg-gray-200 rounded h-2">
+        <div
+          class="bg-blue-500 h-2 rounded"
+          :style="{ width: upload?.progress + '%' }"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+const props = defineProps({
+  uploads: {
+    type: Array,
+    required: true,
+  },
+});
+</script>

package/src/components/media/MediaBreadcrumb.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="flex items-center space-x-1">
+    <button 
+      class="flex gap-x-1 items-center px-2 py-1 rounded text-sm font-medium transition-all duration-200 text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20"
+      @click="$emit('navigate', [])"  
+    >
+      <IconHome class="w-3 h-3" />
+      {{ $t("media.mediaLibrary") }}
+    </button>
+    <ChevronRight 
+      v-if="currentPath.length > 0" 
+      class="w-3 h-3 text-slate-400 dark:text-slate-500" 
+    />
+    <button
+      v-for="(segment, index) in currentPath"
+      :key="index"
+      class="flex gap-x-1 items-center px-2 py-1 rounded text-sm font-medium transition-all duration-200 text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-900/20"
+      @click="$emit('navigate', currentPath.slice(0, index + 1))"
+    >
+      <Folder class="w-3 h-3" />
+      {{ segment }}
+      <ChevronRight
+        v-if="index < currentPath.length - 1"
+        class="w-3 h-3 text-slate-400 dark:text-slate-500"
+      />
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { ChevronRight, Folder } from "lucide-vue-next";
+import IconHome from "../icons/icon-home.vue";
+
+defineProps({
+  currentPath: {
+    type: Array,
+    required: true,
+  },
+});
+
+defineEmits(["navigate"]);
+</script>

package/src/components/media/MediaCreateFolder.vue

@@ -0,0 +1,59 @@
+<template>
+  <VsModal  teleport="#modal" :visible="modelValue" :title="$t('media.createFolder')" @close="$emit('update:modelValue', false)">
+    <VsForm :schema="scheme" v-model="formValues" v-model:form="form" />
+    <template #footer>
+      <div class="flex justify-end p-[20px] gap-[10px] border-t w-full">
+        <button
+          @click="$emit('update:modelValue', false)"
+          class="inline-flex items-center px-3 py-2 text-sm text-black duration-300 border border-gray-200 rounded-lg gap-x-2 whitespace-nowrap hover:bg-gray-100"
+        >
+          {{ $t("common.actions.cancel") }}
+        </button>
+        <button
+          @click="handleCreate"
+          class="py-2 px-3 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-white bg-blue-500 rounded-lg !border-gray-200 hover:bg-blue-700 duration-300"
+        >
+          {{ $t("common.actions.create") }}
+        </button>
+      </div>
+    </template>
+  </VsModal>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import VsForm from "@opengis/form";
+import { VsModal } from "@opengis/core";
+import { notify } from '@opengis/core';
+const { t } = useI18n();
+
+const modelValue = defineModel();
+
+const emit = defineEmits(["update:modelValue", "create"]);
+
+const formValues = ref({});
+const form = ref({});
+
+const scheme = {
+  name: {
+    name: "name",
+    label: t("media.newFolder"),
+    type: "Text",
+  },
+};
+
+const handleCreate = async () => {
+  let result = await form.value.validate();
+  if (result) {
+    notify({
+      type: "warning",
+      title: t("common.actions.warning"),
+      message: t("media.createFolderFailed"),
+    });
+    return;
+  }
+  emit("create", { ...formValues.value });
+  formValues.value = {};
+};
+</script>

package/src/components/media/MediaFileInfo.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="h-[fit-content] w-80 flex flex-col flex-shrink-0 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg shadow-lg">
+    <div
+        v-if="!file"
+        class="flex flex-col items-center justify-center h-64 text-muted-foreground"
+      >
+        <p>{{ $t("media.selectFile") }}</p>
+      </div>
+      <template v-else>
+        <div class="p-4 border-b border-slate-200 dark:border-slate-700">
+          <h3 class="font-semibold text-slate-800 dark:text-slate-100">{{ $t("media.fileDetails") }}</h3>
+        </div>
+        <div class="p-4 space-y-4">
+          <div class="aspect-video flex items-center justify-center bg-slate-100 dark:bg-slate-700 rounded-lg overflow-hidden relative">
+            <img 
+              v-if="file?.filetype === 'image' && file?.filepath"
+              :src="file?.preview"
+              :alt="file?.alt || file?.filename"
+              class="w-full h-full object-cover"
+            >
+            <FileText v-else class="w-full h-4/5 object-cover" />
+            <div class="absolute top-3 right-3">
+              <TypeTag :type="file?.filetype" />
+            </div>
+          </div>
+          <div class="space-y-3">
+            <div>
+              <label class="peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-sm font-medium text-slate-700 dark:text-slate-300">{{ $t("media.name") }}</label>
+              <p class="text-slate-800 dark:text-slate-100 break-all">{{ file?.filename }}</p>
+            </div>
+            <div>
+              <label class="peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-sm font-medium text-slate-700 dark:text-slate-300">{{ $t("media.size") }}</label>
+              <p class="text-slate-800 dark:text-slate-100">{{ formatFileSize(file?.filesize) }}</p>
+            </div>
+            <div v-if="file?.dimensions">
+              <label class="peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-sm font-medium text-slate-700 dark:text-slate-300">{{ $t("media.dimensions") }}</label>
+              <p class="text-slate-800 dark:text-slate-100">1920x1080</p>
+            </div>
+            <div>
+              <label class="peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-sm font-medium text-slate-700 dark:text-slate-300">{{ $t("media.uploadDate") }}</label>
+              <p class="text-slate-800 dark:text-slate-100 flex items-center">
+                <Calendar class="w-4 h-4 mr-2" />
+                {{ file?.created_at ? formatDate(file?.created_at) : "--" }}
+              </p>
+            </div>
+            <div v-if="file?.author">
+              <label class="peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-sm font-medium text-slate-700 dark:text-slate-300">{{ $t("media.author") }}</label>
+              <p class="text-slate-800 dark:text-slate-100">{{ file?.author }}</p>
+            </div>
+            <div v-if="file?.description">
+              <label class="peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-sm font-medium text-slate-700 dark:text-slate-300">{{ $t("media.description") }}</label>
+              <p class="text-slate-800 dark:text-slate-100">{{ file?.description }}</p>
+            </div>
+            <div v-if="file?.tags">
+              <label class="peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-sm font-medium text-slate-700 dark:text-slate-300">{{ $t("media.tags") }}</label>
+              <div class="flex flex-wrap gap-1 mt-1">
+                <div class="inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">
+                  banner
+                </div>
+                <div class="inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">
+                  hero
+                </div>
+                <div class="inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">
+                  homepage
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="space-y-2 pt-4 border-t border-slate-200 dark:border-slate-700">
+            <a :href="file?.filepath" download class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 shadow h-9 px-4 py-2 w-full bg-blue-600 hover:bg-blue-700 text-white">
+              <Download class="w-4 h-4 mr-2" />
+              {{ $t("media.download") }}
+            </a>
+            <button 
+              class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 border shadow-sm hover:text-accent-foreground h-9 px-4 py-2 w-full bg-slate-600 hover:bg-slate-700 text-white" 
+              @click="copyFilePath"
+            >
+              <Copy class="w-4 h-4 mr-2" />
+              {{ $t("media.copyPath") }}
+            </button>
+            <button 
+              class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 border shadow-sm hover:text-accent-foreground h-9 px-4 py-2 w-full bg-red-500 hover:bg-red-600 text-white" 
+              @click="openConfirm"
+            >
+              <Trash2 class="w-4 h-4 mr-2" />
+              {{ $t("media.delete") }}
+            </button>
+           
+          </div>
+        </div>
+      </template>
+  </div>
+</template>
+
+<script setup>
+import IconMore from "../icons/icon-more.vue";
+import { Download, FileText, Share2, Pencil, Calendar, Trash2, Copy } from "lucide-vue-next";
+import { formatFileSize, formatDate } from "../../props/media";
+import TypeTag from "./TypeTag.vue";
+import { confirm, notify } from '@opengis/core';
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+const emit = defineEmits(["delete-file"]);
+
+
+const props = defineProps({
+  file: {
+    type: Object,
+    default: null,
+  },
+});
+
+const openConfirm = () => {
+  confirm({
+    title: t("builder.deleteTitle"),
+    message: t("builder.deleteObject"),
+    type: 'error',
+    onConfirm: () => {
+      handleDeleteFile();
+    },
+  })
+};
+
+const handleDeleteFile = () => {
+  emit("delete-file", props.file);
+};
+
+const copyFilePath = async () => {
+  if (props.file?.filepath) {
+    try {
+      await navigator.clipboard.writeText(props.file.filepath);
+      notify({
+        type: "success",
+        title: t("common.actions.success"),
+        message: t("toast.copied"),
+      });
+    } catch (err) {
+      console.error('Failed to copy file path:', err);
+      notify({
+        type: "error",
+        title: t("common.actions.error"),
+        message: t("media.copyPathFailed"),
+      });
+    }
+  }
+};
+</script>

package/src/components/media/MediaGrid.vue

@@ -0,0 +1,148 @@
+<template>
+  <div
+    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 max-h-[calc(100%-130px)] overflow-y-auto px-2 pt-2 pb-5"
+  >
+    <div
+      v-if="files?.length === 0"
+      class="flex flex-col items-center justify-center h-64 text-muted-foreground col-span-full"
+    >
+      <File class="w-12 h-12 mb-2" />
+      <p>{{ $t('noFilesInFolder') }}</p>
+    </div>
+    <template v-for="file in sortedFiles" :key="file?.url">
+      <div
+        v-if="file?.type === 'dir'"
+        class="p-6 text-center rounded-xl h-[fit-content] relative text-card-foreground shadow-lg border-0 bg-white dark:bg-slate-800 backdrop-blur-sm hover:shadow-xl transition-all duration-200 transform hover:scale-105 cursor-pointer"
+        @click="$emit('file-click', file)"
+      >
+        <div 
+          v-if="isDeleteButton"
+          @click.stop="selectedFolder = file; openConfirm"
+          class="absolute top-4 right-4 p-1 border border-gray-300 dark:border-slate-700 rounded-lg cursor-pointer hover:bg-gray-200 dark:hover:bg-slate-700 group"
+        >
+          <Trash2 class="w-4 h-4 text-gray-500 group-hover:text-red-500" />
+        </div>
+        <Folder class="w-16 h-16 mx-auto mb-4 text-blue-600" />
+        <h3 class="truncate font-medium text-slate-800 dark:text-slate-100 mb-2">{{ file?.name}}</h3>
+        <p class="text-sm text-slate-500 dark:text-slate-400">{{  file?.count }} {{ $t('media.files') }}</p>
+      </div>
+      <div 
+        v-else-if="file?.type === 'file'" 
+        class="h-[fit-content] rounded-xl text-card-foreground shadow-lg border-0 bg-white dark:bg-slate-800 backdrop-blur-sm hover:shadow-xl transition-all duration-200 transform hover:scale-105 group cursor-pointer"
+        :class="{
+          'bg-accent text-accent-foreground ring-2 ring-primary':
+            selectedFile?.url === file?.url || (selectedFiles && selectedFiles.some(f => f.id === file.id)),
+        }"
+        @click="$emit('file-click', file)"
+      >
+      
+        <div class="p-0">
+          <div class="aspect-video bg-slate-100 dark:bg-slate-700 rounded-t-lg overflow-hidden relative">
+            <div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-800">
+              <div
+                v-if="file?.filetype === 'image' && (file?.filepath || file?.url)"
+                class="relative w-full"
+              >
+                <img
+                  :src="file?.preview"
+                  :alt="file?.alt || file?.filename"
+                  class="object-cover w-full h-full rounded text-xs"
+                />
+              </div>
+              <FileText v-else class="w-12 h-12 text-gray-500" />            
+            </div>
+          </div>
+          <div class="p-4">
+            <div class="flex items-center justify-between mb-2">
+              <h3 class="font-medium text-slate-800 dark:text-slate-100 truncate flex-1 mr-2">{{ file.filename }}</h3>
+              <TypeTag :type="file?.filetype" />
+            </div>
+            <div class="space-y-1 text-sm text-slate-500 dark:text-slate-400">
+              <div class="flex justify-between">
+                <span>{{ $t('media.size') }}:</span>
+                <span>{{ formatFileSize(file.filesize) }}</span>
+              </div>
+              <div class="flex justify-between">
+                <span>{{ $t('media.uploaded') }}:</span>
+                <span>{{ formatDate(file.created_at) }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { File, Folder, FileText, Trash2 } from "lucide-vue-next";
+import { formatFileSize } from "../../props/media";
+import TypeTag from "./TypeTag.vue";
+import { ref, onMounted, onUpdated, defineEmits } from "vue";
+import { confirm } from '@opengis/core';
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+const emit = defineEmits(["delete-file", "file-click", "delete-folder"]);
+
+const props = defineProps({
+  files: {
+    type: Array,
+    required: true,
+  },
+  selectedFile: {
+    type: Object,
+    default: null,
+  },
+  selectedFiles: {
+    type: Array,
+    default: () => [],
+  },
+  isDeleteButton: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const sortedFiles = ref([]);
+const selectedFolder = ref(null);
+
+const openConfirm = () => {
+  confirm({
+    title: t("builder.deleteTitle"),
+    message: t("builder.deleteObject"),
+    type: 'error',
+    onConfirm: () => {
+      handleDeleteFile();
+    },
+  })
+};
+
+const handleDeleteFile = () => {
+  if (selectedFolder.value.type === 'file') {
+    emit("delete-file", selectedFile.value);
+  } else {
+    emit("delete-folder", selectedFolder.value);
+  }
+};
+
+
+const formatDate = (dateStr) => {
+  if (!dateStr) return "";
+  const date = new Date(dateStr);
+  if (isNaN(date.getTime())) return '';
+  return date.toISOString().slice(0, 10);
+};
+
+const sortFiles = () => {
+  sortedFiles.value = props.files.sort((a, b) => {
+    if (a.type === 'dir' && b.type !== 'dir') return -1;
+    if (a.type !== 'dir' && b.type === 'dir') return 1;
+    return 0;
+  });
+}
+
+onMounted(() => sortFiles());
+
+onUpdated(() => sortFiles());
+</script>

package/src/components/media/MediaList.vue

@@ -0,0 +1,148 @@
+<template>
+  <div>
+    <div
+      v-if="files.length === 0"
+      class="flex flex-col items-center justify-center h-64 text-muted-foreground"
+    >
+      <File class="w-12 h-12 mb-2" />
+      <p>{{ $t("media.noFilesInFolder") }}</p>
+    </div>
+
+    <table v-else class="w-full text-sm caption-bottom">
+      <thead class="[&_tr]:border-b">
+        <tr
+          class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"
+        >
+          <th
+            class="h-12 px-4 text-left align-middle font-medium text-muted-foreground w-[300px]"
+          >
+            {{ $t("media.name") }}
+          </th>
+          <th
+            class="h-12 px-4 font-medium text-left align-middle text-muted-foreground"
+          >
+            {{ $t("media.type") }}
+          </th>
+          <th
+            class="h-12 px-4 font-medium text-left align-middle text-muted-foreground"
+          >
+            {{ $t("media.size") }}
+          </th>
+          <th
+            class="hidden h-12 px-4 font-medium text-left align-middle text-muted-foreground md:table-cell"
+          >
+            {{ $t("media.updatedAt") }}
+          </th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody class="[&_tr:last-child]:border-0">
+        <tr
+          v-for="file in files"
+          :key="file.id"
+          class="border-b transition-colors hover:bg-blue-200/50 data-[state=selected]:bg-muted cursor-pointer"
+          :class="{ 
+            'bg-blue-200': selectedFile?.id === file.id && selectedFile?.type === file.type || 
+                          (selectedFiles && selectedFiles.some(f => f.id === file.id && f.type === file.type))
+          }"
+          @click="$emit('file-click', file)"
+        >
+          <td class="p-4 font-medium align-middle">
+            <div class="flex items-center gap-2">
+              <IconFolder
+                v-if="file.type === 'dir'"
+                class="w-5 h-5 text-blue-500"
+              />
+              <div
+                v-else-if="file?.filetype === 'image' && file?.filepath"
+                class="relative w-8 h-8"
+              >
+                <img
+                  :src="file?.preview"
+                  :alt="file?.alt || file?.filename"
+                  class="object-cover w-full h-full rounded"
+                />
+              </div>
+              <IconImage
+                v-else-if="file?.filetype === 'image'"
+                class="w-5 h-5 text-green-500"
+              />
+              <File v-else class="w-5 h-5 text-gray-500" />
+              <span class="truncate max-w-[200px]">{{
+                file?.filename || file?.name
+              }}</span>
+            </div>
+          </td>
+          <td class="p-4 align-middle">
+            {{
+              file?.type === "dir"
+                ? $t("media.folder")
+                : file?.filetype?.charAt(0)?.toUpperCase() +
+                  file?.filetype?.slice(1)
+            }}
+          </td>
+          <td class="p-4 align-middle">
+            {{ file?.type === "dir" ? "--" : formatFileSize(file?.filesize) }}
+          </td>
+          <td class="hidden p-4 align-middle md:table-cell">
+            {{ file?.updated_at ? formatDate(file?.updated_at) : "--" }}
+          </td>
+          <td v-if="file.type === 'dir'">
+            <Trash2 class="w-4 h-4 text-red-500 cursor-pointer" @click.stop=" openConfirm" />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup>
+import IconFolder from "../icons/icon-folder.vue";
+import IconImage from "../icons/icon-image.vue";
+import { formatFileSize, formatDate } from "../../props/media";
+import { Trash2 } from "lucide-vue-next";
+import { ref } from "vue";
+import { confirm } from '@opengis/core';
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+const props = defineProps({
+  files: {
+    type: Array,
+    required: true,
+  },
+  selectedFile: {
+    type: Object,
+    default: null,
+  },
+  selectedFiles: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const selectedFile = ref(null);
+
+const emit = defineEmits(["file-click", "delete-folder"]);
+
+const openConfirm = () => {
+
+  confirm({
+    title: t("builder.deleteTitle"),
+    message: t("builder.deleteObject"),
+    type: 'error',
+    onConfirm: () => {
+      handleDeleteFile();
+    },
+  })
+};
+
+const handleDeleteFile = () => {
+  emit("delete-folder", selectedFile.value);
+};
+
+const handleSelectedFile = (file) => {
+  selectedFile.value = file;
+};
+
+</script>

package/src/components/media/MediaViewControls.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="flex items-center gap-3">
+    <button 
+      class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 border shadow-sm hover:text-accent-foreground h-9 px-4 py-2 bg-white dark:bg-slate-700 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-600"
+      @click="$emit('create-folder')"
+    >
+      <FolderPlus class="w-4 h-4 mr-2" />
+      {{ $t("media.newFolder") }}
+    </button>
+    <button   
+      class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium disabled:pointer-events-none disabled:opacity-50 h-9 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white shadow-md hover:shadow-lg transition-all duration-200 transform hover:scale-105"
+      @click="$refs.fileInputRef.click()"
+    >
+      <input
+        type="file"
+        @change="$emit('file-change', $event)"
+        ref="fileInputRef"
+        class="hidden"
+        multiple
+      />
+      <Plus class="w-4 h-4 mr-2" />
+      {{ $t("media.uploadMedia") }}
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { Plus, FolderPlus } from "lucide-vue-next";
+
+defineProps({
+  modelValue: {
+    type: String,
+    required: true,
+  },
+});
+
+defineEmits(["update:modelValue", "create-folder", "file-change"]);
+</script>

package/src/components/media/TypeTag.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors shadow-lg backdrop-blur-sm"    
+        :class="typeStyles.get(type)"
+    >
+        {{ type }}
+    </div>
+</template>
+
+<script setup>
+const typeStyles = new Map([
+    ['document', 'bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-700'],
+    ['image', 'bg-green-100 text-green-800 border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-700'],
+    ['video', 'bg-purple-100 text-purple-800 border-purple-200 dark:bg-purple-900/30 dark:text-purple-300 dark:border-purple-700'],
+])      
+
+
+const props = defineProps({
+    type: {
+        type: String,
+        required: true,
+    },
+})
+</script>