Compare commits
10 Commits
framer-nex
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 3370ab6a03 | |||
| 6f18a4cb48 | |||
| 2999c79995 | |||
| 9b32a5e8bb | |||
| 89e39240a1 | |||
| 8daa0f4032 | |||
| fc33072e84 | |||
| 6dd60de8f4 | |||
| 77b60eda84 | |||
| 1b2ab0aa1b |
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
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
[Preview branches](https://titles-chrqr-christian-rannes-projects.vercel.app/)
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
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.
|
||||
[Production](https://titles-psi.vercel.app/)
|
||||
|
|
|
|||
|
|
@ -1,33 +1,3 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { NextUIProvider } from "@nextui-org/system";
|
||||
import { Providers } from "./providers";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
|
|
@ -18,7 +18,7 @@ export default function RootLayout({
|
|||
return (
|
||||
<html lang="en">
|
||||
<body className={inter.className}>
|
||||
<NextUIProvider>{children}</NextUIProvider>
|
||||
<Providers>{children}</Providers>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -2,13 +2,17 @@ import { getUsers } from "@/drizzle/db";
|
|||
import SignIn from "@/components/SignIn";
|
||||
import { auth } from "@/auth";
|
||||
import { Session } from "next-auth";
|
||||
import { ThemeSwitcher } from "@/components/ThemeSwitcher";
|
||||
|
||||
export default async function Home() {
|
||||
const users = await getUsers();
|
||||
const session: Session | null = await auth();
|
||||
return (
|
||||
<main className="bg-black text-white">
|
||||
<main className="min-h-screen w-full">
|
||||
<div className="min-h-screen w-full flex flex-col items-center justify-center">
|
||||
<SignIn session={session} />
|
||||
<ThemeSwitcher />
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
14
app/providers.tsx
Normal file
14
app/providers.tsx
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
"use client";
|
||||
|
||||
import { NextUIProvider } from "@nextui-org/react";
|
||||
import { ThemeProvider as NextThemesProvider } from "next-themes";
|
||||
|
||||
export function Providers({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<NextUIProvider>
|
||||
<NextThemesProvider attribute="class" defaultTheme="dark">
|
||||
{children}
|
||||
</NextThemesProvider>
|
||||
</NextUIProvider>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,32 +1,48 @@
|
|||
"use client";
|
||||
|
||||
import { signIn, signOut } from "next-auth/react";
|
||||
import { SyntheticEvent } from "react";
|
||||
import { SyntheticEvent, useState } from "react";
|
||||
import { Session } from "next-auth";
|
||||
import { Button } from "@nextui-org/button";
|
||||
import { Spinner } from "@nextui-org/react";
|
||||
|
||||
interface SignInProps {
|
||||
session: Session | null;
|
||||
}
|
||||
|
||||
export default function SignIn({ session }: SignInProps) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const handleSignIn = async (event: SyntheticEvent) => {
|
||||
event.preventDefault();
|
||||
setLoading(true);
|
||||
await signIn("github");
|
||||
};
|
||||
|
||||
const handleSignOut = async (event: SyntheticEvent) => {
|
||||
event.preventDefault();
|
||||
setLoading(true);
|
||||
await signOut();
|
||||
};
|
||||
|
||||
return session?.user ? (
|
||||
return (
|
||||
<>
|
||||
{session?.user ? (
|
||||
<form onSubmit={handleSignOut}>
|
||||
<Button type="submit">Sign out</Button>
|
||||
<Button type="submit" disabled={loading}>
|
||||
Sign out
|
||||
</Button>
|
||||
</form>
|
||||
) : (
|
||||
<form onSubmit={handleSignIn}>
|
||||
<Button type="submit">Sign in</Button>
|
||||
{!loading ? (
|
||||
<Button type="submit" disabled={loading}>
|
||||
Sign in
|
||||
</Button>
|
||||
) : (
|
||||
<Spinner color="success" />
|
||||
)}
|
||||
</form>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
25
components/ThemeSwitcher.tsx
Normal file
25
components/ThemeSwitcher.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
// app/components/ThemeSwitcher.tsx
|
||||
"use client";
|
||||
|
||||
import { Button } from "@nextui-org/button";
|
||||
import { useTheme } from "next-themes";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export function ThemeSwitcher() {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const { theme, setTheme } = useTheme();
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
if (!mounted) return null;
|
||||
|
||||
return (
|
||||
<div className="flex gap-2 items-center my-2">
|
||||
The current theme is: {theme}
|
||||
<Button onClick={() => setTheme("light")}>Light Mode</Button>
|
||||
<Button onClick={() => setTheme("dark")}>Dark Mode</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
10
package-lock.json
generated
10
package-lock.json
generated
|
|
@ -19,6 +19,7 @@
|
|||
"framer-motion": "^11.2.4",
|
||||
"next": "14.2.3",
|
||||
"next-auth": "^5.0.0-beta.18",
|
||||
"next-themes": "^0.3.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
|
|
@ -7280,6 +7281,15 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/next-themes": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.3.0.tgz",
|
||||
"integrity": "sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8 || ^17 || ^18",
|
||||
"react-dom": "^16.8 || ^17 || ^18"
|
||||
}
|
||||
},
|
||||
"node_modules/next-tick": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
"framer-motion": "^11.2.4",
|
||||
"next": "14.2.3",
|
||||
"next-auth": "^5.0.0-beta.18",
|
||||
"next-themes": "^0.3.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user