From fa96a47bdf31344bfcb3f8498b0f66e6627ccfff Mon Sep 17 00:00:00 2001
From: Vojtech Mares <iam@vojtechmares.com>
Date: Mon, 22 Aug 2022 09:43:01 +0200
Subject: [PATCH] refactor(infra.mareshq.com): put tables into component and
 add horizontal overflow

---
 sites/infra.mareshq.com/pages/index.tsx | 126 +++++++++++-------------
 themes/infra/components/Table.tsx       |  23 +++++
 2 files changed, 82 insertions(+), 67 deletions(-)
 create mode 100644 themes/infra/components/Table.tsx

diff --git a/sites/infra.mareshq.com/pages/index.tsx b/sites/infra.mareshq.com/pages/index.tsx
index 96bef08..af87b9d 100644
--- a/sites/infra.mareshq.com/pages/index.tsx
+++ b/sites/infra.mareshq.com/pages/index.tsx
@@ -2,6 +2,7 @@ import type { NextPage } from 'next';
 import Head from 'next/head';
 import Layout from '@themes/infra/components/Layout';
 import Link from '@themes/signpost/components/Link';
+import Table from '@themes/infra/components/Table';
 import links from '../content/links.json';
 import dedicatedServers from '../content/dedicated-servers.json';
 import virtualServers from '../content/virtual-servers.json';
@@ -27,11 +28,11 @@ const Home: NextPage = () => {
           <h1 className="font-sans font-bold text-4xl">
             MaresHQ Infrastructure
           </h1>
-          <div className="grid grid-cols-12 gap-4">
+          <div className="grid lg:grid-cols-12 grid-cols-1 gap-4">
             <div className="col-span-3">
               <div className="mt-4">
                 <h2 className="text-3xl font-bold">links</h2>
-                <ul>
+                <ul className="px-2 py-1">
                   {links.map((l) => (
                     <li key={l.name} className="my-2">
                       <Link title={l.name} url={l.url} />
@@ -40,118 +41,109 @@ const Home: NextPage = () => {
                 </ul>
               </div>
             </div>
-            <div className="col-span-9">
+            <div className="col-span-9 overflow-x-hidden">
               <div className="mt-4">
                 <h2 className="text-3xl font-bold">
                   virtual servers
                 </h2>
-                <table className="table-fixed w-full">
-                  <thead className="text-left">
-                    <tr>
-                      <th>name</th>
-                      <th>provider</th>
-                      <th>zone</th>
-                      <th>ip</th>
-                      <th>belongs to</th>
-                    </tr>
-                  </thead>
+                <Table
+                  columnNames={[
+                    'name',
+                    'provider',
+                    'zone',
+                    'ip',
+                    'belongs to',
+                  ]}
+                >
                   <tbody>
                     {virtualServers.map((vs) => (
                       <tr key={vs.name}>
-                        <td>{vs.name}</td>
-                        <td>{vs.provider}</td>
-                        <td>{vs.zone}</td>
-                        <td>
+                        <td className="py-1 px-2">{vs.name}</td>
+                        <td className="py-1 px-2">{vs.provider}</td>
+                        <td className="py-1 px-2">{vs.zone}</td>
+                        <td className="py-1 px-2">
                           <code>{vs.ip}</code>
                         </td>
-                        <td>{vs.belongsTo}</td>
+                        <td className="py-1 px-2">{vs.belongsTo}</td>
                       </tr>
                     ))}
                   </tbody>
-                </table>
+                </Table>
               </div>
               <div className="mt-4">
                 <h2 className="text-3xl font-bold">
                   dedicated servers
                 </h2>
-                <table className="table-fixed w-full">
-                  <thead className="text-left">
-                    <tr>
-                      <th>name</th>
-                      <th>provider</th>
-                      <th>zone</th>
-                      <th>ip</th>
-                      <th>belongs to</th>
-                    </tr>
-                  </thead>
+                <Table
+                  columnNames={[
+                    'name',
+                    'provider',
+                    'zone',
+                    'ip',
+                    'belongs to',
+                  ]}
+                >
                   <tbody>
                     {dedicatedServers.map((ds) => (
                       <tr key={ds.name}>
-                        <td>{ds.name}</td>
-                        <td>{ds.provider}</td>
-                        <td>{ds.zone}</td>
-                        <td>
+                        <td className="py-1 px-2">{ds.name}</td>
+                        <td className="py-1 px-2">{ds.provider}</td>
+                        <td className="py-1 px-2">{ds.zone}</td>
+                        <td className="py-1 px-2">
                           <code>{ds.ip}</code>
                         </td>
-                        <td>{ds.belongsTo}</td>
+                        <td className="py-1 px-2">{ds.belongsTo}</td>
                       </tr>
                     ))}
                   </tbody>
-                </table>
+                </Table>
               </div>
               <div className="mt-4">
                 <h2 className="text-3xl font-bold">load balancers</h2>
-                <table className="table-fixed w-full">
-                  <thead className="text-left">
-                    <tr>
-                      <th>name</th>
-                      <th>provider</th>
-                      <th>zone</th>
-                      <th>ip</th>
-                      <th>belongs to</th>
-                    </tr>
-                  </thead>
+                <Table
+                  columnNames={[
+                    'name',
+                    'provider',
+                    'zone',
+                    'ip',
+                    'belongs to',
+                  ]}
+                >
                   <tbody>
                     {loadbalancers.map((lb) => (
                       <tr key={lb.name}>
-                        <td>{lb.name}</td>
-                        <td>{lb.provider}</td>
-                        <td>{lb.zone}</td>
-                        <td>
+                        <td className="py-1 px-2">{lb.name}</td>
+                        <td className="py-1 px-2">{lb.provider}</td>
+                        <td className="py-1 px-2">{lb.zone}</td>
+                        <td className="py-1 px-2">
                           <code>{lb.ip}</code>
                         </td>
-                        <td>{lb.belongsTo}</td>
+                        <td className="py-1 px-2">{lb.belongsTo}</td>
                       </tr>
                     ))}
                   </tbody>
-                </table>
+                </Table>
               </div>
               <div className="mt-4">
                 <h2 className="text-3xl font-bold">
                   kubernetes clusters
                 </h2>
-                <table className="table-fixed w-full">
-                  <thead className="text-left">
-                    <tr>
-                      <th>name</th>
-                      <th>provider</th>
-                      <th>zone</th>
-                      <th>url</th>
-                      <th></th>
-                    </tr>
-                  </thead>
+                <Table
+                  columnNames={['name', 'provider', 'zone', 'url']}
+                >
                   <tbody>
                     {kubernetes.map((k8s) => (
                       <tr key={k8s.name}>
-                        <td>{k8s.name}</td>
-                        <td>{k8s.provider}</td>
-                        <td>{k8s.zone}</td>
-                        <td>{k8s.url}</td>
-                        <td></td>
+                        <td className="py-1 px-2">{k8s.name}</td>
+                        <td className="py-1 px-2">{k8s.provider}</td>
+                        <td className="py-1 px-2">{k8s.zone}</td>
+                        <td className="py-1 px-2">
+                          <code>{k8s.url}</code>
+                        </td>
                       </tr>
                     ))}
                   </tbody>
-                </table>
+                </Table>
               </div>
             </div>
           </div>
diff --git a/themes/infra/components/Table.tsx b/themes/infra/components/Table.tsx
new file mode 100644
index 0000000..93e873f
--- /dev/null
+++ b/themes/infra/components/Table.tsx
@@ -0,0 +1,23 @@
+import { ReactNode, FunctionComponent } from 'react';
+
+type Props = {
+  columnNames: string[];
+  children?: ReactNode;
+};
+
+const Table = ({ columnNames, children }: Props) => (
+  <div className="overflow-x-auto">
+    <table className="table-fixed min-w-full">
+      <thead className="text-left">
+        <tr>
+          {columnNames.map((cn) => (
+            <th className="py-1 px-2">{cn}</th>
+          ))}
+        </tr>
+      </thead>
+      {children}
+    </table>
+  </div>
+);
+
+export default Table;