chore: migrate from tailwind to mantine

apps/nextjs/src/app/_components/auth-showcase.tsx

@@ -1,39 +0,0 @@
-import { auth, signIn, signOut } from "@acme/auth";
-
-export async function AuthShowcase() {
-  const session = await auth();
-
-  if (!session) {
-    return (
-      <form
-        action={async () => {
-          "use server";
-          await signIn("discord");
-        }}
-      >
-        <button className="rounded-full bg-white/10 px-10 py-3 font-semibold no-underline transition hover:bg-white/20">
-          Sign in with Discord
-        </button>
-      </form>
-    );
-  }
-
-  return (
-    <div className="flex flex-col items-center justify-center gap-4">
-      <p className="text-center text-2xl text-white">
-        {session && <span>Logged in as {session.user.name}</span>}
-      </p>
-
-      <form
-        action={async () => {
-          "use server";
-          await signOut();
-        }}
-      >
-        <button className="rounded-full bg-white/10 px-10 py-3 font-semibold no-underline transition hover:bg-white/20">
-          Sign out
-        </button>
-      </form>
-    </div>
-  );
-}

apps/nextjs/src/app/_components/posts.tsx

@@ -1,148 +0,0 @@
-"use client";
-
-import { useState } from "react";
-
-import { api } from "~/utils/api";
-import type { RouterOutputs } from "~/utils/api";
-
-export function CreatePostForm() {
-  const context = api.useContext();
-
-  const [title, setTitle] = useState("");
-  const [content, setContent] = useState("");
-
-  const { mutateAsync: createPost, error } = api.post.create.useMutation({
-    async onSuccess() {
-      setTitle("");
-      setContent("");
-      await context.post.all.invalidate();
-    },
-  });
-
-  return (
-    <form
-      className="flex w-full max-w-2xl flex-col"
-      onSubmit={async (e) => {
-        e.preventDefault();
-        try {
-          await createPost({
-            title,
-            content,
-          });
-          setTitle("");
-          setContent("");
-          await context.post.all.invalidate();
-        } catch {
-          // noop
-        }
-      }}
-    >
-      <input
-        className="mb-2 rounded bg-white/10 p-2 text-white"
-        value={title}
-        onChange={(e) => setTitle(e.target.value)}
-        placeholder="Title"
-      />
-      {error?.data?.zodError?.fieldErrors.title && (
-        <span className="mb-2 text-red-500">
-          {error.data.zodError.fieldErrors.title}
-        </span>
-      )}
-      <input
-        className="mb-2 rounded bg-white/10 p-2 text-white"
-        value={content}
-        onChange={(e) => setContent(e.target.value)}
-        placeholder="Content"
-      />
-      {error?.data?.zodError?.fieldErrors.content && (
-        <span className="mb-2 text-red-500">
-          {error.data.zodError.fieldErrors.content}
-        </span>
-      )}
-      {}
-      <button type="submit" className="rounded bg-pink-400 p-2 font-bold">
-        Create
-      </button>
-      {error?.data?.code === "UNAUTHORIZED" && (
-        <span className="mt-2 text-red-500">You must be logged in to post</span>
-      )}
-    </form>
-  );
-}
-
-export function PostList() {
-  const [posts] = api.post.all.useSuspenseQuery();
-
-  if (posts.length === 0) {
-    return (
-      <div className="relative flex w-full flex-col gap-4">
-        <PostCardSkeleton pulse={false} />
-        <PostCardSkeleton pulse={false} />
-        <PostCardSkeleton pulse={false} />
-
-        <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/10">
-          <p className="text-2xl font-bold text-white">No posts yet</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex w-full flex-col gap-4">
-      {posts.map((p) => {
-        return <PostCard key={p.id} post={p} />;
-      })}
-    </div>
-  );
-}
-
-export function PostCard(props: {
-  post: RouterOutputs["post"]["all"][number];
-}) {
-  const context = api.useContext();
-  const deletePost = api.post.delete.useMutation();
-
-  return (
-    <div className="flex flex-row rounded-lg bg-white/10 p-4 transition-all hover:scale-[101%]">
-      <div className="flex-grow">
-        <h2 className="text-2xl font-bold text-pink-400">{props.post.title}</h2>
-        <p className="mt-2 text-sm">{props.post.content}</p>
-      </div>
-      <div>
-        <button
-          className="cursor-pointer text-sm font-bold uppercase text-pink-400"
-          onClick={async () => {
-            await deletePost.mutateAsync(props.post.id);
-            await context.post.all.invalidate();
-          }}
-        >
-          Delete
-        </button>
-      </div>
-    </div>
-  );
-}
-
-export function PostCardSkeleton(props: { pulse?: boolean }) {
-  const { pulse = true } = props;
-  return (
-    <div className="flex flex-row rounded-lg bg-white/10 p-4 transition-all hover:scale-[101%]">
-      <div className="flex-grow">
-        <h2
-          className={`w-1/4 rounded bg-pink-400 text-2xl font-bold ${
-            pulse && "animate-pulse"
-          }`}
-        >
-          &nbsp;
-        </h2>
-        <p
-          className={`mt-2 w-1/3 rounded bg-current text-sm ${
-            pulse && "animate-pulse"
-          }`}
-        >
-          &nbsp;
-        </p>
-      </div>
-    </div>
-  );
-}

apps/nextjs/src/app/layout.tsx

@@ -1,8 +1,11 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 
-import "~/styles/globals.css";
+import '@mantine/core/styles.css';
+import '@mantine/dates/styles.css';
+import '@mantine/notifications/styles.css';
 
+import { MantineProvider, ColorSchemeScript } from '@mantine/core';
 import { headers } from "next/headers";
 
 import { TRPCReactProvider } from "./providers";
@@ -22,25 +25,17 @@ export const dynamic = "force-dynamic";
 export const metadata: Metadata = {
   title: "Create T3 Turbo",
   description: "Simple monorepo with shared backend for web & mobile apps",
-  openGraph: {
-    title: "Create T3 Turbo",
-    description: "Simple monorepo with shared backend for web & mobile apps",
-    url: "https://create-t3-turbo.vercel.app",
-    siteName: "Create T3 Turbo",
-  },
-  twitter: {
-    card: "summary_large_image",
-    site: "@jullerino",
-    creator: "@jullerino",
-  },
 };
 
 export default function Layout(props: { children: React.ReactNode }) {
   return (
     <html lang="en">
+      <head>
+        <ColorSchemeScript />
+      </head>
       <body className={["font-sans", fontSans.variable].join(" ")}>
         <TRPCReactProvider headers={headers()}>
-          {props.children}
+          <MantineProvider>{props.children}</MantineProvider>
         </TRPCReactProvider>
       </body>
     </html>

apps/nextjs/src/app/page.tsx

@@ -1,38 +1,7 @@
-import { Suspense } from "react";
-
-import { AuthShowcase } from "./_components/auth-showcase";
-import {
-  CreatePostForm,
-  PostCardSkeleton,
-  PostList,
-} from "./_components/posts";
-
-export const runtime = "edge";
+import { Title } from "@mantine/core";
 
 export default function HomePage() {
   return (
-    <main className="flex h-screen flex-col items-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
-      <div className="container mt-12 flex flex-col items-center justify-center gap-4 py-8">
-        <h1 className="text-5xl font-extrabold tracking-tight sm:text-[5rem]">
-          Create <span className="text-pink-400">T3</span> Turbo
-        </h1>
-        <AuthShowcase />
-
-        <CreatePostForm />
-        <div className="h-[40vh] w-full max-w-2xl overflow-y-scroll">
-          <Suspense
-            fallback={
-              <div className="flex w-full flex-col gap-4">
-                <PostCardSkeleton />
-                <PostCardSkeleton />
-                <PostCardSkeleton />
-              </div>
-            }
-          >
-            <PostList />
-          </Suspense>
-        </div>
-      </div>
-    </main>
+    <Title>Home</Title>
   );
 }