From 03474ccfcf8822c33108ead8fdc9149ff31964bc Mon Sep 17 00:00:00 2001
From: Matthew Penner <me@matthewp.io>
Date: Fri, 1 Jan 2021 16:55:06 -0700
Subject: [PATCH] Add AdminTable.tsx component

---
 .../scripts/components/admin/AdminTable.tsx   | 163 ++++++++++++++
 .../components/admin/nests/NestsContainer.tsx | 203 ++++--------------
 2 files changed, 201 insertions(+), 165 deletions(-)
 create mode 100644 resources/scripts/components/admin/AdminTable.tsx

diff --git a/resources/scripts/components/admin/AdminTable.tsx b/resources/scripts/components/admin/AdminTable.tsx
new file mode 100644
index 000000000..c5fd5564c
--- /dev/null
+++ b/resources/scripts/components/admin/AdminTable.tsx
@@ -0,0 +1,163 @@
+import React from 'react';
+import { TableCheckbox } from '@/components/admin/AdminCheckbox';
+import Spinner from '@/components/elements/Spinner';
+import tw from 'twin.macro';
+
+export const TableHead = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <thead css={tw`bg-neutral-900 border-t border-b border-neutral-500`}>
+            <tr>
+                <th css={tw`px-6 py-2`}/>
+
+                {children}
+            </tr>
+        </thead>
+    );
+};
+
+export const TableHeader = ({ name }: { name: string }) => {
+    return (
+        <th css={tw`px-6 py-2`}>
+            <span css={tw`flex flex-row items-center cursor-pointer`}>
+                <span css={tw`text-xs font-medium tracking-wider uppercase text-neutral-300 whitespace-nowrap`}>{name}</span>
+
+                <div css={tw`ml-1`}>
+                    <svg fill="none" viewBox="0 0 20 20" css={tw`w-4 h-4 text-neutral-400`}>
+                        <path stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" d="M13 7L10 4L7 7"/>
+                        <path stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" d="M7 13L10 16L13 13"/>
+                    </svg>
+                </div>
+            </span>
+        </th>
+    );
+};
+
+export const TableBody = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <tbody>
+            {children}
+        </tbody>
+    );
+};
+
+export const TableRow = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <tr css={tw`h-12 hover:bg-neutral-600`}>
+            {children}
+        </tr>
+    );
+};
+interface Params {
+    loading: boolean;
+    hasItems: boolean;
+    checked: boolean;
+    onSelectAllClick(e: React.ChangeEvent<HTMLInputElement>): void;
+
+    children: React.ReactNode;
+}
+
+export default ({ loading, hasItems, checked, onSelectAllClick, children }: Params) => {
+    return (
+        <div css={tw`flex flex-col w-full`}>
+            <div css={tw`rounded-lg shadow-md bg-neutral-700`}>
+                { loading ?
+                    <div css={tw`w-full flex flex-col items-center justify-center`} style={{ height: '24rem' }}>
+                        <Spinner size={'base'}/>
+                    </div>
+                    :
+                    !hasItems ?
+                        <div css={tw`w-full flex flex-col items-center justify-center pb-6 py-2 sm:py-8 md:py-10 px-8`}>
+                            <div css={tw`h-64 flex`}>
+                                <img src={'/assets/svgs/not_found.svg'} alt={'No Items'} css={tw`h-full select-none`}/>
+                            </div>
+
+                            <p css={tw`text-lg text-neutral-300 text-center font-normal sm:mt-8`}>No items could be found, it&apos;s almost like they are hiding.</p>
+                        </div>
+                        :
+                        <>
+                            <div css={tw`flex flex-row items-center h-12 px-6`}>
+                                <div css={tw`flex flex-row items-center`}>
+                                    <TableCheckbox
+                                        type={'checkbox'}
+                                        name={'selectAll'}
+                                        checked={checked}
+                                        onChange={onSelectAllClick}
+                                    />
+
+                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" css={tw`w-4 h-4 ml-1 text-neutral-200`}>
+                                        <path clipRule="evenodd" fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/>
+                                    </svg>
+                                </div>
+
+                                <div css={tw`flex flex-row items-center px-2 py-1 ml-auto rounded cursor-pointer bg-neutral-600`}>
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" css={tw`w-6 h-6 text-neutral-300`}>
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/>
+                                    </svg>
+
+                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" css={tw`w-4 h-4 ml-1 text-neutral-200`}>
+                                        <path clipRule="evenodd" fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/>
+                                    </svg>
+                                </div>
+                            </div>
+
+                            <div css={tw`overflow-x-auto`}>
+                                <table css={tw`w-full table-auto`}>
+                                    {children}
+                                </table>
+                            </div>
+
+                            <div css={tw`flex flex-row items-center w-full px-6 py-3 border-t border-neutral-500`}>
+                                <p css={tw`text-sm leading-5 text-neutral-400`}>
+                                    Showing <span css={tw`text-neutral-300`}>1</span> to <span css={tw`text-neutral-300`}>10</span> of <span css={tw`text-neutral-300`}>97</span> results
+                                </p>
+
+                                <div css={tw`flex flex-row ml-auto`}>
+                                    <nav css={tw`relative z-0 inline-flex shadow-sm`}>
+                                        <a href="javascript:void(0)" css={tw`relative inline-flex items-center px-1 py-1 text-sm font-medium leading-5 transition duration-150 ease-in-out border rounded-l-md border-neutral-500 bg-neutral-600 text-neutral-400 hover:text-neutral-200 focus:z-10 focus:outline-none focus:border-primary-300 active:bg-neutral-100 active:text-neutral-500`} aria-label="Previous">
+                                            <svg css={tw`w-5 h-5`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                                <path clipRule="evenodd" fillRule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"/>
+                                            </svg>
+                                        </a>
+
+                                        <a href="javascript:void(0)" css={tw`relative inline-flex items-center px-3 py-1 -ml-px text-sm font-normal leading-5 transition duration-150 ease-in-out border border-neutral-500 bg-neutral-500 text-neutral-50 focus:z-10 focus:outline-none focus:border-primary-300`}>
+                                            1
+                                        </a>
+
+                                        <a href="javascript:void(0)" css={tw`relative inline-flex items-center px-3 py-1 -ml-px text-sm font-normal leading-5 transition duration-150 ease-in-out border border-neutral-500 bg-neutral-600 text-neutral-200 hover:text-neutral-300 focus:z-10 focus:outline-none focus:border-primary-300 active:bg-neutral-100 active:text-neutral-700`}>
+                                            2
+                                        </a>
+
+                                        <a href="javascript:void(0)" css={tw`relative items-center hidden px-3 py-1 -ml-px text-sm font-normal leading-5 transition duration-150 ease-in-out border md:inline-flex border-neutral-500 bg-neutral-600 text-neutral-200 hover:text-neutral-300 focus:z-10 focus:outline-none focus:border-primary-300 active:bg-neutral-100 active:text-neutral-700`}>
+                                            3
+                                        </a>
+
+                                        <span css={tw`relative inline-flex items-center px-3 py-1 -ml-px text-sm font-normal leading-5 border border-neutral-500 bg-neutral-600 text-neutral-200 cursor-default`}>
+                                            ...
+                                        </span>
+
+                                        <a href="javascript:void(0)" css={tw`relative items-center hidden px-3 py-1 -ml-px text-sm font-normal leading-5 transition duration-150 ease-in-out border md:inline-flex border-neutral-500 bg-neutral-600 text-neutral-200 hover:text-neutral-300 focus:z-10 focus:outline-none focus:border-primary-300 active:bg-neutral-100 active:text-neutral-700`}>
+                                            7
+                                        </a>
+
+                                        <a href="javascript:void(0)" css={tw`relative inline-flex items-center px-3 py-1 -ml-px text-sm font-normal leading-5 transition duration-150 ease-in-out border border-neutral-500 bg-neutral-600 text-neutral-200 hover:text-neutral-300 focus:z-10 focus:outline-none focus:border-primary-300  active:bg-neutral-100 active:text-neutral-700`}>
+                                            8
+                                        </a>
+
+                                        <a href="javascript:void(0)" css={tw`relative inline-flex items-center px-3 py-1 -ml-px text-sm font-normal leading-5 transition duration-150 ease-in-out border border-neutral-500 bg-neutral-600 text-neutral-200 hover:text-neutral-300 focus:z-10 focus:outline-none focus:border-primary-300 active:bg-neutral-100 active:text-neutral-700`}>
+                                            9
+                                        </a>
+
+                                        <a href="javascript:void(0)" css={tw`relative inline-flex items-center px-1 py-1 -ml-px text-sm font-medium leading-5 transition duration-150 ease-in-out border rounded-r-md border-neutral-500 bg-neutral-600 text-neutral-400 hover:text-neutral-200 focus:z-10 focus:outline-none focus:border-primary-300 active:bg-neutral-100 active:text-neutral-500`} aria-label="Next">
+                                            <svg css={tw`w-5 h-5`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                                <path clipRule="evenodd" fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
+                                            </svg>
+                                        </a>
+                                    </nav>
+                                </div>
+                            </div>
+                        </>
+                }
+            </div>
+        </div>
+    );
+};
diff --git a/resources/scripts/components/admin/nests/NestsContainer.tsx b/resources/scripts/components/admin/nests/NestsContainer.tsx
index d44f448c6..26ee82df2 100644
--- a/resources/scripts/components/admin/nests/NestsContainer.tsx
+++ b/resources/scripts/components/admin/nests/NestsContainer.tsx
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import getNests from '@/api/admin/nests/getNests';
 import { httpErrorToHuman } from '@/api/http';
 import NewNestButton from '@/components/admin/nests/NewNestButton';
-import Spinner from '@/components/elements/Spinner';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import { useDeepMemoize } from '@/plugins/useDeepMemoize';
 import useFlash from '@/plugins/useFlash';
@@ -10,7 +9,13 @@ import { AdminContext } from '@/state/admin';
 import { NavLink, useRouteMatch } from 'react-router-dom';
 import tw from 'twin.macro';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
-import AdminCheckbox, { TableCheckbox } from '@/components/admin/AdminCheckbox';
+import AdminCheckbox from '@/components/admin/AdminCheckbox';
+import AdminTable, {
+    TableBody,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '@/components/admin/AdminTable';
 
 const RowCheckbox = ({ id }: { id: number}) => {
     const isChecked = AdminContext.useStoreState(state => state.nests.selectedNests.indexOf(id) >= 0);
@@ -58,7 +63,7 @@ export default () => {
     }, []);
 
     const onSelectAllClick = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setSelectedNests(e.currentTarget.checked ? (nests?.map(nest => nest.id) || []) : []);
+        setSelectedNests(e.currentTarget.checked ? (nests.map(nest => nest.id) || []) : []);
     };
 
     return (
@@ -74,172 +79,40 @@ export default () => {
 
             <FlashMessageRender byKey={'nests'} css={tw`mb-4`}/>
 
-            <div css={tw`flex flex-col w-full`}>
-                <div css={tw`rounded-lg shadow-md bg-neutral-700`}>
-                    { loading ?
-                        <div css={tw`w-full flex flex-col items-center justify-center`} style={{ height: '24rem' }}>
-                            <Spinner size={'base'}/>
-                        </div>
-                        :
-                        nests.length < 1 ?
-                            <div css={tw`w-full flex flex-col items-center justify-center pb-6 py-2 sm:py-8 md:py-10 px-8`}>
-                                <div css={tw`h-64 flex`}>
-                                    <img src={'/assets/svgs/not_found.svg'} alt={'No Items'} css={tw`h-full select-none`}/>
-                                </div>
+            <AdminTable
+                loading={loading}
+                hasItems={nests.length > 0}
+                checked={selectedNestsLength === (nests.length === 0 ? -1 : nests.length)}
+                onSelectAllClick={onSelectAllClick}
+            >
+                <TableHead>
+                    <TableHeader name={'ID'}/>
+                    <TableHeader name={'Name'}/>
+                    <TableHeader name={'Description'}/>
 
-                                <p css={tw`text-lg text-neutral-300 text-center font-normal sm:mt-8`}>No items could be found, it&apos;s almost like they are hiding.</p>
-                            </div>
-                            :
-                            <>
-                                <div css={tw`flex flex-row items-center h-12 px-6`}>
-                                    <div css={tw`flex flex-row items-center`}>
-                                        <TableCheckbox
-                                            type={'checkbox'}
-                                            name={'selectAll'}
-                                            checked={selectedNestsLength === (nests?.length === 0 ? -1 : nests?.length)}
-                                            onChange={onSelectAllClick}
-                                        />
+                    {/* <th css={tw`px-6 py-2`}/> */}
+                </TableHead>
 
-                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" css={tw`w-4 h-4 ml-1 text-neutral-200`}>
-                                            <path clipRule="evenodd" fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/>
-                                        </svg>
-                                    </div>
+                <TableBody>
+                    {
+                        nests.map(nest => (
+                            <TableRow key={nest.id}>
+                                <td css={tw`pl-6`}>
+                                    <RowCheckbox id={nest.id}/>
+                                </td>
 
-                                    <div css={tw`flex flex-row items-center px-2 py-1 ml-auto rounded cursor-pointer bg-neutral-600`}>
-                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" css={tw`w-6 h-6 text-neutral-300`}>
-                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/>
-                                        </svg>
-
-                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" css={tw`w-4 h-4 ml-1 text-neutral-200`}>
-                                            <path clipRule="evenodd" fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/>
-                                        </svg>
-                                    </div>
-                                </div>
-
-                                <div css={tw`overflow-x-auto`}>
-                                    <table css={tw`w-full table-auto`}>
-                                        <thead css={tw`bg-neutral-900 border-t border-b border-neutral-500`}>
-                                            <tr>
-                                                <th css={tw`px-6 py-2`}/>
-
-                                                <th css={tw`px-6 py-2`}>
-                                                    <span css={tw`flex flex-row items-center cursor-pointer`}>
-                                                        <span css={tw`text-xs font-medium tracking-wider uppercase text-neutral-300 whitespace-nowrap`}>ID</span>
-
-                                                        <div css={tw`ml-1`}>
-                                                            <svg fill="none" viewBox="0 0 20 20" css={tw`w-4 h-4 text-neutral-400`}>
-                                                                <path stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" d="M13 7L10 4L7 7"/>
-                                                                <path stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" d="M7 13L10 16L13 13"/>
-                                                            </svg>
-                                                        </div>
-                                                    </span>
-                                                </th>
-
-                                                <th css={tw`px-6 py-2`}>
-                                                    <span css={tw`flex flex-row items-center cursor-pointer`}>
-                                                        <span css={tw`text-xs font-medium tracking-wider uppercase text-neutral-300 whitespace-nowrap`}>Name</span>
-
-                                                        <div css={tw`ml-1`}>
-                                                            <svg fill="none" viewBox="0 0 20 20" css={tw`w-4 h-4 text-neutral-400`}>
-                                                                <path stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" d="M13 7L10 4L7 7"/>
-                                                                <path stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" d="M7 13L10 16L13 13"/>
-                                                            </svg>
-                                                        </div>
-                                                    </span>
-                                                </th>
-
-                                                <th css={tw`px-6 py-2`}>
-                                                    <span css={tw`flex flex-row items-center cursor-pointer`}>
-                                                        <span css={tw`text-xs font-medium tracking-wider uppercase text-neutral-300 whitespace-nowrap`}>Description</span>
-
-                                                        <div css={tw`ml-1`}>
-                                                            <svg fill="none" viewBox="0 0 20 20" css={tw`w-4 h-4 text-neutral-400`}>
-                                                                <path stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" d="M13 7L10 4L7 7"/>
-                                                                <path stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" d="M7 13L10 16L13 13"/>
-                                                            </svg>
-                                                        </div>
-                                                    </span>
-                                                </th>
-
-                                                {/* <th css={tw`px-6 py-2`}/> */}
-                                            </tr>
-                                        </thead>
-
-                                        <tbody>
-                                            {
-                                                nests.map(nest => (
-                                                    <tr key={nest.id} css={tw`h-12 hover:bg-neutral-600`}>
-                                                        <td css={tw`pl-6`}>
-                                                            <RowCheckbox id={nest.id}/>
-                                                        </td>
-
-                                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{nest.id}</td>
-                                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
-                                                            <NavLink to={`${match.url}/${nest.id}`}>
-                                                                {nest.name}
-                                                            </NavLink>
-                                                        </td>
-                                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{nest.description}</td>
-                                                    </tr>
-                                                ))
-                                            }
-                                        </tbody>
-                                    </table>
-                                </div>
-
-                                <div css={tw`flex flex-row items-center w-full px-6 py-3 border-t border-neutral-500`}>
-                                    <p css={tw`text-sm leading-5 text-neutral-400`}>
-                                        Showing <span css={tw`text-neutral-300`}>1</span> to <span css={tw`text-neutral-300`}>10</span> of <span css={tw`text-neutral-300`}>97</span> results
-                                    </p>
-
-                                    <div css={tw`flex flex-row ml-auto`}>
-                                        <nav css={tw`relative z-0 inline-flex shadow-sm`}>
-                                            <a href="javascript:void(0)" css={tw`relative inline-flex items-center px-1 py-1 text-sm font-medium leading-5 transition duration-150 ease-in-out border rounded-l-md border-neutral-500 bg-neutral-600 text-neutral-400 hover:text-neutral-200 focus:z-10 focus:outline-none focus:border-primary-300 active:bg-neutral-100 active:text-neutral-500`} aria-label="Previous">
-                                                <svg css={tw`w-5 h-5`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                                    <path clipRule="evenodd" fillRule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"/>
-                                                </svg>
-                                            </a>
-
-                                            <a href="javascript:void(0)" css={tw`relative inline-flex items-center px-3 py-1 -ml-px text-sm font-normal leading-5 transition duration-150 ease-in-out border border-neutral-500 bg-neutral-500 text-neutral-50 focus:z-10 focus:outline-none focus:border-primary-300`}>
-                                                1
-                                            </a>
-
-                                            <a href="javascript:void(0)" css={tw`relative inline-flex items-center px-3 py-1 -ml-px text-sm font-normal leading-5 transition duration-150 ease-in-out border border-neutral-500 bg-neutral-600 text-neutral-200 hover:text-neutral-300 focus:z-10 focus:outline-none focus:border-primary-300 active:bg-neutral-100 active:text-neutral-700`}>
-                                                2
-                                            </a>
-
-                                            <a href="javascript:void(0)" css={tw`relative items-center hidden px-3 py-1 -ml-px text-sm font-normal leading-5 transition duration-150 ease-in-out border md:inline-flex border-neutral-500 bg-neutral-600 text-neutral-200 hover:text-neutral-300 focus:z-10 focus:outline-none focus:border-primary-300 active:bg-neutral-100 active:text-neutral-700`}>
-                                                3
-                                            </a>
-
-                                            <span css={tw`relative inline-flex items-center px-3 py-1 -ml-px text-sm font-normal leading-5 border border-neutral-500 bg-neutral-600 text-neutral-200 cursor-default`}>
-                                                ...
-                                            </span>
-
-                                            <a href="javascript:void(0)" css={tw`relative items-center hidden px-3 py-1 -ml-px text-sm font-normal leading-5 transition duration-150 ease-in-out border md:inline-flex border-neutral-500 bg-neutral-600 text-neutral-200 hover:text-neutral-300 focus:z-10 focus:outline-none focus:border-primary-300 active:bg-neutral-100 active:text-neutral-700`}>
-                                                7
-                                            </a>
-
-                                            <a href="javascript:void(0)" css={tw`relative inline-flex items-center px-3 py-1 -ml-px text-sm font-normal leading-5 transition duration-150 ease-in-out border border-neutral-500 bg-neutral-600 text-neutral-200 hover:text-neutral-300 focus:z-10 focus:outline-none focus:border-primary-300  active:bg-neutral-100 active:text-neutral-700`}>
-                                                8
-                                            </a>
-
-                                            <a href="javascript:void(0)" css={tw`relative inline-flex items-center px-3 py-1 -ml-px text-sm font-normal leading-5 transition duration-150 ease-in-out border border-neutral-500 bg-neutral-600 text-neutral-200 hover:text-neutral-300 focus:z-10 focus:outline-none focus:border-primary-300 active:bg-neutral-100 active:text-neutral-700`}>
-                                                9
-                                            </a>
-
-                                            <a href="javascript:void(0)" css={tw`relative inline-flex items-center px-1 py-1 -ml-px text-sm font-medium leading-5 transition duration-150 ease-in-out border rounded-r-md border-neutral-500 bg-neutral-600 text-neutral-400 hover:text-neutral-200 focus:z-10 focus:outline-none focus:border-primary-300 active:bg-neutral-100 active:text-neutral-500`} aria-label="Next">
-                                                <svg css={tw`w-5 h-5`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                                    <path clipRule="evenodd" fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
-                                                </svg>
-                                            </a>
-                                        </nav>
-                                    </div>
-                                </div>
-                            </>
+                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{nest.id}</td>
+                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                    <NavLink to={`${match.url}/${nest.id}`}>
+                                        {nest.name}
+                                    </NavLink>
+                                </td>
+                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{nest.description}</td>
+                            </TableRow>
+                        ))
                     }
-                </div>
-            </div>
+                </TableBody>
+            </AdminTable>
         </AdminContentBlock>
     );
 };