Started setting up MUI config + layouts
This commit is contained in:
8717
package-lock.json
generated
Normal file
8717
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
83
package.json
83
package.json
@@ -1,41 +1,46 @@
|
||||
{
|
||||
"name": "parallel",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "next build",
|
||||
"dev": "next dev",
|
||||
"postinstall": "prisma generate",
|
||||
"lint": "next lint",
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"@next-auth/prisma-adapter": "^1.0.5",
|
||||
"@prisma/client": "^4.8.0",
|
||||
"@tanstack/react-query": "^4.20.0",
|
||||
"@trpc/client": "^10.8.1",
|
||||
"@trpc/next": "^10.8.1",
|
||||
"@trpc/react-query": "^10.8.1",
|
||||
"@trpc/server": "^10.8.1",
|
||||
"next": "13.1.1",
|
||||
"next-auth": "^4.18.7",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"superjson": "1.9.1",
|
||||
"zod": "^3.20.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^18.11.18",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.1",
|
||||
"@typescript-eslint/parser": "^5.47.1",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-next": "13.1.1",
|
||||
"prisma": "^4.8.0",
|
||||
"typescript": "^4.9.4"
|
||||
},
|
||||
"ct3aMetadata": {
|
||||
"initVersion": "7.3.0"
|
||||
}
|
||||
"name": "parallel",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "next build",
|
||||
"dev": "next dev",
|
||||
"postinstall": "prisma generate",
|
||||
"lint": "next lint",
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.10.5",
|
||||
"@emotion/styled": "^11.10.5",
|
||||
"@fontsource/fira-code": "^4.5.12",
|
||||
"@fontsource/murecho": "^4.5.11",
|
||||
"@mui/material": "^5.11.4",
|
||||
"@next-auth/prisma-adapter": "^1.0.5",
|
||||
"@prisma/client": "^4.8.0",
|
||||
"@tanstack/react-query": "^4.20.0",
|
||||
"@trpc/client": "^10.8.1",
|
||||
"@trpc/next": "^10.8.1",
|
||||
"@trpc/react-query": "^10.8.1",
|
||||
"@trpc/server": "^10.8.1",
|
||||
"next": "13.1.1",
|
||||
"next-auth": "^4.18.7",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"superjson": "1.9.1",
|
||||
"zod": "^3.20.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^18.11.18",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.1",
|
||||
"@typescript-eslint/parser": "^5.47.1",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-next": "13.1.1",
|
||||
"prisma": "^4.8.0",
|
||||
"typescript": "^4.9.4"
|
||||
},
|
||||
"ct3aMetadata": {
|
||||
"initVersion": "7.3.0"
|
||||
}
|
||||
}
|
||||
|
||||
11
src/components/Header.tsx
Normal file
11
src/components/Header.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import { AppBar, Container, Toolbar } from "@mui/material";
|
||||
|
||||
export default function Header() {
|
||||
return (
|
||||
<AppBar color="primary" enableColorOnDark position="sticky">
|
||||
<Container maxWidth="xl">
|
||||
<Toolbar disableGutters></Toolbar>
|
||||
</Container>
|
||||
</AppBar>
|
||||
);
|
||||
}
|
||||
@@ -1,20 +1,58 @@
|
||||
import { type AppType } from "next/app";
|
||||
import { type Session } from "next-auth";
|
||||
import { SessionProvider } from "next-auth/react";
|
||||
import Head from "next/head";
|
||||
import { CssBaseline, ThemeProvider } from "@mui/material";
|
||||
import { theme } from "@styles/muiTheme";
|
||||
|
||||
import { api } from "../utils/api";
|
||||
import { api } from "@utils/api";
|
||||
|
||||
import "../styles/globals.css";
|
||||
|
||||
import "@fontsource/murecho";
|
||||
import "@fontsource/murecho/100.css";
|
||||
import "@fontsource/murecho/200.css";
|
||||
import "@fontsource/murecho/300.css";
|
||||
import "@fontsource/murecho/400.css";
|
||||
import "@fontsource/murecho/500.css";
|
||||
import "@fontsource/murecho/600.css";
|
||||
import "@fontsource/murecho/700.css";
|
||||
import "@fontsource/murecho/800.css";
|
||||
import "@fontsource/murecho/900.css";
|
||||
|
||||
import "@fontsource/fira-code";
|
||||
import "@fontsource/fira-code/300.css";
|
||||
import "@fontsource/fira-code/400.css";
|
||||
import "@fontsource/fira-code/500.css";
|
||||
import "@fontsource/fira-code/600.css";
|
||||
import "@fontsource/fira-code/700.css";
|
||||
import Header from "@components/Header";
|
||||
|
||||
const MyApp: AppType<{ session: Session | null }> = ({
|
||||
Component,
|
||||
pageProps: { session, ...pageProps },
|
||||
Component,
|
||||
pageProps: { session, ...pageProps },
|
||||
}) => {
|
||||
return (
|
||||
<SessionProvider session={session}>
|
||||
<Component {...pageProps} />
|
||||
</SessionProvider>
|
||||
);
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
<SessionProvider session={session}>
|
||||
<Head>
|
||||
<title>Parallel</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Connecting educators with creators."
|
||||
/>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="initial-scale=1, width=device-width"
|
||||
/>
|
||||
</Head>
|
||||
<CssBaseline />
|
||||
<Header />
|
||||
<Component {...pageProps} />
|
||||
</SessionProvider>
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default api.withTRPC(MyApp);
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
@@ -1,84 +1,15 @@
|
||||
import styles from "./index.module.css";
|
||||
import { type NextPage } from "next";
|
||||
import Head from "next/head";
|
||||
import Link from "next/link";
|
||||
import { signIn, signOut, useSession } from "next-auth/react";
|
||||
|
||||
import { api } from "../utils/api";
|
||||
import { Container, Typography } from "@mui/material";
|
||||
|
||||
const Home: NextPage = () => {
|
||||
const hello = api.example.hello.useQuery({ text: "from tRPC" });
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Create T3 App</title>
|
||||
<meta name="description" content="Generated by create-t3-app" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<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.data ? hello.data.greeting : "Loading tRPC query..."}
|
||||
</p>
|
||||
<AuthShowcase />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<Container>
|
||||
<Typography variant="h1" fontWeight={900}>
|
||||
Home
|
||||
</Typography>
|
||||
<Typography variant="h1">Home</Typography>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
|
||||
const AuthShowcase: React.FC = () => {
|
||||
const { data: sessionData } = useSession();
|
||||
|
||||
const { data: secretMessage } = api.example.getSecretMessage.useQuery(
|
||||
undefined, // no input
|
||||
{ enabled: sessionData?.user !== undefined },
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={styles.authContainer}>
|
||||
<p className={styles.showcaseText}>
|
||||
{sessionData && <span>Logged in as {sessionData.user?.name}</span>}
|
||||
{secretMessage && <span> - {secretMessage}</span>}
|
||||
</p>
|
||||
<button
|
||||
className={styles.loginButton}
|
||||
onClick={sessionData ? () => void signOut() : () => void signIn()}
|
||||
>
|
||||
{sessionData ? "Sign out" : "Sign in"}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
56
src/styles/muiTheme.ts
Normal file
56
src/styles/muiTheme.ts
Normal file
@@ -0,0 +1,56 @@
|
||||
import { createTheme } from "@mui/material/styles";
|
||||
|
||||
export const theme = createTheme({
|
||||
palette: {
|
||||
mode: "dark",
|
||||
background: {
|
||||
default: "#303030",
|
||||
paper: "#424242",
|
||||
},
|
||||
text: {
|
||||
primary: "#ffffff",
|
||||
secondary: "rgba(255,255,255,0.7)",
|
||||
disabled: "rgba(255,255,255,0.5)",
|
||||
},
|
||||
primary: {
|
||||
main: "#deb887",
|
||||
light: "rgb(228, 198, 159)",
|
||||
dark: "rgb(155, 128, 94)",
|
||||
contrastText: "rgb(0, 0, 0, 0.87)",
|
||||
},
|
||||
secondary: {
|
||||
main: "#bbafd6",
|
||||
light: "rgb(200, 191, 222)",
|
||||
dark: "rgb(130, 122, 149)",
|
||||
contrastText: "rgb(0, 0, 0, 0.87)",
|
||||
},
|
||||
error: {
|
||||
main: "#f44336",
|
||||
light: "#e57373",
|
||||
dark: "#d32f2f",
|
||||
contrastText: "#fff",
|
||||
},
|
||||
warning: {
|
||||
main: "#ff9800",
|
||||
light: "#ffb74d",
|
||||
dark: "#f57c00",
|
||||
contrastText: "rgb(0, 0, 0, 0.87)",
|
||||
},
|
||||
info: {
|
||||
main: "#2196f3",
|
||||
light: "#64b5f6",
|
||||
dark: "#1976d2",
|
||||
contrastText: "#fff",
|
||||
},
|
||||
success: {
|
||||
main: "#4caf50",
|
||||
light: "#81c784",
|
||||
dark: "#388e3c",
|
||||
contrastText: "rgb(0, 0, 0, 0.87)",
|
||||
},
|
||||
divider: "rgba(255,255,255,0.12)",
|
||||
},
|
||||
typography: {
|
||||
fontFamily: "Murecho",
|
||||
},
|
||||
});
|
||||
@@ -1,21 +1,29 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es2017",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"noUncheckedIndexedAccess": true
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.mjs"],
|
||||
"exclude": ["node_modules"]
|
||||
"compilerOptions": {
|
||||
"target": "es2017",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"noUncheckedIndexedAccess": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@components/*": ["src/components/*"],
|
||||
"@styles/*": ["src/styles/*"],
|
||||
"@utils/*": ["src/utils/*"],
|
||||
"@types/*": ["src/types/*"],
|
||||
"@server/*": ["src/server/*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.mjs"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user