From e876bd1802b6168b1347189252dd6e28d681efa6 Mon Sep 17 00:00:00 2001
From: mzrtamp <mozartrafi@clytage.org>
Date: Wed, 28 Feb 2024 23:21:30 +0700
Subject: [PATCH] chore(pages/index): apply base

---
 src/pages/index.tsx | 104 +++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 102 insertions(+), 2 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 7edc040..3826598 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,9 +1,109 @@
+"use client";
+
 import React from "react";
 
+const Data = [
+    {
+        name: "Jane Cooper",
+        title: "Regional Paradigm Technician",
+        status: "Active",
+        role: "Admin",
+        email: "jane@example.com",
+        image: "https://randomuser.me/portraits/women/1.jpg"
+    },
+    {
+        name: "Cody Fisher",
+        title: "Customer",
+        status: "Inactive",
+        role: "Owner",
+        email: "cody@example.com",
+        image: "https://randomuser.me/portraits/men/1.jpg"
+    }
+];
+
 export default function Page(): JSX.Element {
     return (
-        <div className="flex w-screen h-screen bg-black justify-center items-center text-center text-2xl">
-            <p className="rounded-full p-5 bg-white">Selamat datang di web Bandrek :D</p>
+        // Database table template tailwindcss
+        <div className="flex flex-col">
+            <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+                <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+                    <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
+                        <table className="min-w-full divide-y divide-gray-200">
+                            <thead className="bg-gray-50">
+                                <tr>
+                                    <th
+                                        scope="col"
+                                        className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                                    >
+                                        Name
+                                    </th>
+                                    <th
+                                        scope="col"
+                                        className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                                    >
+                                        Title
+                                    </th>
+                                    <th
+                                        scope="col"
+                                        className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                                    >
+                                        Status
+                                    </th>
+                                    <th
+                                        scope="col"
+                                        className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                                    >
+                                        Role
+                                    </th>
+                                    <th scope="col" className="relative px-6 py-3">
+                                        <span className="sr-only">Edit</span>
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody className="bg-white divide-y divide-gray-200">
+                                {Data.map((person, personIdx) => <tr key={personIdx}>
+                                    <td className="px-6 py-4 whitespace-nowrap">
+                                        <div className="flex items-center">
+                                            <div className="flex-shrink-0 h-10 w-10">
+                                                <img
+                                                    className="h-10 w-10 rounded-full"
+                                                    src={person.image}
+                                                    alt=""
+                                                />
+                                            </div>
+                                            <div className="ml-4">
+                                                <div className="text-sm font-medium text-gray-900">
+                                                    {person.name}
+                                                </div>
+                                                <div className="text-sm text-gray-500">
+                                                    {person.email}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <td className="px-6 py-4 whitespace-nowrap">
+                                        <div className="text-sm text-gray-900">{person.title}</div>
+                                        <div className="text-sm text-gray-500">{person.email}</div>
+                                    </td>
+                                    <td className="px-6 py-4 whitespace-nowrap">
+                                        <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${person.status === "Active" ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"}`}>
+                                            {person.status}
+                                        </span>
+                                    </td>
+                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                        {person.role}
+                                    </td>
+                                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                                        <a href="#" className="text-indigo-600 hover:text-indigo-900">
+                                            Edit
+                                        </a>
+                                    </td>
+                                </tr>)}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
         </div>
     );
 }