@opengis/cms 0.0.21 → 0.0.22

package/src/components/collections/CollectionsGrid.vue

@@ -0,0 +1,176 @@
+<template>
+    <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6 pb-6">
+        <div v-for="collection in collections" :key="collection.id" class="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:bg-slate-50">
+            <div class="flex items-center gap-2 space-y-1.5 p-6 border-b border-slate-200 dark:border-slate-700 bg-gradient-to-r from-slate-50 dark:from-slate-800 to-white dark:to-slate-800">
+                <File v-if="collection.type === 'single'" class="shrink-0 lucide lucide-page w-5 h-5 text-blue-600" />
+                <Layers v-else class="shrink-0 lucide lucide-layers w-5 h-5 text-blue-600" />
+                <p class="line-clamp-1 tracking-tight text-lg font-semibold text-slate-800 dark:text-slate-100 vertical-center">
+                    {{ collection.title }}
+                </p>
+                <div
+                    v-if="getStatusBadge(collection.status)"
+                    class="whitespace-nowrap rounded-md border ml-auto px-2.5 py-0.5 text-xs font-semibold transition-colors hover:bg-secondary/80 flex items-center w-fit bg-green-100 text-green-800 border-green-200
+                    dark:bg-green-900/30 dark:text-green-300 dark:border-green-700"
+                    :class="getStatusBadge(collection.status)?.classes"
+                >
+                    <component
+                    :is="getStatusBadge(collection.status)?.icon"
+                    class="w-3 h-3 mr-1"
+                    />
+                    {{ getStatusBadge(collection.status)?.text }}
+                </div>
+            </div>
+            <div class="w-full flex flex-col gap-2 p-6">
+                <p class="text-slate-600 dark:text-slate-300 mb-4 line-clamp-2" :title="collection.description">
+                    {{ collection.description !== null ? collection.description : 'No description' }}
+                </p>
+                <div class="flex items-center justify-between gap-2">
+                    <p class="text-sm text-slate-600 dark:text-slate-400">{{ $t("collections.entries") }}:</p>
+                    <p class="font-semibold text-slate-800 dark:text-slate-100">
+                        {{ collection.entries }}
+                    </p>
+                </div>
+                <div class="flex items-center justify-between gap-2">
+                    <p class="text-sm text-slate-500 dark:text-slate-400">{{ $t("collections.fields") }}:</p>
+                    <p class="font-semibold text-slate-800 dark:text-slate-100">
+                        {{ collection.fields }}
+                    </p>
+                </div>
+                <div class="flex items-center justify-between gap-2">
+                    <p class="text-sm text-slate-500 dark:text-slate-400">{{ $t("collections.lastModified") }}:</p>
+                    <p class="text-sm text-slate-600 dark:text-slate-300">
+                        {{ timeAgo(collection.last_edit) }}
+                    </p>
+                </div>
+                <div class="flex items-center justify-between gap-2 mt-6">
+                    <slot name="actions" :collection="collection" :handleAction="handleAction">
+                        <!-- Default buttons -->
+                        <button class="inline-flex gap-1	 items-center justify-center whitespace-nowrap font-medium border rounded-md text-xs h-8 w-4/5 p-0 border-slate-300 bg-white transition-all duration-200 shadow-sm group
+                        dark:border-slate-600 dark:bg-slate-700 dark:hover:bg-slate-600 dark:hover:border-slate-500 dark:hover:text-slate-200
+                        hover:bg-green-50 hover:border-green-300"
+                        @click.stop="handleAction('edit', collection)"
+                        >
+                            <Edit class="text-slate-800 dark:text-slate-200 w-4 h-4 group-hover:text-green-600 dark:group-hover:text-blue-50" />
+                            <span class="text-slate-800 dark:text-slate-200 group-hover:text-green-600 dark:group-hover:text-blue-50">{{ $t("common.actions.edit") }}</span>	
+                        </button>
+                        <button :class="collection.id === 'pages' ? 'disabled' : ''" class="inline-flex items-center justify-center whitespace-nowrap font-medium border rounded-md text-xs h-8 w-8 p-0 border-slate-300 bg-white transition-all duration-200 shadow-sm group
+                        dark:border-slate-600 dark:bg-slate-700 dark:hover:bg-slate-600 dark:hover:border-slate-500 dark:hover:text-slate-200
+                        hover:bg-red-50 hover:border-red-300"
+                        @click.stop="collection.id === 'pages' ? null : handleAction('delete', collection)"
+                        >
+                            <Trash2 class="text-slate-800 dark:text-slate-200 w-4 h-4 group-hover:text-red-600 dark:group-hover:text-blue-50" />
+                        </button>
+                        <button :class="collection.type === 'single' ? 'disabled cursor-not-allowed' : ''" class="inline-flex items-center justify-center whitespace-nowrap font-medium border rounded-md text-xs h-8 w-8 p-0 border-slate-300 bg-white transition-all duration-200 shadow-sm group
+                        dark:border-slate-600 dark:bg-slate-700 dark:hover:bg-slate-600 dark:hover:border-slate-500 dark:hover:text-slate-200
+                        hover:bg-blue-50 hover:border-blue-300"
+                        @click.stop="collection.type === 'single' ? null : handleAction('view', collection)"
+                        >
+                            <List class="text-slate-800 dark:text-slate-200 w-4 h-4 group-hover:text-blue-600 dark:group-hover:text-blue-50" />
+                        </button>
+                    </slot>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import {
+        Edit,
+        Trash2,
+        List,
+        Layers,
+        CheckCircle,
+        XCircle,
+        HelpCircle,
+        File,
+    } from "lucide-vue-next";   
+    import { ref } from "vue";
+
+    const confirm = ref(false);
+    const selectedRow = ref<any>(null);
+
+    const props = defineProps<{
+        collections: any[];
+        onEdit: (row: any) => void;
+        onView: (row: any) => void;
+        onDelete: (row: any) => void;
+    }>();
+
+    const emit = defineEmits<{
+        (e: "edit", row: any): void;
+        (e: "view", row: any): void;
+        (e: "delete", row: any): void;
+    }>();
+
+    const handleAction = (action: string, row: any) => {
+        switch (action) {
+            case "edit":
+            emit("edit", row);
+            if (props.onEdit) props.onEdit(row);
+            break;
+            case "view":
+            emit("view", row);
+            if (props.onView) props.onView(row);
+            break;
+            case "delete":
+            emit("delete", row);
+            if (props.onDelete) props.onDelete(row);
+            break;
+        }
+    };
+
+    const timeAgo = (date: string) => {
+        const now = new Date();
+        const past = new Date(date);
+        const diffMs = now.getTime() - past.getTime();
+        const diffSec = Math.floor(diffMs / 1000);
+        const diffMin = Math.floor(diffSec / 60);
+        const diffHour = Math.floor(diffMin / 60);
+        const diffDay = Math.floor(diffHour / 24);
+        const diffWeek = Math.floor(diffDay / 7);
+
+        if (diffWeek >= 2) return `${diffWeek} weeks ago`;
+        if (diffWeek === 1) return `1 week ago`;
+        if (diffDay >= 2) return `${diffDay} days ago`;
+        if (diffDay === 1) return `1 day ago`;
+        if (diffHour >= 2) return `${diffHour} hours ago`;
+        if (diffHour === 1) return `1 hour ago`;
+        if (diffMin >= 2) return `${diffMin} minutes ago`;
+        if (diffMin === 1) return `1 minute ago`;
+        return `just now`;
+    }
+
+    const getStatusBadge = (status: string) => {
+        switch (status) {
+            case "published":
+                return {
+                    icon: CheckCircle,
+                    text: "Published",
+                    classes:
+                    "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200 border-green-200 dark:border-green-700",
+                };
+            case "draft":
+                return {
+                    icon: Edit,
+                    text: "Draft",
+                    classes:
+                    "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-200 border-yellow-200 dark:border-yellow-700",
+                };
+            case "archived":
+                return {
+                    icon: XCircle,
+                    text: "Archived",
+                    classes:
+                    "bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300 border-gray-200 dark:border-gray-700",
+                };
+            default:
+                return {
+                    icon: HelpCircle,
+                    text: "--",
+                    classes:
+                    "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-200 border-yellow-200 dark:border-yellow-700",
+                };
+        }
+    };
+</script>

package/src/components/collections/ContentBlock.vue

@@ -0,0 +1,75 @@
+```vue
+<template>
+  <div
+    ref="blockRef"
+    class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 mb-4"
+  >
+    <div class="flex items-center justify-between mb-4">
+      <div class="flex items-center">
+        <button
+          class="handle p-1 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-400"
+        >
+          <GripVertical class="h-5 w-5" />
+        </button>
+        <span class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-300">
+          {{ block.type.charAt(0).toUpperCase() + block.type.slice(1) }}
+        </span>
+      </div>
+      <div class="flex items-center space-x-2">
+        <button
+          @click="$emit('edit', block.id)"
+          class="p-1 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-400"
+        >
+          <Settings class="h-5 w-5" />
+        </button>
+        <button
+          @click="$emit('remove', block.id)"
+          class="p-1 text-red-400 hover:text-red-600 dark:text-red-500 dark:hover:text-red-400"
+        >
+          <X class="h-5 w-5" />
+        </button>
+      </div>
+    </div>
+    
+    <component :is="blockComponent" v-bind="blockProps" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { GripVertical, Settings, X } from 'lucide-vue-next';
+
+const props = defineProps<{
+  block: {
+    id: string;
+    type: string;
+    content: any;
+  };
+}>();
+
+defineEmits<{
+  (e: 'remove', id: string): void;
+  (e: 'edit', id: string): void;
+}>();
+
+// This would be expanded to include all block type components
+const blockComponent = computed(() => {
+  switch (props.block.type) {
+    case 'heading':
+      return 'HeadingBlock';
+    case 'paragraph':
+      return 'ParagraphBlock';
+    // Add more cases for other block types
+    default:
+      return 'div';
+  }
+});
+
+const blockProps = computed(() => {
+  return {
+    content: props.block.content,
+    // Add any other props needed by specific block components
+  };
+});
+</script>
+```

package/src/components/collections/formWrapper.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="max-w-4xl">
+    <div
+      @submit.prevent="handleSubmit"
+      class="p-6 space-y-6 dark:bg-gray-800 dark:border-gray-700"
+    >
+      <div class="space-y-6">
+        <div v-for="col in columns" :key="col.name">
+          <div class="mb-2 text-sm font-medium text-gray-900 dark:text-white">
+            {{ col.title }}
+          </div>
+          <component
+            :is="getComponent(col?.type || '')"
+            v-model="formData[col.name]"
+            :label="col?.title"
+            :id="col?.name"
+            v-bind="col"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+// import { Save } from "lucide-vue-next";
+import { useRouter, useRoute } from "vue-router";
+//import v3core from "@opengis/v3-core";
+// import v3core from "../../../../v3-core/src/misc/import-file.ts";
+import MonacoEditor from "../form-components/MonacoEditor.vue";
+import Slug from "../form-components/vs-form-slug.vue";
+
+const formComponents = {
+  //...v3core.formComponents,
+  VsFormMonacoEditor: MonacoEditor,
+  VsFormSlug: Slug,
+};
+
+const route = useRoute();
+
+interface Column {
+  name: string;
+  label: string;
+  title?: string;
+  type?: string;
+  required?: boolean;
+  placeholder?: string;
+  rows?: number;
+  options?: string[];
+  component: any;
+}
+
+const props = defineProps<{
+  columns: Column[];
+  initialData?: Record<string, any>;
+}>();
+
+const emit = defineEmits<{
+  (e: "submit", data: Record<string, any>): void;
+  (e: "cancel"): void;
+  (e: "update", data: Record<string, any>): void;
+}>();
+
+function getDefaultFormData(
+  columns: Column[],
+  initialData?: Record<string, any>
+) {
+  const data: Record<string, any> = {};
+  columns.forEach((col) => {
+    data[col.name] =
+      initialData && initialData[col.name] !== undefined
+        ? initialData[col.name]
+        : "";
+  });
+  return data;
+}
+
+const formData = ref(
+  getDefaultFormData(props.columns ?? [], props.initialData)
+);
+const previousFormData = ref({ ...formData.value });
+
+const updateTimeout = ref<number | null>(null);
+const handleFormUpdate = () => {
+  if (updateTimeout.value) {
+    clearTimeout(updateTimeout.value);
+  }
+
+  updateTimeout.value = window.setTimeout(() => {
+    const hasChanges = Object.keys(formData.value).some(
+      (key) => formData.value[key] !== previousFormData.value[key]
+    );
+
+    if (hasChanges) {
+      emit("update", { ...formData.value });
+      previousFormData.value = { ...formData.value };
+    }
+  }, 300);
+};
+
+watch(
+  formData,
+  () => {
+    handleFormUpdate();
+  },
+  { deep: true }
+);
+
+const router = useRouter();
+
+watch(
+  () => [props.columns, props.initialData],
+  ([columns, initialData]) => {
+    if (columns && initialData) {
+      formData.value = getDefaultFormData(columns as Column[], initialData);
+    }
+  },
+  { immediate: true }
+);
+
+const getComponent = (type: string) => {
+  if (type === "yes_no") return formComponents["VsFormSwitcher"];
+  if (type === "date") return formComponents["VsFormDatepicker"];
+
+  if (!type) return null;
+  const capitalizedType = type.charAt(0).toUpperCase() + type.slice(1);
+  return formComponents["VsForm" + capitalizedType];
+};
+
+const handleCancel = () => {
+  router.back();
+};
+const handleSubmit = async () => {
+  if (props.initialData?.id) {
+    // Редагування існуючої статті
+    await fetch(`/api/cms/${route.meta.type}/${props.initialData.id}`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ ...formData.value }),
+    });
+  } else {
+    // Додавання нової статті
+    await fetch(`/api/cms/${route.meta.type}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ ...formData.value }),
+    });
+  }
+  router.back();
+};
+</script>

package/src/components/dashboard/ContentItem.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="p-4 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
+    <div class="flex items-center justify-between">
+      <div class="flex-1">
+        <div class="flex items-center space-x-3 mb-2">
+          <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-xs bg-white dark:bg-slate-700 border-slate-300 dark:border-slate-600 text-slate-600 dark:text-slate-300">
+            {{ item.type }}
+          </div>
+          <div :class="getStatusClasses(item.status)">
+            {{ item.status || '--' }}
+          </div>
+        </div>
+        <h3 class="font-semibold text-slate-800 dark:text-slate-100 mb-1">
+          {{ item.title || '--' }}
+        </h3>
+        <div class="flex items-center space-x-4 text-sm text-slate-500 dark:text-slate-400">
+          <span class="flex items-center">
+            <Users class="w-4 h-4 mr-1" />
+            {{ item.author || '--' }}
+          </span>
+          <span class="flex items-center">
+            <Calendar class="w-4 h-4 mr-1" />
+            {{ formatDate(item.updated_at) || '--.--.--' }}
+          </span>
+          <span class="flex items-center">
+            <Eye class="w-4 h-4 mr-1" />
+            {{ item.views || '--' }} {{ $t("dashboard.views") }}
+          </span>
+        </div>
+      </div>
+      <div class="flex items-center space-x-2">
+        <router-link 
+          :to="`/collections/${item.object_id}/${item.content_id}`"
+          class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-colors border shadow-sm rounded-md text-xs h-8 w-8 p-0 bg-white border-slate-300
+          hover:text-accent-foreground hover:bg-slate-50
+          dark:border-slate-600 dark:bg-slate-700  dark:hover:bg-slate-600"
+        >
+          <SquarePen class="w-4 h-4 dark:text-blue-50" />
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Users, Calendar, Eye, SquarePen } from 'lucide-vue-next';
+
+interface ContentItem {
+  id: number;
+  type: 'Article' | 'Post';
+  status: 'published' | 'draft' | 'review';
+  title: string;
+  author: string;
+  updated_at: string;
+  views: number;
+}
+
+interface Props {
+  item: ContentItem;
+}
+
+defineProps<Props>();
+
+const getStatusClasses = (status: string) => {
+  const statusClasses = {
+    published: 'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent hover:bg-secondary/80 bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300',
+    draft: 'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent hover:bg-secondary/80 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300',
+    review: 'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent hover:bg-secondary/80 bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300'
+  };
+  return statusClasses[status as keyof typeof statusClasses] || statusClasses.draft;
+};
+
+const formatDate = (dateStr: string) => {
+  if (!dateStr) return '--.--.--';
+  const date = new Date(dateStr);
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  }).format(date);
+};
+</script> 

package/src/components/dashboard/DashboardHeader.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="flex items-center justify-between">
+    <div>
+      <div class="flex items-center gap-2">
+        <h1 class="text-4xl font-bold text-slate-800 dark:text-slate-100 mb-2">
+          {{ $t('dashboard.title') }}
+        </h1>
+        <a :href="`https://cms.opengis.info/${locale}/get-started/app-overview`" target="_blank" :title="$t('guide.appOverview')">
+          <HelpCircle class="w-5 h-5" />
+        </a>
+      </div>
+      <div class="text-lg text-slate-600 dark:text-slate-300">
+        {{ $t('dashboard.description') }}
+      </div>
+    </div>
+    <div>
+      <router-link
+        to="/settings/collections" 
+        class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 shadow h-9 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white"
+      >
+        <Plus class="w-4 h-4 mr-2" />
+        {{ $t('dashboard.newCollection') }}
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { Plus, HelpCircle } from 'lucide-vue-next';
+  import { useI18n } from 'vue-i18n';
+
+  const { locale } = useI18n();
+</script> 

package/src/components/dashboard/QuickActions.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="rounded-xl text-card-foreground shadow-lg border-0 bg-white dark:bg-slate-800 backdrop-blur-sm">
+    <div class="flex flex-col space-y-1.5 p-6 border-b border-slate-200 dark:border-slate-700 bg-gradient-to-r from-slate-50 dark:from-slate-800 to-white dark:to-slate-800">
+      <h3 class="tracking-tight text-lg font-semibold text-slate-800 dark:text-slate-100 flex items-center">
+        <Zap class="w-5 h-5 mr-2" />
+        {{ $t("dashboard.quickActions") }}
+      </h3>
+    </div>
+    <div class="p-4">
+      <div class="grid grid-cols-2 gap-3">
+        <button 
+          v-for="action in actions" 
+          :key="action.id"
+          class="p-3 rounded-lg border border-slate-200 transition-all duration-200 text-left group
+          hover:bg-slate-50 hover:shadow-md
+          dark:border-slate-600 bg-white dark:bg-slate-700 dark:hover:bg-slate-600"
+          @click="handleAction(action?.link)"
+        >
+          <div class="p-2 rounded-lg bg-blue-50 dark:bg-blue-900/20 mb-2 w-fit">
+            <component :is="action?.icon" :class="`w-4 h-4 ${action?.iconColor}`" />
+          </div>
+          <h3 class="font-medium text-slate-800 dark:text-slate-100 text-sm mb-1 group-hover:text-slate-900 dark:group-hover:text-slate-50">
+            {{ action?.title }}
+          </h3>
+          <p class="text-xs text-slate-500 dark:text-slate-400 group-hover:text-slate-600 dark:group-hover:text-slate-300">
+            {{ action?.description }}
+          </p>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FileText, Users, Image as ImageIcon, MessageCircle, Zap } from 'lucide-vue-next';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+const router = useRouter();
+const { t } = useI18n();
+
+interface Action {
+  id: string;
+  title: string;
+  description: string;
+  icon: any;
+  iconColor: string;
+  link?: string;
+}
+
+const actions: Action[] = [
+  {
+    id: 'create-article',
+    title: t('dashboard.createArticle'),
+    description: t('dashboard.createArticleDescription'),
+    icon: FileText,
+    iconColor: 'text-blue-500',
+    link: '/collections/pages/create'
+  },
+  {
+    id: 'upload-media',
+    title: t('dashboard.uploadMedia'),
+    description: t('dashboard.uploadMediaDescription'),
+    icon: ImageIcon,
+    iconColor: 'text-purple-500',
+    link: '/media'
+  },
+  {
+    id: 'manage-users',
+    title: t('dashboard.manageUsers'),
+    description: t('dashboard.manageUsersDescription'),
+    icon: Users,
+    iconColor: 'text-green-500',
+    link: '/settings/users'
+  },
+
+];
+
+const handleAction = (actionLink: string) => {
+  if (actionLink) {
+    router.push(actionLink);
+  }
+};
+</script> 

package/src/components/dashboard/RecentContent.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="lg:col-span-2">
+    <div class="rounded-xl text-card-foreground shadow-lg border-0 bg-white dark:bg-slate-800 backdrop-blur-sm">
+      <div class="flex flex-col space-y-1.5 p-6 border-b border-slate-200 dark:border-slate-700 bg-gradient-to-r from-slate-50 dark:from-slate-800 to-white dark:to-slate-800">
+        <div class="flex items-center justify-between">
+          <h3 class="tracking-tight text-xl font-semibold text-slate-800 dark:text-slate-100 flex items-center">
+            <Activity class="w-5 h-5 mr-2" />
+            {{ $t('dashboard.recentContent') }}
+          </h3>
+          <button @click="goTo('/settings/collections')" class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border shadow-sm hover:text-accent-foreground h-8 rounded-md px-3 text-xs 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">
+            {{ $t('dashboard.viewAll') }}
+          </button>
+        </div>
+      </div>
+      <div class="p-0">
+        <div class="divide-y divide-slate-100 dark:divide-slate-700">
+          <ContentItem 
+            v-for="item in content" 
+            :key="item.id"
+            :item="item"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Activity } from 'lucide-vue-next';
+import ContentItem from './ContentItem.vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const goTo = (path: string) => {
+  router.push(path);
+};
+
+interface ContentItem {
+  id: number;
+  type: 'Article' | 'Post';
+  status: 'published' | 'draft' | 'review';
+  title: string;
+  author: string;
+  updated_at: string;
+  views: number;
+}
+
+interface Props {
+  content: ContentItem[];
+}
+
+defineProps<Props>();
+</script>