77 lines
4.8 KiB
PHP
77 lines
4.8 KiB
PHP
<x-layouts.app :title="__('Dashboard')">
|
|
<div class="flex h-full w-full flex-1 flex-col gap-4 rounded-xl">
|
|
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
|
|
{{-- Kotak Placeholder Pertama --}}
|
|
<div class="relative aspect-video overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
|
|
<x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
|
|
{{-- Anda bisa menempatkan tabel di sini jika mau --}}
|
|
</div>
|
|
{{-- Kotak Placeholder Kedua --}}
|
|
<div class="relative aspect-video overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
|
|
<x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
|
|
</div>
|
|
{{-- Kotak Placeholder Ketiga --}}
|
|
<div class="relative aspect-video overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
|
|
<x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Kotak Utama untuk Tabel --}}
|
|
<div class="relative h-full flex-1 overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700 p-4">
|
|
<h2 class="text-xl font-semibold mb-4 text-neutral-800 dark:text-neutral-100">Daftar Pengguna Terbaru</h2>
|
|
<div class="overflow-x-auto"> {{-- Membuat tabel bisa discroll jika lebar --}}
|
|
<table class="min-w-full divide-y divide-neutral-200 dark:divide-neutral-700">
|
|
<thead class="bg-neutral-50 dark:bg-neutral-800">
|
|
<tr>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-300 uppercase tracking-wider">
|
|
Nama
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-300 uppercase tracking-wider">
|
|
Email
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-300 uppercase tracking-wider">
|
|
Peran
|
|
</th>
|
|
<th scope="col" class="relative px-6 py-3">
|
|
<span class="sr-only">Aksi</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white dark:bg-neutral-900 divide-y divide-neutral-200 dark:divide-neutral-700">
|
|
|
|
{{-- Contoh data statis jika belum ada data dinamis --}}
|
|
<tr>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-neutral-900 dark:text-neutral-100">
|
|
Alice Smith
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-500 dark:text-neutral-300">
|
|
alice@example.com
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-500 dark:text-neutral-300">
|
|
Admin
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-500">Edit</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-neutral-900 dark:text-neutral-100">
|
|
Bob Johnson
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-500 dark:text-neutral-300">
|
|
bob@example.com
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-500 dark:text-neutral-300">
|
|
Editor
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-500">Edit</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</x-layouts.app>
|