feat(server-list): add server list retrieval and display functionality

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

@@ -3,13 +3,19 @@ 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]">
@@ -25,7 +31,9 @@ export default function ServerList() {
           </Text>
         </div>
 
-        <Card>nothing here</Card>
+        <Card>
+          <DataTable columns={columns} data={data} />
+        </Card>
       </div>
     </DefaultLayout>
   );