From c8b6f6163b9f6227ff507f5f2684df6fff88aae4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Donny/=EA=B0=95=EB=8F=99=EC=9C=A4?= <kdy1997.dev@gmail.com>
Date: Mon, 26 Aug 2024 18:34:29 +0900
Subject: [PATCH] feat(swc/plugins): Do some design work (#45)

---
 .../app/compat/range/[compatRangeId]/page.tsx | 37 ++++++++++++++-----
 1 file changed, 28 insertions(+), 9 deletions(-)

diff --git a/swc-plugins/app/compat/range/[compatRangeId]/page.tsx b/swc-plugins/app/compat/range/[compatRangeId]/page.tsx
index 9b34124..489654f 100644
--- a/swc-plugins/app/compat/range/[compatRangeId]/page.tsx
+++ b/swc-plugins/app/compat/range/[compatRangeId]/page.tsx
@@ -1,5 +1,14 @@
 "use client";
 
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import { apiClient } from "@/lib/trpc/web-client";
 
 export default function Page({
@@ -18,15 +27,25 @@ export default function Page({
         <kbd>{compatRange.to}</kbd>
       </h1>
 
-      <h2 className="text-xl font-bold">Runtimes</h2>
-      <ul>
-        {compatRange.runtimes.map((runtime) => (
-          <li key={runtime.name}>
-            <kbd>{runtime.name}</kbd>
-            <kbd>{runtime.minVersion}</kbd> - <kbd>{runtime.maxVersion}</kbd>
-          </li>
-        ))}
-      </ul>
+      <Table>
+        <TableCaption>Runtime Version Ranges</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-[200px]">Runtime</TableHead>
+            <TableHead>Minimum Version</TableHead>
+            <TableHead>Maximum Version</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {compatRange.runtimes.map((runtime) => (
+            <TableRow key={runtime.name}>
+              <TableCell className="font-medium">{runtime.name}</TableCell>
+              <TableCell>{runtime.minVersion}</TableCell>
+              <TableCell>{runtime.maxVersion}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
 
       <h2 className="text-xl font-bold">Plugins</h2>
       <ul>