freezer/mareshq-internal-static-sites
Archived
1
0
Fork 0
Code Activity

refactor(infra.mareshq.com): put tables into component and add horizontal overflow

Browse source
This commit is contained in:
Vojtěch Mareš 2022-08-22 09:43:01 +02:00
parent f1d73a22a2
commit fa96a47bdf
Signed by: vojtech.mares
GPG key ID: C6827B976F17240D
2 changed files with 82 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

126
sites/infra.mareshq.com/pages/index.tsx
View file

@ -2,6 +2,7 @@ import type { NextPage } from 'next';
import Head from 'next/head'; import Head from 'next/head';
import Layout from '@themes/infra/components/Layout'; import Layout from '@themes/infra/components/Layout';
import Link from '@themes/signpost/components/Link'; import Link from '@themes/signpost/components/Link';
import Table from '@themes/infra/components/Table';
import links from '../content/links.json'; import links from '../content/links.json';
import dedicatedServers from '../content/dedicated-servers.json'; import dedicatedServers from '../content/dedicated-servers.json';
import virtualServers from '../content/virtual-servers.json'; import virtualServers from '../content/virtual-servers.json';
@ -27,11 +28,11 @@ const Home: NextPage = () => {
<h1 className="font-sans font-bold text-4xl"> <h1 className="font-sans font-bold text-4xl">
MaresHQ Infrastructure MaresHQ Infrastructure
</h1> </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="col-span-3">
<div className="mt-4"> <div className="mt-4">
<h2 className="text-3xl font-bold">links</h2> <h2 className="text-3xl font-bold">links</h2>
<ul> <ul className="px-2 py-1">
{links.map((l) => ( {links.map((l) => (
<li key={l.name} className="my-2"> <li key={l.name} className="my-2">
<Link title={l.name} url={l.url} /> <Link title={l.name} url={l.url} />
@ -40,118 +41,109 @@ const Home: NextPage = () => {
</ul> </ul>
</div> </div>
</div> </div>
<div className="col-span-9"> <div className="col-span-9 overflow-x-hidden">
<div className="mt-4"> <div className="mt-4">
<h2 className="text-3xl font-bold"> <h2 className="text-3xl font-bold">
virtual servers virtual servers
</h2> </h2>
<table className="table-fixed w-full"> <Table
<thead className="text-left"> columnNames={[
<tr> 'name',
<th>name</th> 'provider',
<th>provider</th> 'zone',
<th>zone</th> 'ip',
<th>ip</th> 'belongs to',
<th>belongs to</th> ]}
</tr> >
</thead>
<tbody> <tbody>
{virtualServers.map((vs) => ( {virtualServers.map((vs) => (
<tr key={vs.name}> <tr key={vs.name}>
<td>{vs.name}</td> <td className="py-1 px-2">{vs.name}</td>
<td>{vs.provider}</td> <td className="py-1 px-2">{vs.provider}</td>
<td>{vs.zone}</td> <td className="py-1 px-2">{vs.zone}</td>
<td> <td className="py-1 px-2">
<code>{vs.ip}</code> <code>{vs.ip}</code>
</td> </td>
<td>{vs.belongsTo}</td> <td className="py-1 px-2">{vs.belongsTo}</td>
</tr> </tr>
))} ))}
</tbody> </tbody>
</table> </Table>
</div> </div>
<div className="mt-4"> <div className="mt-4">
<h2 className="text-3xl font-bold"> <h2 className="text-3xl font-bold">
dedicated servers dedicated servers
</h2> </h2>
<table className="table-fixed w-full"> <Table
<thead className="text-left"> columnNames={[
<tr> 'name',
<th>name</th> 'provider',
<th>provider</th> 'zone',
<th>zone</th> 'ip',
<th>ip</th> 'belongs to',
<th>belongs to</th> ]}
</tr> >
</thead>
<tbody> <tbody>
{dedicatedServers.map((ds) => ( {dedicatedServers.map((ds) => (
<tr key={ds.name}> <tr key={ds.name}>
<td>{ds.name}</td> <td className="py-1 px-2">{ds.name}</td>
<td>{ds.provider}</td> <td className="py-1 px-2">{ds.provider}</td>
<td>{ds.zone}</td> <td className="py-1 px-2">{ds.zone}</td>
<td> <td className="py-1 px-2">
<code>{ds.ip}</code> <code>{ds.ip}</code>
</td> </td>
<td>{ds.belongsTo}</td> <td className="py-1 px-2">{ds.belongsTo}</td>
</tr> </tr>
))} ))}
</tbody> </tbody>
</table> </Table>
</div> </div>
<div className="mt-4"> <div className="mt-4">
<h2 className="text-3xl font-bold">load balancers</h2> <h2 className="text-3xl font-bold">load balancers</h2>
<table className="table-fixed w-full"> <Table
<thead className="text-left"> columnNames={[
<tr> 'name',
<th>name</th> 'provider',
<th>provider</th> 'zone',
<th>zone</th> 'ip',
<th>ip</th> 'belongs to',
<th>belongs to</th> ]}
</tr> >
</thead>
<tbody> <tbody>
{loadbalancers.map((lb) => ( {loadbalancers.map((lb) => (
<tr key={lb.name}> <tr key={lb.name}>
<td>{lb.name}</td> <td className="py-1 px-2">{lb.name}</td>
<td>{lb.provider}</td> <td className="py-1 px-2">{lb.provider}</td>
<td>{lb.zone}</td> <td className="py-1 px-2">{lb.zone}</td>
<td> <td className="py-1 px-2">
<code>{lb.ip}</code> <code>{lb.ip}</code>
</td> </td>
<td>{lb.belongsTo}</td> <td className="py-1 px-2">{lb.belongsTo}</td>
</tr> </tr>
))} ))}
</tbody> </tbody>
</table> </Table>
</div> </div>
<div className="mt-4"> <div className="mt-4">
<h2 className="text-3xl font-bold"> <h2 className="text-3xl font-bold">
kubernetes clusters kubernetes clusters
</h2> </h2>
<table className="table-fixed w-full"> <Table
<thead className="text-left"> columnNames={['name', 'provider', 'zone', 'url']}
<tr> >
<th>name</th>
<th>provider</th>
<th>zone</th>
<th>url</th>
<th></th>
</tr>
</thead>
<tbody> <tbody>
{kubernetes.map((k8s) => ( {kubernetes.map((k8s) => (
<tr key={k8s.name}> <tr key={k8s.name}>
<td>{k8s.name}</td> <td className="py-1 px-2">{k8s.name}</td>
<td>{k8s.provider}</td> <td className="py-1 px-2">{k8s.provider}</td>
<td>{k8s.zone}</td> <td className="py-1 px-2">{k8s.zone}</td>
<td>{k8s.url}</td> <td className="py-1 px-2">
<td></td> <code>{k8s.url}</code>
</td>
</tr> </tr>
))} ))}
</tbody> </tbody>
</table> </Table>
</div> </div>
</div> </div>
</div> </div>

23
themes/infra/components/Table.tsx Normal file
View file

@ -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;