92 lines
3.1 KiB
92 lines
3.1 KiB
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']);
|
|
|
|
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>
|
|
);
|
|
}
|