Changes to UI and other stuff

resources/js/Pages/Testing/Index.vue

@@ -2,6 +2,7 @@
 import { ref } from "vue";
 import AppLayout from "@/Layouts/AppLayout.vue";
 import DataTableClient from "@/Components/DataTable/DataTableClient.vue";
+import DataTableExample from "../Examples/DataTableExample.vue";
 
 const props = defineProps({
   example: { type: String, default: "Demo" },
@@ -55,45 +56,7 @@ function onRowClick(row) {
 </script>
 
 <template>
-  <AppLayout title="Testing Sandbox">
-    <div class="space-y-6 p-6">
-      <div class="prose max-w-none">
-        <h1 class="text-2xl font-semibold">Testing Page</h1>
-        <p>
-          This page is for quick UI or component experiments. Remove or adapt as needed.
-        </p>
-        <p class="text-slate-700 text-sm">
-          Prop example value: <span class="font-mono">{{ props.example }}</span>
-        </p>
-      </div>
-
-      <div
-        class="rounded-lg border border-slate-200 bg-white/70 p-4 shadow-sm"
-      >
-        <h2
-          class="text-sm font-semibold tracking-wide uppercase text-slate-500 mb-3"
-        >
-          DataTable (Client-side)
-        </h2>
-        <DataTableClient
-          :columns="columns"
-          :rows="rows"
-          v-model:sort="sort"
-          v-model:search="search"
-          v-model:page="page"
-          v-model:pageSize="pageSize"
-          :search-keys="searchKeys"
-          @row:click="onRowClick"
-        >
-          <template #actions="{ row }">
-            <button
-              class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 text-xs"
-            >
-              Akcija
-            </button>
-          </template>
-        </DataTableClient>
-      </div>
-    </div>
-  </AppLayout>
+  
+        <DataTableExample></DataTableExample>
+    
 </template>