more stuff

src/components/admin/UsersTable/ButtonOnClick.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import PlusCircleIcon from "@heroicons/react/24/outline/PlusCircleIcon";
+
+export default async function ButtonOnClick(props:any) {
+    const handleClick = async () => {
+        alert("This feature is coming soon");
+     
+    }          
+    return (
+        <button
+            type="button"
+            onClick={handleClick}
+            className="inline-flex items-center gap-x-1.5 rounded-xl bg-lime-800 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-lime-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lime-900"
+        >
+            Edit
+            <PlusCircleIcon
+                aria-hidden="true"
+                className="-mr-0.5 size-5"
+            />
+        </button>
+    )
+}   

src/components/admin/UsersTable/index.tsx

@@ -3,12 +3,17 @@ import { PlusCircleIcon } from "@heroicons/react/20/solid";
 
 import Image from "next/image";
 import Link from "next/link";
+import ButtonOnClick from "./ButtonOnClick";
 
 
 export default async function UsersTable(props: any) {
+
+  const onClick = () => {
+    alert("This feature is coming soon");
+}
   return (
     <div className="pb-12">
-   
+
       <div className="mt-8 flow-root">
         <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
           <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
@@ -20,7 +25,7 @@ export default async function UsersTable(props: any) {
                     className="py-3.5 pl-4 pr-3 text-left text-xs font-semibold text-gray-900 "
                   >
                     <a href="#" className="group inline-flex">
-                    {props.newColumnHeadings.getHeading()}
+                      {props.newColumnHeadings.getHeading()}
                       <span className="invisible ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible">
                         <ChevronDownIcon
                           aria-hidden="true"
@@ -48,7 +53,7 @@ export default async function UsersTable(props: any) {
                     className="px-3 py-3.5 text-left text-xs font-semibold text-gray-900"
                   >
                     <a href="#" className="group inline-flex">
-                    {props.newColumnHeadings.getHeading()}
+                      {props.newColumnHeadings.getHeading()}
                       <span className="ml-2 flex-none rounded bg-gray-100 text-gray-900 group-hover:bg-gray-200">
                         <ChevronDownIcon
                           aria-hidden="true"
@@ -62,7 +67,7 @@ export default async function UsersTable(props: any) {
                     className="px-3 py-3.5 text-left text-xs font-semibold text-gray-900"
                   >
                     <a href="#" className="group inline-flex">
-                    {props.newColumnHeadings.getHeading()}
+                      {props.newColumnHeadings.getHeading()}
                       <span className="invisible ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible">
                         <ChevronDownIcon
                           aria-hidden="true"
@@ -76,7 +81,7 @@ export default async function UsersTable(props: any) {
                     className="px-3 py-3.5 text-left text-xs font-semibold text-gray-900"
                   >
                     <a href="#" className="group inline-flex">
-                    {props.newColumnHeadings.getHeading()}
+                      {props.newColumnHeadings.getHeading()}
                       <span className="invisible ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible">
                         <ChevronDownIcon
                           aria-hidden="true"
@@ -91,7 +96,7 @@ export default async function UsersTable(props: any) {
                 {props.data.map((item: any) => (
                   <tr key={item.uuid}>
                     <td className="whitespace-wrap flex items-center py-4 pl-4 pr-3 text-xs font-medium text-gray-900 ">
-                  
+
                       <Link href={`/UserProfile/${item.uuid}`}><span className="pl-2"> {item.email}</span></Link>
                     </td>
                     <td className="whitespace-nowrap px-3 py-4 text-xs text-gray-900">
@@ -104,25 +109,15 @@ export default async function UsersTable(props: any) {
                       {item.username}
                     </td>
                     <td className="whitespace-nowrap px-3 py-4 text-xs text-gray-900">
-                      <button
-                        type="button"
-                        className="inline-flex items-center gap-x-1.5 rounded-xl bg-lime-800 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-lime-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lime-900"
-                      >
-                        Edit
-                        <PlusCircleIcon
-                          aria-hidden="true"
-                          className="-mr-0.5 size-5"
-                        />
-                      </button>
+                     <ButtonOnClick />
                     </td>
-                    <td style={{display:'none'}}>
-           
-                    </td>
-                  </tr>                  
+                  </tr>
                 ))}
+
               </tbody>
+
             </table>
-         
+
           </div>
         </div>
       </div>