Compare commits
7 Commits
next-theme
...
main
Author | SHA1 | Date | |
---|---|---|---|
3370ab6a03 | |||
6f18a4cb48 | |||
2999c79995 | |||
9b32a5e8bb | |||
89e39240a1 | |||
8daa0f4032 | |||
fc33072e84 |
43
README.md
43
README.md
|
@ -1,36 +1,15 @@
|
||||||
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
This project is scaffolded with the following:
|
||||||
|
|
||||||
## Getting Started
|
- Next.js
|
||||||
|
- Auth.js (nextauth)
|
||||||
|
- Nextui
|
||||||
|
- Next-themes
|
||||||
|
- Tailwind
|
||||||
|
- Drizzle
|
||||||
|
- Postgres
|
||||||
|
|
||||||
First, run the development server:
|
It is deployed to vercel and can be viewed on the following links:
|
||||||
|
|
||||||
```bash
|
[Preview branches](https://titles-chrqr-christian-rannes-projects.vercel.app/)
|
||||||
npm run dev
|
|
||||||
# or
|
|
||||||
yarn dev
|
|
||||||
# or
|
|
||||||
pnpm dev
|
|
||||||
# or
|
|
||||||
bun dev
|
|
||||||
```
|
|
||||||
|
|
||||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
[Production](https://titles-psi.vercel.app/)
|
||||||
|
|
||||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
|
||||||
|
|
||||||
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
|
|
||||||
|
|
||||||
## Learn More
|
|
||||||
|
|
||||||
To learn more about Next.js, take a look at the following resources:
|
|
||||||
|
|
||||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
|
||||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
|
||||||
|
|
||||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
|
||||||
|
|
||||||
## Deploy on Vercel
|
|
||||||
|
|
||||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
|
||||||
|
|
||||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
|
|
||||||
|
|
|
@ -1,33 +1,3 @@
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
:root {
|
|
||||||
--foreground-rgb: 0, 0, 0;
|
|
||||||
--background-start-rgb: 214, 219, 220;
|
|
||||||
--background-end-rgb: 255, 255, 255;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--foreground-rgb: 255, 255, 255;
|
|
||||||
--background-start-rgb: 0, 0, 0;
|
|
||||||
--background-end-rgb: 0, 0, 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
color: rgb(var(--foreground-rgb));
|
|
||||||
background: linear-gradient(
|
|
||||||
to bottom,
|
|
||||||
transparent,
|
|
||||||
rgb(var(--background-end-rgb))
|
|
||||||
)
|
|
||||||
rgb(var(--background-start-rgb));
|
|
||||||
}
|
|
||||||
|
|
||||||
@layer utilities {
|
|
||||||
.text-balance {
|
|
||||||
text-wrap: balance;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -8,8 +8,8 @@ export default async function Home() {
|
||||||
const users = await getUsers();
|
const users = await getUsers();
|
||||||
const session: Session | null = await auth();
|
const session: Session | null = await auth();
|
||||||
return (
|
return (
|
||||||
<main>
|
<main className="min-h-screen w-full">
|
||||||
<div className="w-full h-full flex flex-col items-center">
|
<div className="min-h-screen w-full flex flex-col items-center justify-center">
|
||||||
<SignIn session={session} />
|
<SignIn session={session} />
|
||||||
<ThemeSwitcher />
|
<ThemeSwitcher />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,32 +1,48 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { signIn, signOut } from "next-auth/react";
|
import { signIn, signOut } from "next-auth/react";
|
||||||
import { SyntheticEvent } from "react";
|
import { SyntheticEvent, useState } from "react";
|
||||||
import { Session } from "next-auth";
|
import { Session } from "next-auth";
|
||||||
import { Button } from "@nextui-org/button";
|
import { Button } from "@nextui-org/button";
|
||||||
|
import { Spinner } from "@nextui-org/react";
|
||||||
|
|
||||||
interface SignInProps {
|
interface SignInProps {
|
||||||
session: Session | null;
|
session: Session | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function SignIn({ session }: SignInProps) {
|
export default function SignIn({ session }: SignInProps) {
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
const handleSignIn = async (event: SyntheticEvent) => {
|
const handleSignIn = async (event: SyntheticEvent) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
setLoading(true);
|
||||||
await signIn("github");
|
await signIn("github");
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSignOut = async (event: SyntheticEvent) => {
|
const handleSignOut = async (event: SyntheticEvent) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
setLoading(true);
|
||||||
await signOut();
|
await signOut();
|
||||||
};
|
};
|
||||||
|
|
||||||
return session?.user ? (
|
return (
|
||||||
|
<>
|
||||||
|
{session?.user ? (
|
||||||
<form onSubmit={handleSignOut}>
|
<form onSubmit={handleSignOut}>
|
||||||
<Button type="submit">Sign out</Button>
|
<Button type="submit" disabled={loading}>
|
||||||
|
Sign out
|
||||||
|
</Button>
|
||||||
</form>
|
</form>
|
||||||
) : (
|
) : (
|
||||||
<form onSubmit={handleSignIn}>
|
<form onSubmit={handleSignIn}>
|
||||||
<Button type="submit">Sign in</Button>
|
{!loading ? (
|
||||||
|
<Button type="submit" disabled={loading}>
|
||||||
|
Sign in
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<Spinner color="success" />
|
||||||
|
)}
|
||||||
</form>
|
</form>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,7 +16,7 @@ export function ThemeSwitcher() {
|
||||||
if (!mounted) return null;
|
if (!mounted) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className="flex gap-2 items-center my-2">
|
||||||
The current theme is: {theme}
|
The current theme is: {theme}
|
||||||
<Button onClick={() => setTheme("light")}>Light Mode</Button>
|
<Button onClick={() => setTheme("light")}>Light Mode</Button>
|
||||||
<Button onClick={() => setTheme("dark")}>Dark Mode</Button>
|
<Button onClick={() => setTheme("dark")}>Dark Mode</Button>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user