Feature/move list to client (#50)

apps/dashboard/src/components/settings/invites/index.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { DataTable } from '@/components/data-table';
+import { FullPageEmptyState } from '@/components/full-page-empty-state';
+import { GanttChartIcon } from 'lucide-react';
+
+import type { IServiceInvite, IServiceProject } from '@openpanel/db';
+
+import { useColumns } from './columns';
+
+type CommonProps = {
+  projects: IServiceProject[];
+  data: IServiceInvite[];
+};
+
+type Props = CommonProps;
+
+export const InvitesTable = ({ projects, data }: Props) => {
+  const columns = useColumns(projects);
+
+  if (!data) {
+    return (
+      <div className="flex flex-col gap-2">
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+        <div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
+      </div>
+    );
+  }
+
+  if (data?.length === 0) {
+    return (
+      <FullPageEmptyState title="No members here" icon={GanttChartIcon}>
+        <p>Could not find any members</p>
+      </FullPageEmptyState>
+    );
+  }
+
+  return (
+    <>
+      <DataTable data={data ?? []} columns={columns} />
+    </>
+  );
+};