remove styles from t3 app

axiomhq · Nov 15, 2023 · 8430622 · 8430622
1 parent 5f11afc
commit 8430622
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 70 deletions.
diff --git a/examples/trpc/src/app/_components/create-post.tsx b/examples/trpc/src/app/_components/create-post.tsx
@@ -1,19 +1,18 @@
-"use client";
+'use client';
 
-import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 
-import { api } from "~/trpc/react";
-import styles from "../index.module.css";
+import { api } from '~/trpc/react';
 
 export function CreatePost() {
   const router = useRouter();
-  const [name, setName] = useState("");
+  const [name, setName] = useState('');
 
   const createPost = api.post.create.useMutation({
     onSuccess: () => {
       router.refresh();
-      setName("");
+      setName('');
     },
   });
 
@@ -23,21 +22,10 @@ export function CreatePost() {
         e.preventDefault();
         createPost.mutate({ name });
       }}
-      className={styles.form}
     >
-      <input
-        type="text"
-        placeholder="Title"
-        value={name}
-        onChange={(e) => setName(e.target.value)}
-        className={styles.input}
-      />
-      <button
-        type="submit"
-        className={styles.submitButton}
-        disabled={createPost.isLoading}
-      >
-        {createPost.isLoading ? "Submitting..." : "Submit"}
+      <input type="text" placeholder="Title" value={name} onChange={(e) => setName(e.target.value)} />
+      <button type="submit" disabled={createPost.isLoading}>
+        {createPost.isLoading ? 'Submitting...' : 'Submit'}
       </button>
     </form>
   );

diff --git a/examples/trpc/src/app/page.tsx b/examples/trpc/src/app/page.tsx
@@ -1,50 +1,16 @@
-import Link from "next/link";
+import Link from 'next/link';
 
-import { CreatePost } from "~/app/_components/create-post";
-import { api } from "~/trpc/server";
-import styles from "./index.module.css";
+import { CreatePost } from '~/app/_components/create-post';
+import { api } from '~/trpc/server';
 
 export default async function Home() {
-  const hello = await api.post.hello.query({ text: "from tRPC" });
+  const hello = await api.post.hello.query({ text: 'from tRPC' });
 
   return (
-    <main className={styles.main}>
-      <div className={styles.container}>
-        <h1 className={styles.title}>
-          Create <span className={styles.pinkSpan}>T3</span> App
-        </h1>
-        <div className={styles.cardRow}>
-          <Link
-            className={styles.card}
-            href="https://create.t3.gg/en/usage/first-steps"
-            target="_blank"
-          >
-            <h3 className={styles.cardTitle}>First Steps →</h3>
-            <div className={styles.cardText}>
-              Just the basics - Everything you need to know to set up your
-              database and authentication.
-            </div>
-          </Link>
-          <Link
-            className={styles.card}
-            href="https://create.t3.gg/en/introduction"
-            target="_blank"
-          >
-            <h3 className={styles.cardTitle}>Documentation →</h3>
-            <div className={styles.cardText}>
-              Learn more about Create T3 App, the libraries it uses, and how to
-              deploy it.
-            </div>
-          </Link>
-        </div>
-        <div className={styles.showcaseContainer}>
-          <p className={styles.showcaseText}>
-            {hello ? hello.greeting : "Loading tRPC query..."}
-          </p>
-        </div>
+    <main>
+      <p>{hello ? hello.greeting : 'Loading tRPC query...'}</p>
 
-        <CrudShowcase />
-      </div>
+      <CrudShowcase />
     </main>
   );
 }
@@ -53,14 +19,8 @@ async function CrudShowcase() {
   const latestPost = await api.post.getLatest.query();
 
   return (
-    <div className={styles.showcaseContainer}>
-      {latestPost ? (
-        <p className={styles.showcaseText}>
-          Your most recent post: {latestPost.name}
-        </p>
-      ) : (
-        <p className={styles.showcaseText}>You have no posts yet.</p>
-      )}
+    <div>
+      {latestPost ? <p>Your most recent post: {latestPost.name}</p> : <p>You have no posts yet.</p>}
 
       <CreatePost />
     </div>