feat(app): add server list page

src/app/server-list/actions.ts

@@ -0,0 +1,5 @@
+'use server';
+import { db } from '@/db/db';
+import { servers } from '@/db/schema/servers';
+
+export const getServerList = () => db.select().from(servers).all();

src/app/server-list/columns.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import type { ColumnDef } from '@tanstack/react-table';
+import { Icon } from '@/components/icon';
+import { Text } from '@/components/text';
+import { DataTableColumnHeader } from '@/components/dataTableColumnHeader';
+
+import { cn } from '@/utils/cn';
+
+import type { Server } from '@/db/schema/servers';
+
+export const columns: ColumnDef<Server>[] = [
+  {
+    accessorKey: 'name',
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Country name" />
+    ),
+    cell: ({ row }) => {
+      const countryCode = row.original.countryCode;
+      const name: Server['name'] = row.getValue('name');
+
+      return (
+        <div className="flex items-center gap-4">
+          {countryCode && (
+            <Icon
+              id={`flag-${countryCode}`.toLowerCase()}
+              sprite="/svg-sprites/flags.svg"
+              className="h-auto w-8 border border-gray-200"
+            />
+          )}
+          <Text weight="medium" asChild className={cn(!countryCode && 'pl-12')}>
+            <span>{name}</span>
+          </Text>
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: 'distance',
+    cell: ({ row }) => {
+      const value: number = row.getValue('distance');
+      return (
+        <Text weight="medium" className="md:text-semibold" asChild>
+          <span>{value} km</span>
+        </Text>
+      );
+    },
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title="Distance"
+        className="justify-end"
+      />
+    ),
+    meta: {
+      style: {
+        textAlign: 'right',
+      },
+    },
+  },
+];

src/app/server-list/page.tsx

@@ -0,0 +1,40 @@
+import type { Metadata } from 'next';
+import { DefaultLayout } from '@/layouts/default';
+import { Heading } from '@/components/heading';
+import { Text } from '@/components/text';
+import { Card } from '@/components/card';
+import { DataTable } from '@/components/dataTable';
+
+import { getServerList } from './actions';
+import { columns } from './columns';
+
+export const metadata: Metadata = {
+  title: 'Server list',
+  description: 'The distance between you and the server',
+};
+
+export default function ServerList() {
+  const data = getServerList();
+
+  return (
+    <DefaultLayout>
+      <div className="mx-auto w-full max-w-2xl px-6 py-[70px]">
+        <div className="space-y-4 pb-8 text-center md:pb-10">
+          <Heading
+            level="1"
+            className="text-center text-lg tracking-tight md:text-2xl md:tracking-tightest"
+          >
+            Server list
+          </Heading>
+          <Text className="text-sm md:text-base">
+            The distance between you and the server
+          </Text>
+        </div>
+
+        <Card>
+          <DataTable columns={columns} data={data} />
+        </Card>
+      </div>
+    </DefaultLayout>
+  );
+}