add mantine
This commit is contained in:
Kyle Corbitt
@@ -2,7 +2,7 @@ import { type Session } from "next-auth";
|
||||
import { SessionProvider } from "next-auth/react";
|
||||
import { type AppType } from "next/app";
|
||||
import { api } from "~/utils/api";
|
||||
import "~/styles/globals.css";
|
||||
import { MantineProvider } from "@mantine/core";
|
||||
|
||||
const MyApp: AppType<{ session: Session | null }> = ({
|
||||
Component,
|
||||
@@ -10,7 +10,9 @@ const MyApp: AppType<{ session: Session | null }> = ({
|
||||
}) => {
|
||||
return (
|
||||
<SessionProvider session={session}>
|
||||
<Component {...pageProps} />
|
||||
<MantineProvider withGlobalStyles withNormalizeCSS>
|
||||
<Component {...pageProps} />
|
||||
</MantineProvider>
|
||||
</SessionProvider>
|
||||
);
|
||||
};
|
||||
|
||||
20
src/pages/_document.tsx
Normal file
20
src/pages/_document.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import { createGetInitialProps } from "@mantine/next";
|
||||
import Document, { Head, Html, Main, NextScript } from "next/document";
|
||||
|
||||
const getInitialProps = createGetInitialProps();
|
||||
|
||||
export default class _Document extends Document {
|
||||
static getInitialProps = getInitialProps;
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Html>
|
||||
<Head />
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import { createNextApiHandler } from "@trpc/server/adapters/next";
|
||||
import { env } from "~/env.mjs";
|
||||
import { appRouter } from "~/server/api/root";
|
||||
import { appRouter } from "~/server/api/root.router";
|
||||
import { createTRPCContext } from "~/server/api/trpc";
|
||||
|
||||
// export API handler
|
||||
@@ -10,9 +10,7 @@ export default createNextApiHandler({
|
||||
onError:
|
||||
env.NODE_ENV === "development"
|
||||
? ({ path, error }) => {
|
||||
console.error(
|
||||
`❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`,
|
||||
);
|
||||
console.error(`❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`);
|
||||
}
|
||||
: undefined,
|
||||
});
|
||||
|
||||
9
src/pages/experiments/[id].tsx
Normal file
9
src/pages/experiments/[id].tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import AppNav from "~/components/nav/AppNav";
|
||||
|
||||
export default function Experiment() {
|
||||
return (
|
||||
<AppNav>
|
||||
<div>test content</div>
|
||||
</AppNav>
|
||||
);
|
||||
}
|
||||
@@ -1,149 +0,0 @@
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
background-image: linear-gradient(to bottom, #2e026d, #15162c);
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3rem;
|
||||
padding: 4rem 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.container {
|
||||
max-width: 640px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 768px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 1024px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
.container {
|
||||
max-width: 1536px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.025em;
|
||||
margin: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.title {
|
||||
font-size: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.pinkSpan {
|
||||
color: hsl(280 100% 70%);
|
||||
}
|
||||
|
||||
.cardRow {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.cardRow {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.cardRow {
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
max-width: 20rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
border-radius: 0.75rem;
|
||||
color: white;
|
||||
background-color: rgb(255 255 255 / 0.1);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
background-color: rgb(255 255 255 / 0.2);
|
||||
transition: background-color 150ms cubic-bezier(0.5, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cardText {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.showcaseContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.showcaseText {
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.authContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.loginButton {
|
||||
border-radius: 9999px;
|
||||
background-color: rgb(255 255 255 / 0.1);
|
||||
padding: 0.75rem 2.5rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
text-decoration-line: none;
|
||||
transition: background-color 150ms cubic-bezier(0.5, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.loginButton:hover {
|
||||
background-color: rgb(255 255 255 / 0.2);
|
||||
}
|
||||
@@ -27,8 +27,8 @@ export default function Home() {
|
||||
>
|
||||
<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.
|
||||
Just the basics - Everything you need to know to set up your database and
|
||||
authentication.
|
||||
</div>
|
||||
</Link>
|
||||
<Link
|
||||
@@ -38,8 +38,7 @@ export default function Home() {
|
||||
>
|
||||
<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.
|
||||
Learn more about Create T3 App, the libraries it uses, and how to deploy it.
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
@@ -60,7 +59,7 @@ function AuthShowcase() {
|
||||
|
||||
const { data: secretMessage } = api.example.getSecretMessage.useQuery(
|
||||
undefined, // no input
|
||||
{ enabled: sessionData?.user !== undefined },
|
||||
{ enabled: sessionData?.user !== undefined }
|
||||
);
|
||||
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user