generated from stegripe/template
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
mzrtamp
committed
Feb 28, 2024
1 parent
fa7ce12
commit e876bd1
Showing
1 changed file
with
102 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,109 @@ | ||
| "use client"; | ||
|
|
||
| import React from "react"; | ||
|
|
||
| const Data = [ | ||
| { | ||
| name: "Jane Cooper", | ||
| title: "Regional Paradigm Technician", | ||
| status: "Active", | ||
| role: "Admin", | ||
| email: "[email protected]", | ||
| image: "https://randomuser.me/portraits/women/1.jpg" | ||
| }, | ||
| { | ||
| name: "Cody Fisher", | ||
| title: "Customer", | ||
| status: "Inactive", | ||
| role: "Owner", | ||
| email: "[email protected]", | ||
| 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> | ||
| ); | ||
| } |