274 lines
5.6 KiB
TypeScript
274 lines
5.6 KiB
TypeScript
|
import { Suspense } from "react"
|
||
|
import { Link, BlitzPage, useMutation, Routes } from "blitz"
|
||
|
|
||
|
import BaseLayout from "../core/layouts/base-layout"
|
||
|
import logout from "../auth/mutations/logout"
|
||
|
import useCurrentCustomer from "../core/hooks/use-current-customer"
|
||
|
|
||
|
/*
|
||
|
* This file is just for a pleasant getting started page for your new app.
|
||
|
* You can delete everything in here and start from scratch if you like.
|
||
|
*/
|
||
|
|
||
|
const UserInfo = () => {
|
||
|
const { customer } = useCurrentCustomer()
|
||
|
const [logoutMutation] = useMutation(logout)
|
||
|
|
||
|
if (customer) {
|
||
|
return (
|
||
|
<>
|
||
|
<button
|
||
|
className="button small"
|
||
|
onClick={async () => {
|
||
|
await logoutMutation()
|
||
|
}}
|
||
|
>
|
||
|
Logout
|
||
|
</button>
|
||
|
<div>
|
||
|
User id: <code>{customer.id}</code>
|
||
|
<br />
|
||
|
User role: <code>{customer.encryptionKey}</code>
|
||
|
</div>
|
||
|
</>
|
||
|
)
|
||
|
} else {
|
||
|
return (
|
||
|
<>
|
||
|
<Link href={Routes.SignupPage()}>
|
||
|
<a className="button small">
|
||
|
<strong>Sign Up</strong>
|
||
|
</a>
|
||
|
</Link>
|
||
|
<Link href={Routes.LoginPage()}>
|
||
|
<a className="button small">
|
||
|
<strong>Login</strong>
|
||
|
</a>
|
||
|
</Link>
|
||
|
</>
|
||
|
)
|
||
|
}
|
||
|
}
|
||
|
|
||
|
const Home: BlitzPage = () => {
|
||
|
return (
|
||
|
<div className="container">
|
||
|
<main>
|
||
|
<div className="logo">
|
||
|
<img src="/logo.png" alt="blitz.js" />
|
||
|
</div>
|
||
|
<p>
|
||
|
<strong>Congrats!</strong> Your app is ready, including user sign-up and log-in.
|
||
|
</p>
|
||
|
<div className="buttons" style={{ marginTop: "1rem", marginBottom: "1rem" }}>
|
||
|
<Suspense fallback="Loading...">
|
||
|
<UserInfo />
|
||
|
</Suspense>
|
||
|
</div>
|
||
|
<p>
|
||
|
<strong>
|
||
|
To add a new model to your app, <br />
|
||
|
run the following in your terminal:
|
||
|
</strong>
|
||
|
</p>
|
||
|
<pre>
|
||
|
<code>blitz generate all project name:string</code>
|
||
|
</pre>
|
||
|
<div style={{ marginBottom: "1rem" }}>(And select Yes to run prisma migrate)</div>
|
||
|
<div>
|
||
|
<p>
|
||
|
Then <strong>restart the server</strong>
|
||
|
</p>
|
||
|
<pre>
|
||
|
<code>Ctrl + c</code>
|
||
|
</pre>
|
||
|
<pre>
|
||
|
<code>blitz dev</code>
|
||
|
</pre>
|
||
|
<p>
|
||
|
and go to{" "}
|
||
|
<Link href="/projects">
|
||
|
<a>/projects</a>
|
||
|
</Link>
|
||
|
</p>
|
||
|
</div>
|
||
|
<div className="buttons" style={{ marginTop: "5rem" }}>
|
||
|
<a
|
||
|
className="button"
|
||
|
href="https://blitzjs.com/docs/getting-started?utm_source=blitz-new&utm_medium=app-template&utm_campaign=blitz-new"
|
||
|
target="_blank"
|
||
|
rel="noopener noreferrer"
|
||
|
>
|
||
|
Documentation
|
||
|
</a>
|
||
|
<a
|
||
|
className="button-outline"
|
||
|
href="https://github.com/blitz-js/blitz"
|
||
|
target="_blank"
|
||
|
rel="noopener noreferrer"
|
||
|
>
|
||
|
Github Repo
|
||
|
</a>
|
||
|
<a
|
||
|
className="button-outline"
|
||
|
href="https://discord.blitzjs.com"
|
||
|
target="_blank"
|
||
|
rel="noopener noreferrer"
|
||
|
>
|
||
|
Discord Community
|
||
|
</a>
|
||
|
</div>
|
||
|
</main>
|
||
|
|
||
|
<footer>
|
||
|
<a
|
||
|
href="https://blitzjs.com?utm_source=blitz-new&utm_medium=app-template&utm_campaign=blitz-new"
|
||
|
target="_blank"
|
||
|
rel="noopener noreferrer"
|
||
|
>
|
||
|
Powered by Blitz.js
|
||
|
</a>
|
||
|
</footer>
|
||
|
|
||
|
<style jsx global>{`
|
||
|
@import url("https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300;700&display=swap");
|
||
|
|
||
|
html,
|
||
|
body {
|
||
|
padding: 0;
|
||
|
margin: 0;
|
||
|
font-family: "Libre Franklin", -apple-system, BlinkMacSystemFont, Segoe UI,
|
||
|
Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
|
||
|
sans-serif;
|
||
|
}
|
||
|
|
||
|
* {
|
||
|
-webkit-font-smoothing: antialiased;
|
||
|
-moz-osx-font-smoothing: grayscale;
|
||
|
box-sizing: border-box;
|
||
|
}
|
||
|
.container {
|
||
|
min-height: 100vh;
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
justify-content: center;
|
||
|
align-items: center;
|
||
|
}
|
||
|
|
||
|
main {
|
||
|
padding: 5rem 0;
|
||
|
flex: 1;
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
justify-content: center;
|
||
|
align-items: center;
|
||
|
}
|
||
|
|
||
|
main p {
|
||
|
font-size: 1.2rem;
|
||
|
}
|
||
|
|
||
|
p {
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
footer {
|
||
|
width: 100%;
|
||
|
height: 60px;
|
||
|
border-top: 1px solid #eaeaea;
|
||
|
display: flex;
|
||
|
justify-content: center;
|
||
|
align-items: center;
|
||
|
background-color: #45009d;
|
||
|
}
|
||
|
|
||
|
footer a {
|
||
|
display: flex;
|
||
|
justify-content: center;
|
||
|
align-items: center;
|
||
|
}
|
||
|
|
||
|
footer a {
|
||
|
color: #f4f4f4;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
|
||
|
.logo {
|
||
|
margin-bottom: 2rem;
|
||
|
}
|
||
|
|
||
|
.logo img {
|
||
|
width: 300px;
|
||
|
}
|
||
|
|
||
|
.buttons {
|
||
|
display: grid;
|
||
|
grid-auto-flow: column;
|
||
|
grid-gap: 0.5rem;
|
||
|
}
|
||
|
.button {
|
||
|
font-size: 1rem;
|
||
|
background-color: #6700eb;
|
||
|
padding: 1rem 2rem;
|
||
|
color: #f4f4f4;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
.button.small {
|
||
|
padding: 0.5rem 1rem;
|
||
|
}
|
||
|
|
||
|
.button:hover {
|
||
|
background-color: #45009d;
|
||
|
}
|
||
|
|
||
|
.button-outline {
|
||
|
border: 2px solid #6700eb;
|
||
|
padding: 1rem 2rem;
|
||
|
color: #6700eb;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
.button-outline:hover {
|
||
|
border-color: #45009d;
|
||
|
color: #45009d;
|
||
|
}
|
||
|
|
||
|
pre {
|
||
|
background: #fafafa;
|
||
|
border-radius: 5px;
|
||
|
padding: 0.75rem;
|
||
|
text-align: center;
|
||
|
}
|
||
|
code {
|
||
|
font-size: 0.9rem;
|
||
|
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
||
|
Bitstream Vera Sans Mono, Courier New, monospace;
|
||
|
}
|
||
|
|
||
|
.grid {
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
justify-content: center;
|
||
|
flex-wrap: wrap;
|
||
|
|
||
|
max-width: 800px;
|
||
|
margin-top: 3rem;
|
||
|
}
|
||
|
|
||
|
@media (max-width: 600px) {
|
||
|
.grid {
|
||
|
width: 100%;
|
||
|
flex-direction: column;
|
||
|
}
|
||
|
}
|
||
|
`}</style>
|
||
|
</div>
|
||
|
)
|
||
|
}
|
||
|
|
||
|
Home.suppressFirstRenderFlicker = true
|
||
|
Home.getLayout = (page) => <BaseLayout title="Home">{page}</BaseLayout>
|
||
|
|
||
|
export default Home
|