Redesign (#60)

Changes - Redesigned linked pages - Fixed client/server component usage - Added metadata to pages **Home** ![CleanShot 2024-08-28 at 13 24 23@2x](https://github.com/user-attachments/assets/6b1df778-4d31-48a9-833a-47e4710c0e06) **/versions/range** ![CleanShot 2024-08-28 at 13 24 56@2x](https://github.com/user-attachments/assets/f4fe42f2-96c3-4aa4-809f-5df42484bd4a) **/versions/range/16** ![CleanShot 2024-08-28 at 13 24 36@2x](https://github.com/user-attachments/assets/225c9f82-8429-41ea-8c12-e32785d56d02) --------- Co-authored-by: 강동윤 (Donny) <kdy1997.dev@gmail.com>
dudykr · Aug 29, 2024 · fb4a654 · fb4a654
1 parent 7146983
commit fb4a654
Show file tree

Hide file tree

Showing 16 changed files with 654 additions and 222 deletions.
diff --git a/apps/swc-plugins/app/(home)/page.tsx b/apps/swc-plugins/app/(home)/page.tsx
@@ -1,83 +1,33 @@
-"use client";
-
-import { useState } from "react";
-
+import { Logo } from "@/components/logo";
+import { RuntimeVersionSelector } from "@/components/runtime-version-selector";
 import { Button } from "@/components/ui/button";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { apiClient } from "@/lib/trpc/web-client";
+import { Metadata } from "next";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
-
-export default function Home() {
-  const [runtimes] = apiClient.runtime.list.useSuspenseQuery();
-
-  const [selectedRuntime, setSelectedRuntime] = useState<bigint>();
-
-  return (
-    <div className="flex w-full max-w-md flex-col space-y-4">
-      <div className="flex space-x-4">
-        <Select onValueChange={(e) => setSelectedRuntime(BigInt(e))}>
-          <SelectTrigger className="w-[180px]">
-            <SelectValue placeholder="Select runtime" />
-          </SelectTrigger>
-          <SelectContent>
-            {runtimes.map((runtime) => (
-              <SelectItem
-                key={runtime.id.toString()}
-                value={runtime.id.toString()}
-              >
-                {runtime.name}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-
-        {selectedRuntime && <VersionSelector runtimeId={selectedRuntime} />}
-      </div>
-      <div className="flex justify-center">
-        <Link href={`/versions/range`} passHref>
-          <Button
-            variant="secondary"
-            size="default"
-            className="whitespace-nowrap"
-          >
-            See all versions
-          </Button>
-        </Link>
+import { FC } from "react";
+
+export const metadata: Metadata = {
+  title: "SWC Plugins",
+  description: "A collection of SWC plugins, ready to use in your project.",
+};
+
+const Home: FC = () => (
+  <main className="flex h-screen w-full flex-col items-center justify-center align-middle">
+    <div className="flex flex-col items-center gap-8">
+      <Logo />
+      <div className="flex flex-col gap-2">
+        <h1 className="max-w-[330px] text-center text-3xl font-bold leading-tight tracking-tighter md:min-w-[540px] md:text-4xl lg:leading-[1.1]">
+          SWC Plugins
+        </h1>
+        <p className="text-muted-foreground max-w-[750px] text-center text-lg">
+          A collection of SWC plugins, ready to use in your project.
+        </p>
       </div>
+      <RuntimeVersionSelector />
+      <Button variant="link" asChild>
+        <Link href="/versions/range">or see all versions</Link>
+      </Button>
     </div>
-  );
-}
-
-function VersionSelector({ runtimeId }: { runtimeId: bigint }) {
-  const router = useRouter();
-  const versions = apiClient.runtime.listVersions.useQuery({
-    runtimeId,
-  });
+  </main>
+);
 
-  return (
-    <Select
-      onValueChange={(e) => {
-        const selected = versions.data?.find((v) => v.version === e);
-        router.push(`/versions/range/${selected?.compatRangeId}`);
-      }}
-    >
-      <SelectTrigger className="w-[120px]">
-        <SelectValue placeholder="Version" />
-      </SelectTrigger>
-      <SelectContent>
-        {versions.data?.map((version) => (
-          <SelectItem key={version.version} value={version.version}>
-            {version.version}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  );
-}
+export default Home;
diff --git a/apps/swc-plugins/app/layout.tsx b/apps/swc-plugins/app/layout.tsx
@@ -1,42 +1,27 @@
 import { Dynamic } from "@/components/dynamic";
 import { Toaster } from "@/components/ui/toaster";
+import { fontBody, fontHeading } from "@/lib/fonts";
 import { cn } from "@/lib/utils";
 import { SessionProvider } from "next-auth/react";
-import { Manrope } from "next/font/google";
 import NextTopLoader from "nextjs-toploader";
-import { PropsWithChildren } from "react";
+import { FC, PropsWithChildren } from "react";
 import { ClientProviders } from "./client-providers";
 import "./globals.css";
 
-const fontHeading = Manrope({
-  subsets: ["latin"],
-  display: "swap",
-  variable: "--font-heading",
-});
+const RootLayout: FC<PropsWithChildren> = ({ children }) => (
+  <html lang="en">
+    <body
+      className={cn("antialiased", fontHeading.variable, fontBody.variable)}
+    >
+      <NextTopLoader color={"var(--colors-primary)"} />
+      <SessionProvider>
+        <ClientProviders>
+          <Dynamic>{children}</Dynamic>
+        </ClientProviders>
+      </SessionProvider>
+      <Toaster />
+    </body>
+  </html>
+);
 
-const fontBody = Manrope({
-  subsets: ["latin"],
-  display: "swap",
-  variable: "--font-body",
-});
-
-export default function RootLayout({ children }: PropsWithChildren) {
-  return (
-    <html lang={"en"}>
-      <body
-        className={cn("antialiased", fontHeading.variable, fontBody.variable)}
-      >
-        <NextTopLoader color={"var(--colors-primary)"} />
-
-        <SessionProvider>
-          <ClientProviders>
-            <main className="flex h-screen w-full flex-col items-center justify-center align-middle">
-              <Dynamic>{children}</Dynamic>
-            </main>
-          </ClientProviders>
-        </SessionProvider>
-        <Toaster />
-      </body>
-    </html>
-  );
-}
+export default RootLayout;
diff --git a/apps/swc-plugins/app/versions/layout.tsx b/apps/swc-plugins/app/versions/layout.tsx
@@ -0,0 +1,28 @@
+import Link from "next/link";
+import { FC, ReactNode } from "react";
+import { Logo } from "../../components/logo";
+import { RuntimeVersionSelector } from "../../components/runtime-version-selector";
+
+type ResultsLayoutProps = {
+  children: ReactNode;
+};
+
+const ResultsLayout: FC<ResultsLayoutProps> = ({ children }) => {
+  return (
+    <>
+      <nav className="bg-background/90 sticky top-0 z-50 border-b px-4 py-2 backdrop-blur-md">
+        <div className="container flex items-center justify-between">
+          <Link href="/">
+            <Logo className="h-5" />
+          </Link>
+          <div>
+            <RuntimeVersionSelector />
+          </div>
+        </div>
+      </nav>
+      <div className="container py-8">{children}</div>
+    </>
+  );
+};
+
+export default ResultsLayout;
diff --git a/apps/swc-plugins/app/versions/range/[compatRangeId]/components/compat-range-header.tsx b/apps/swc-plugins/app/versions/range/[compatRangeId]/components/compat-range-header.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { Checkbox } from "@/components/ui/checkbox";
+import { apiClient } from "@/lib/trpc/web-client";
+import { parseAsBoolean, useQueryState } from "next-usequerystate";
+import { FC } from "react";
+
+type CompatRangeHeaderProps = {
+  compatRangeId: string;
+};
+
+export const CompatRangeHeader: FC<CompatRangeHeaderProps> = ({
+  compatRangeId,
+}) => {
+  const [includePrerelease, setIncludePrerelease] = useQueryState(
+    "includePrerelease",
+    parseAsBoolean.withDefault(false)
+  );
+  const [compatRange] = apiClient.compatRange.get.useSuspenseQuery({
+    id: BigInt(compatRangeId),
+    includePrerelease,
+  });
+
+  const handleCheckedChange = (checked: boolean) => {
+    setIncludePrerelease(checked);
+  };
+
+  return (
+    <div className="flex flex-row justify-between">
+      <h1 className="mr-10 flex flex-col font-mono text-2xl font-bold">
+        <p>swc_core</p>
+        <span className="text-sm">
+          @<span className="font-mono">{compatRange.from}</span> -{" "}
+          <span className="font-mono">{compatRange.to}</span>
+        </span>
+      </h1>
+
+      <div className="flex flex-row items-center gap-2 text-sm font-medium">
+        <Checkbox
+          checked={includePrerelease}
+          onCheckedChange={handleCheckedChange}
+        />
+        <label>Include Prerelease</label>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/swc-plugins/app/versions/range/[compatRangeId]/components/compat-range-tables.tsx b/apps/swc-plugins/app/versions/range/[compatRangeId]/components/compat-range-tables.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { TableContainer } from "@/components/table-container";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { apiClient } from "@/lib/trpc/web-client";
+import { parseAsBoolean, useQueryState } from "next-usequerystate";
+import { FC } from "react";
+
+type CompatRangeTablesProps = {
+  compatRangeId: string;
+};
+
+export const CompatRangeTables: FC<CompatRangeTablesProps> = ({
+  compatRangeId,
+}) => {
+  const [includePrerelease] = useQueryState(
+    "includePrerelease",
+    parseAsBoolean.withDefault(false)
+  );
+  const [compatRange] = apiClient.compatRange.get.useSuspenseQuery({
+    id: BigInt(compatRangeId),
+    includePrerelease,
+  });
+
+  return (
+    <>
+      <TableContainer title="Runtime Version Ranges">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Runtime</TableHead>
+              <TableHead className="w-[200px]">Minimum Version</TableHead>
+              <TableHead className="w-[200px]">Maximum Version</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {compatRange.runtimes.map((runtime) => (
+              <TableRow key={runtime.name}>
+                <TableCell className="font-medium">{runtime.name}</TableCell>
+                <TableCell className="w-[200px]">
+                  {runtime.minVersion}
+                </TableCell>
+                <TableCell className="w-[200px]">
+                  {runtime.maxVersion}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+
+      <TableContainer title="Compatible Plugins">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Plugin</TableHead>
+              <TableHead className="w-[200px]">Minimum Version</TableHead>
+              <TableHead className="w-[200px]">Maximum Version</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {compatRange.plugins.map((plugin) => (
+              <TableRow key={plugin.name}>
+                <TableCell className="font-medium">{plugin.name}</TableCell>
+                <TableCell className="w-[200px]">{plugin.minVersion}</TableCell>
+                <TableCell className="w-[200px]">{plugin.maxVersion}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </>
+  );
+};