@opengis/cms 0.0.21 → 0.0.22

package/src/components/form-components/reference-skeleton/documents-skeleton.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="h-full flex flex-col">
+    <div class="h-4 bg-gray-400 rounded mb-2"></div>
+    <div class="space-y-1.5 flex-1">
+      <div class="flex items-center justify-between p-1.5 border-b border-gray-200">
+        <div class="flex items-center gap-2">
+          <div class="w-3 h-3 bg-gray-400 rounded-full"></div>
+          <div class="h-2 bg-gray-300 rounded flex-1 w-28"></div>
+        </div>
+        <div class="flex gap-1.5">
+          <div class="w-3 h-3 bg-gray-200 rounded"></div>
+          <div class="w-3 h-3 bg-gray-200 rounded"></div>
+        </div>
+      </div>
+      <div class="flex items-center justify-between p-1.5 border-b border-gray-200">
+        <div class="flex items-center gap-2">
+          <div class="w-3 h-3 bg-gray-400 rounded-full"></div>
+          <div class="h-2 bg-gray-300 rounded flex-1 w-28"></div>
+        </div>
+        <div class="flex gap-1.5">
+          <div class="w-3 h-3 bg-gray-200 rounded"></div>
+          <div class="w-3 h-3 bg-gray-200 rounded"></div>
+        </div>
+      </div>
+      <div class="flex items-center justify-between p-1.5 border-b border-gray-200">
+        <div class="flex items-center gap-2">
+          <div class="w-3 h-3 bg-gray-400 rounded-full"></div>
+          <div class="h-2 bg-gray-300 rounded flex-1 w-28"></div>
+        </div>
+        <div class="flex gap-1.5">
+          <div class="w-3 h-3 bg-gray-200 rounded"></div>
+          <div class="w-3 h-3 bg-gray-200 rounded"></div>
+        </div>
+      </div>
+      <div class="flex items-center justify-between p-1.5 border-b border-gray-200">
+        <div class="flex items-center gap-2">
+          <div class="w-3 h-3 bg-gray-400 rounded-full"></div>
+          <div class="h-2 bg-gray-300 rounded flex-1 w-28"></div>
+        </div>
+        <div class="flex gap-1.5">
+          <div class="w-3 h-3 bg-gray-200 rounded"></div>
+          <div class="w-3 h-3 bg-gray-200 rounded"></div>
+        </div>
+      </div>
+    </div>
+    <div class="flex justify-between items-center mt-2 pt-2 border-t border-gray-300">
+      <div class="text-xs font-medium text-gray-600">{{ $t(text) }}</div>
+      <div class="text-xs text-gray-500" v-if="count && count > 0">{{ count }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+  count: {
+    type: Number,
+    required: true,
+  },
+});
+</script>

package/src/components/form-components/reference-skeleton/faq-skeleton.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="h-full w-full flex flex-col">
+    <div class="h-3 bg-gray-500 rounded mb-2"></div>
+    <div class="space-y-1.5 flex-1">
+      <div class="border border-gray-300 rounded p-1">
+        <div class="flex items-center justify-between">
+          <div class="h-1.5 bg-gray-300 rounded flex-1 mr-2"></div>
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down w-2.5 h-2.5 text-gray-400">
+            <path d="m6 9 6 6 6-6"></path>
+          </svg>
+        </div>
+      </div>
+      <div class="border border-gray-300 rounded p-1">
+        <div class="flex items-center justify-between">
+          <div class="h-1.5 bg-gray-300 rounded flex-1 mr-2"></div>
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down w-2.5 h-2.5 text-gray-400">
+            <path d="m6 9 6 6 6-6"></path>
+          </svg>
+        </div>
+        <div class="mt-1 pt-1 border-t border-gray-200">
+          <div class="space-y-0.5">
+            <div class="h-1 bg-gray-200 rounded"></div>
+            <div class="h-1 bg-gray-200 rounded w-5/6"></div>
+            <div class="h-1 bg-gray-200 rounded w-4/5"></div>
+          </div>
+        </div>
+      </div>
+      <div class="border border-gray-300 rounded p-1">
+        <div class="flex items-center justify-between">
+          <div class="h-1.5 bg-gray-300 rounded flex-1 mr-2"></div>
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down w-2.5 h-2.5 text-gray-400">
+            <path d="m6 9 6 6 6-6"></path>
+          </svg>
+        </div>
+      </div>
+      <div class="border border-gray-300 rounded p-1">
+        <div class="flex items-center justify-between">
+          <div class="h-1.5 bg-gray-300 rounded flex-1 mr-2"></div>
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down w-2.5 h-2.5 text-gray-400">
+            <path d="m6 9 6 6 6-6"></path>
+          </svg>
+        </div>
+      </div>
+    </div>
+    <div class="flex justify-between items-center mt-2 pt-2 border-t border-gray-300">
+      <div class="text-xs font-medium text-gray-600">{{ $t(text) }}</div>
+      <div class="text-xs text-gray-500" v-if="count && count > 0">{{ count }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+  count: {
+    type: Number,
+    required: true,
+  },
+});
+</script>
+  

package/src/components/form-components/reference-skeleton/form-skeleton.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="h-full w-full flex flex-col">
+    <div class="h-3 bg-gray-500 rounded mb-2"></div>
+    <div class="space-y-1.5 flex-1">
+      <div>
+        <div class="h-1.5 bg-gray-300 rounded mb-1 w-1/4"></div>
+        <div class="h-5 bg-gray-200 rounded border border-gray-300"></div>
+      </div>
+      <div>
+        <div class="h-1.5 bg-gray-300 rounded mb-1 w-1/3"></div>
+        <div class="h-5 bg-gray-200 rounded border border-gray-300"></div>
+      </div>
+      <div>
+        <div class="h-1.5 bg-gray-300 rounded mb-1 w-1/4"></div>
+        <div class="h-5 bg-gray-200 rounded border border-gray-300"></div>
+      </div>
+      <div>
+        <div class="h-1.5 bg-gray-300 rounded mb-1 w-1/3"></div>
+        <div class="h-8 bg-gray-200 rounded border border-gray-300"></div>
+      </div>
+    </div>
+    <div class="h-6 bg-gray-600 rounded mt-2"></div>
+    <div class="flex justify-between items-center mt-2 pt-2 border-t border-gray-300">
+      <div class="text-xs font-medium text-gray-600">{{ $t(text) }}</div>
+      <div class="text-xs text-gray-500" v-if="count && count > 0">{{ count }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+  count: {
+    type: Number,
+    required: true,
+  },
+});
+</script>

package/src/components/form-components/reference-skeleton/index.js

@@ -0,0 +1,36 @@
+import CardsSkeleton from "./cards-skeleton.vue";
+import FaqSkeleton from "./faq-skeleton.vue";
+import BannerSkeleton from "./banner-skeleton.vue";
+import FormSkeleton from "./form-skeleton.vue";
+import NewsSkeleton from "./news-skeleton.vue";
+import TeamSkeleton from "./team-skeleton.vue";
+import UsefulLinksSkeleton from "./usefulLinks-skeleton.vue";
+import VideoSkeleton from "./video-skeleton.vue";
+import AboutSkeleton from "./about-skeleton.vue";
+import SliderSkeleton from "./slider-skeleton.vue";
+import InfoLineSkeleton from "./infoLine-skeleton.vue";
+import TabsSkeleton from "./tabs-skeleton.vue";
+import DocumentsSkeleton from "./documents-skeleton.vue";
+import BodySkeleton from "./body-skeleton.vue";
+
+export default {
+  faq: FaqSkeleton,
+  banner: BannerSkeleton,
+  slider: SliderSkeleton,
+  video: VideoSkeleton,
+  about: AboutSkeleton,
+  cards: CardsSkeleton,
+  usefulLinks: UsefulLinksSkeleton,
+  team: TeamSkeleton,
+  news: NewsSkeleton,
+  form: FormSkeleton,
+  tabs: TabsSkeleton,
+  vertical_tabs: NewsSkeleton,
+  documents: DocumentsSkeleton,
+  infoLine: InfoLineSkeleton,
+  body: BodySkeleton,
+  photoGrid: CardsSkeleton,
+  interested: UsefulLinksSkeleton,
+  contact: DocumentsSkeleton,
+  iframe: BannerSkeleton,
+};

package/src/components/form-components/reference-skeleton/infoLine-skeleton.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="h-full flex flex-col">
+    <div class="flex-1 bg-gray-200 rounded relative overflow-hidden">
+      <div class="absolute inset-0 flex items-center">
+        <div class="flex gap-8 whitespace-nowrap animate-pulse">
+          <div class="h-3 bg-gray-400 rounded w-32"></div>
+          <div class="h-3 bg-gray-300 rounded w-24"></div>
+          <div class="h-3 bg-gray-400 rounded w-40"></div>
+          <div class="h-3 bg-gray-300 rounded w-28"></div>
+          <div class="h-3 bg-gray-400 rounded w-36"></div>
+          <div class="h-3 bg-gray-300 rounded w-20"></div>
+        </div>
+      </div>
+      <div class="absolute top-2 left-2 right-2 flex justify-between items-center">
+        <div class="w-2 h-2 bg-gray-500 rounded-full"></div>
+        <div class="w-2 h-2 bg-gray-500 rounded-full"></div>
+      </div>
+    </div>
+    <div class="flex justify-between items-center mt-2 pt-2 border-t border-gray-300">
+      <div class="text-xs font-medium text-gray-600">{{ $t(text) }}</div>
+      <div class="text-xs text-gray-500" v-if="count && count > 0">{{ count }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+  count: {
+    type: Number,
+    required: true,
+  },
+});
+</script>

package/src/components/form-components/reference-skeleton/news-skeleton.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="h-full w-full flex flex-col">
+    <div class="h-4 bg-gray-400 rounded mb-2"></div>
+    <div class="flex gap-2 flex-1">
+      <div class="flex-1 space-y-2">
+        <div class="bg-gray-200 rounded p-1.5">
+          <div class="h-8 bg-gray-300 rounded mb-1"></div>
+          <div class="h-1.5 bg-gray-400 rounded mb-1"></div>
+          <div class="h-1 bg-gray-300 rounded w-3/4"></div>
+        </div>
+        <div class="bg-gray-200 rounded p-1.5">
+          <div class="h-8 bg-gray-300 rounded mb-1"></div>
+          <div class="h-1.5 bg-gray-400 rounded mb-1"></div>
+          <div class="h-1 bg-gray-300 rounded w-3/4"></div>
+        </div>
+      </div>
+      <div class="w-20 space-y-1">
+        <div class="border-b border-gray-300 pb-1">
+          <div class="h-1 bg-gray-300 rounded mb-1"></div>
+          <div class="h-1 bg-gray-300 rounded w-4/5"></div>
+        </div>
+        <div class="border-b border-gray-300 pb-1">
+          <div class="h-1 bg-gray-300 rounded mb-1"></div>
+          <div class="h-1 bg-gray-300 rounded w-4/5"></div>
+        </div>
+        <div class="border-b border-gray-300 pb-1">
+          <div class="h-1 bg-gray-300 rounded mb-1"></div>
+          <div class="h-1 bg-gray-300 rounded w-4/5"></div>
+        </div>
+        <div class="border-b border-gray-300 pb-1">
+          <div class="h-1 bg-gray-300 rounded mb-1"></div>
+          <div class="h-1 bg-gray-300 rounded w-4/5"></div>
+        </div>
+      </div>
+    </div>
+    <div class="flex justify-between items-center mt-2 pt-2 border-t border-gray-300">
+      <div class="text-xs font-medium text-gray-600">{{ $t(text) }}</div>
+      <div class="text-xs text-gray-500" v-if="count && count > 0">{{ count }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+  count: {
+    type: Number,
+    required: true,
+  },
+});
+</script>

package/src/components/form-components/reference-skeleton/slider-skeleton.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="h-full w-full flex flex-col">
+        <div class="flex-1 bg-gray-200 rounded mb-2 relative">
+            <div class="absolute inset-0 flex items-center justify-center">
+                <div class="w-12 h-8 bg-gray-300 rounded"></div>
+            </div>
+            <div class="absolute left-1 top-1/2 transform -translate-y-1/2">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left w-4 h-4 text-gray-400"><path d="m15 18-6-6 6-6"></path></svg>
+            </div>
+            <div class="absolute right-1 top-1/2 transform -translate-y-1/2">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right w-4 h-4 text-gray-400"><path d="m9 18 6-6-6-6"></path></svg>
+            </div>
+        </div>
+        <div class="h-3 bg-gray-300 rounded mb-2"></div>
+        <div class="h-6 w-20 bg-gray-400 rounded"></div>
+        <div class="flex justify-center gap-1 mt-2">
+            <div class="w-1.5 h-1.5 bg-gray-300 rounded-full"></div>
+            <div class="w-1.5 h-1.5 bg-gray-300 rounded-full"></div>
+            <div class="w-1.5 h-1.5 bg-gray-300 rounded-full"></div>
+            <div class="w-1.5 h-1.5 bg-gray-300 rounded-full"></div>
+            <div class="w-1.5 h-1.5 bg-gray-300 rounded-full"></div>
+        </div>
+        <div class="flex justify-between items-center mt-2 pt-2 border-t border-gray-300">
+      <div class="text-xs font-medium text-gray-600">{{ $t(text) }}</div>
+      <div class="text-xs text-gray-500" v-if="count && count > 0">{{ count }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+  count: {
+    type: Number,
+    required: true,
+  },
+});
+</script>

package/src/components/form-components/reference-skeleton/tabs-skeleton.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="h-full flex flex-col">
+    <div class="h-2 bg-gray-300 rounded mb-2"></div>
+    <div class="flex gap-1 mb-3">
+      <div class="h-4 w-16 bg-gray-400 rounded"></div>
+      <div class="h-4 w-16 bg-gray-200 rounded"></div>
+    </div>
+    <div class="space-y-2 flex-1">
+      <div class="h-2 bg-gray-300 rounded w-5/6"></div>
+      <div class="h-2 bg-gray-300 rounded"></div>
+      <div class="space-y-1 mt-3">
+        <div class="flex items-center gap-2">
+          <div class="w-2 h-2 bg-gray-400 rounded-full"></div>
+          <div class="h-1.5 bg-gray-300 rounded w-20"></div>
+        </div>
+        <div class="flex items-center gap-2">
+          <div class="w-2 h-2 bg-gray-400 rounded-full"></div>
+          <div class="h-1.5 bg-gray-300 rounded w-16"></div>
+        </div>
+      </div>
+    </div>
+    <div class="flex justify-between items-center mt-2 pt-2 border-t border-gray-300">
+      <div class="text-xs font-medium text-gray-600">{{ $t(text) }}</div>
+      <div class="text-xs text-gray-500" v-if="count && count > 0">{{ count }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+  count: {
+    type: Number,
+    required: true,
+  },
+});
+</script>

package/src/components/form-components/reference-skeleton/team-skeleton.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="h-full w-full flex flex-col">
+    <div class="space-y-2 flex-1">
+      <div class="flex items-start gap-2">
+        <div class="w-8 h-8 bg-gray-300 rounded flex-shrink-0"></div>
+        <div class="flex-1 min-w-0">
+          <div class="h-2 bg-gray-400 rounded mb-1 w-2/3"></div>
+          <div class="h-1.5 bg-gray-300 rounded mb-1"></div>
+          <div class="flex gap-1">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-phone w-2.5 h-2.5 text-gray-400">
+              <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail w-2.5 h-2.5 text-gray-400">
+              <rect width="20" height="16" x="2" y="4" rx="2"></rect>
+              <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock w-2.5 h-2.5 text-gray-400">
+              <circle cx="12" cy="12" r="10"></circle>
+              <polyline points="12 6 12 12 16 14"></polyline>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="flex items-start gap-2">
+        <div class="w-8 h-8 bg-gray-300 rounded flex-shrink-0"></div>
+        <div class="flex-1 min-w-0">
+          <div class="h-2 bg-gray-400 rounded mb-1 w-2/3"></div>
+          <div class="h-1.5 bg-gray-300 rounded mb-1"></div>
+          <div class="flex gap-1">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-phone w-2.5 h-2.5 text-gray-400">
+              <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail w-2.5 h-2.5 text-gray-400">
+              <rect width="20" height="16" x="2" y="4" rx="2"></rect>
+              <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock w-2.5 h-2.5 text-gray-400">
+              <circle cx="12" cy="12" r="10"></circle>
+              <polyline points="12 6 12 12 16 14"></polyline>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="flex items-start gap-2">
+        <div class="w-8 h-8 bg-gray-300 rounded flex-shrink-0"></div>
+        <div class="flex-1 min-w-0">
+          <div class="h-2 bg-gray-400 rounded mb-1 w-2/3"></div>
+          <div class="h-1.5 bg-gray-300 rounded mb-1"></div>
+          <div class="flex gap-1">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-phone w-2.5 h-2.5 text-gray-400">
+              <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail w-2.5 h-2.5 text-gray-400">
+              <rect width="20" height="16" x="2" y="4" rx="2"></rect>
+              <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock w-2.5 h-2.5 text-gray-400">
+              <circle cx="12" cy="12" r="10"></circle>
+              <polyline points="12 6 12 12 16 14"></polyline>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="flex items-start gap-2">
+        <div class="w-8 h-8 bg-gray-300 rounded flex-shrink-0"></div>
+        <div class="flex-1 min-w-0">
+          <div class="h-2 bg-gray-400 rounded mb-1 w-2/3"></div>
+          <div class="h-1.5 bg-gray-300 rounded mb-1"></div>
+          <div class="flex gap-1">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-phone w-2.5 h-2.5 text-gray-400">
+              <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail w-2.5 h-2.5 text-gray-400">
+              <rect width="20" height="16" x="2" y="4" rx="2"></rect>
+              <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock w-2.5 h-2.5 text-gray-400">
+              <circle cx="12" cy="12" r="10"></circle>
+              <polyline points="12 6 12 12 16 14"></polyline>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex justify-between items-center mt-2 pt-2 border-t border-gray-300">
+      <div class="text-xs font-medium text-gray-600">{{ $t(text) }}</div>
+      <div class="text-xs text-gray-500" v-if="count && count > 0">{{ count }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+  count: {
+    type: Number,
+    required: true,
+  },
+});
+</script>

package/src/components/form-components/reference-skeleton/usefulLinks-skeleton.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="h-full w-full flex flex-col">
+    <div class="h-4 bg-gray-400 rounded mb-3"></div>
+    <div class="grid grid-cols-2 gap-2 flex-1">
+      <div class="space-y-2">
+        <div class="flex items-center justify-between p-1.5 border border-gray-300 rounded">
+          <div class="h-1.5 bg-gray-300 rounded flex-1 mr-2"></div>
+          <div class="w-2 h-2 bg-gray-400 rounded-full"></div>
+        </div>
+        <div class="flex items-center justify-between p-1.5 border border-gray-300 rounded">
+          <div class="h-1.5 bg-gray-300 rounded flex-1 mr-2"></div>
+          <div class="w-2 h-2 bg-gray-400 rounded-full"></div>
+        </div>
+        <div class="flex items-center justify-between p-1.5 border border-gray-300 rounded">
+          <div class="h-1.5 bg-gray-300 rounded flex-1 mr-2"></div>
+          <div class="w-2 h-2 bg-gray-400 rounded-full"></div>
+        </div>
+      </div>
+      <div class="space-y-2">
+        <div class="flex items-center justify-between p-1.5 border border-gray-300 rounded">
+          <div class="h-1.5 bg-gray-300 rounded flex-1 mr-2"></div>
+          <div class="w-2 h-2 bg-gray-400 rounded-full"></div>
+        </div>
+        <div class="flex items-center justify-between p-1.5 border border-gray-300 rounded">
+          <div class="h-1.5 bg-gray-300 rounded flex-1 mr-2"></div>
+          <div class="w-2 h-2 bg-gray-400 rounded-full"></div>
+        </div>
+        <div class="flex items-center justify-between p-1.5 border border-gray-300 rounded">
+          <div class="h-1.5 bg-gray-300 rounded flex-1 mr-2"></div>
+          <div class="w-2 h-2 bg-gray-400 rounded-full"></div>
+        </div>
+      </div>
+    </div>
+    <div class="flex justify-between items-center mt-2 pt-2 border-t border-gray-300">
+      <div class="text-xs font-medium text-gray-600">{{ $t(text) }}</div>
+      <div class="text-xs text-gray-500" v-if="count && count > 0">{{ count }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+  count: {
+    type: Number,
+    required: true,
+  },
+});
+</script>

package/src/components/form-components/reference-skeleton/video-skeleton.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="h-full w-full flex flex-col">
+        <div class="flex-1 bg-gray-200 rounded relative">
+            <div class="absolute inset-0 flex items-center justify-center">
+                <div class="w-10 h-10 bg-gray-400 rounded-full flex items-center justify-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play w-5 h-5 text-white ml-0.5"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg>
+                </div>
+            </div>
+            <div class="absolute bottom-1.5 left-1.5 right-1.5">
+                <div class="h-2 bg-gray-400 rounded mb-1"></div>
+                <div class="h-2 bg-gray-400 rounded w-3/4"></div>
+            </div>
+        </div>
+        <div class="mt-2 flex items-center gap-2">
+            <div class="w-5 h-5 bg-gray-300 rounded"></div>
+            <div class="h-2 bg-gray-300 rounded flex-1"></div>
+        </div>
+        <div class="flex justify-between items-center mt-2 pt-2 border-t border-gray-300">
+      <div class="text-xs font-medium text-gray-600">{{ $t(text) }}</div>
+      <div class="text-xs text-gray-500" v-if="count && count > 0">{{ count }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+  count: {
+    type: Number,
+    required: true,
+  },
+});
+</script>