feat: add application shell

2025-07-30 21:53:28 +08:00 · 2022-09-29 19:47:31 +08:00
parent 523d91f920
commit dee60943d0
17 changed files with 465 additions and 98 deletions
--- a/apps/portal/src/pages/index.tsx
+++ b/apps/portal/src/pages/index.tsx
@ -1,91 +1,9 @@
-import type { NextPage } from 'next';
-import Head from 'next/head';
-import { CounterButton } from '@tih/ui';
-
-import { trpc } from '~/utils/trpc';
-
-const Home: NextPage = () => {
-  const hello = trpc.useQuery(['example.hello', { text: 'from tRPC!' }]);
-  const getAll = trpc.useQuery(['example.getAll']);
-
+export default function HomePage() {
  return (
-    <>
-      <Head>
-        <title>Create T3 App</title>
-        <meta content="Generated by create-t3-app" name="description" />
-        <link href="/favicon.ico" rel="icon" />
-      </Head>
-      <main className="container mx-auto flex flex-col items-center justify-center min-h-screen p-4">
-        <h1 className="text-5xl md:text-[5rem] leading-normal font-extrabold text-gray-700">
-          Create <span className="text-purple-300">T3</span> App
-        </h1>
-        <CounterButton />
-        <p className="text-2xl text-gray-700">This stack uses:</p>
-        <div className="grid gap-3 pt-3 mt-3 text-center md:grid-cols-2 lg:w-2/3">
-          <TechnologyCard
-            description="The React framework for production"
-            documentation="https://nextjs.org/"
-            name="NextJS"
-          />
-          <TechnologyCard
-            description="Strongly typed programming language that builds on JavaScript, giving you better tooling at any scale"
-            documentation="https://www.typescriptlang.org/"
-            name="TypeScript"
-          />
-          <TechnologyCard
-            description="Rapidly build modern websites without ever leaving your HTML"
-            documentation="https://tailwindcss.com/"
-            name="TailwindCSS"
-          />
-          <TechnologyCard
-            description="End-to-end typesafe APIs made easy"
-            documentation="https://trpc.io/"
-            name="tRPC"
-          />
-          <TechnologyCard
-            description="Authentication for Next.js"
-            documentation="https://next-auth.js.org/"
-            name="Next-Auth"
-          />
-          <TechnologyCard
-            description="Build data-driven JavaScript & TypeScript apps in less time"
-            documentation="https://www.prisma.io/docs/"
-            name="Prisma"
-          />
-        </div>
-        <div className="pt-6 text-2xl text-blue-500 flex justify-center items-center w-full">
-          {hello.data ? <p>{hello.data.greeting}</p> : <p>Loading..</p>}
-        </div>
-        <pre className="w-1/2">{JSON.stringify(getAll.data, null, 2)}</pre>
-      </main>
-    </>
-  );
-};
-
-export default Home;
-
-type TechnologyCardProps = {
-  description: string;
-  documentation: string;
-  name: string;
-};
-
-function TechnologyCard({
-  name,
-  description,
-  documentation,
-}: TechnologyCardProps) {
-  return (
-    <section className="flex flex-col justify-center p-6 duration-500 border-2 border-gray-500 rounded shadow-xl motion-safe:hover:scale-105">
-      <h2 className="text-lg text-gray-700">{name}</h2>
-      <p className="text-sm text-gray-600">{description}</p>
-      <a
-        className="mt-3 text-sm underline text-violet-500 decoration-dotted underline-offset-2"
-        href={documentation}
-        rel="noreferrer"
-        target="_blank">
-        Documentation
-      </a>
-    </section>
+    <main className="flex-1 overflow-y-auto">
+      <div className="flex h-full items-center justify-center">
+        <h1 className="text-center font-bold text-4xl">Homepage</h1>
+      </div>
+    </main>
  );
 }