rannes.dev/titles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: rannes.dev:main
Branches Tags
rannes.dev:main
rannes.dev:test-cicd
rannes.dev:next-themes
rannes.dev:framer-nextui
rannes.dev:tailwind-flowbite
rannes.dev:authjs
..
compare: rannes.dev:framer-nextui
Branches Tags
rannes.dev:main
rannes.dev:test-cicd
rannes.dev:next-themes
rannes.dev:framer-nextui
rannes.dev:tailwind-flowbite
rannes.dev:authjs

No commits in common. "main" and "framer-nextui" have entirely different histories.
main ... framer-nex

9 changed files with 75 additions and 94 deletions
Show Stats Expand all files Collapse all files

43
README.md
View File

@ -1,15 +1,36 @@
This project is scaffolded with the following: 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).
- Next.js ## Getting Started
- Auth.js (nextauth)
- Nextui
- Next-themes
- Tailwind
- Drizzle
- Postgres
It is deployed to vercel and can be viewed on the following links: First, run the development server:
[Preview branches](https://titles-chrqr-christian-rannes-projects.vercel.app/) ```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
[Production](https://titles-psi.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.

30
app/globals.css
View File

@ -1,3 +1,33 @@
@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;
}
}

4
app/layout.tsx
View File

@ -1,7 +1,7 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { Providers } from "./providers"; import { NextUIProvider } from "@nextui-org/system";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
@ -18,7 +18,7 @@ export default function RootLayout({
return ( return (
<html lang="en"> <html lang="en">
<body className={inter.className}> <body className={inter.className}>
<Providers>{children}</Providers> <NextUIProvider>{children}</NextUIProvider>
</body> </body>
</html> </html>
); );

8
app/page.tsx
View File

@ -2,17 +2,13 @@ import { getUsers } from "@/drizzle/db";
import SignIn from "@/components/SignIn"; import SignIn from "@/components/SignIn";
import { auth } from "@/auth"; import { auth } from "@/auth";
import { Session } from "next-auth"; import { Session } from "next-auth";
import { ThemeSwitcher } from "@/components/ThemeSwitcher";
export default async function Home() { 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 className="min-h-screen w-full"> <main className="bg-black text-white">
<div className="min-h-screen w-full flex flex-col items-center justify-center"> <SignIn session={session} />
<SignIn session={session} />
<ThemeSwitcher />
</div>
</main> </main>
); );
} }

14
app/providers.tsx
View File

@ -1,14 +0,0 @@
"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>
);
}

34
components/SignIn.tsx
View File

@ -1,48 +1,32 @@
"use client"; "use client";
import { signIn, signOut } from "next-auth/react"; import { signIn, signOut } from "next-auth/react";
import { SyntheticEvent, useState } from "react"; import { SyntheticEvent } 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 ( return session?.user ? (
<> <form onSubmit={handleSignOut}>
{session?.user ? ( <Button type="submit">Sign out</Button>
<form onSubmit={handleSignOut}> </form>
<Button type="submit" disabled={loading}> ) : (
Sign out <form onSubmit={handleSignIn}>
</Button> <Button type="submit">Sign in</Button>
</form> </form>
) : (
<form onSubmit={handleSignIn}>
{!loading ? (
<Button type="submit" disabled={loading}>
Sign in
</Button>
) : (
<Spinner color="success" />
)}
</form>
)}
</>
); );
} }

25
components/ThemeSwitcher.tsx
View File

@ -1,25 +0,0 @@
// 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
View File

@ -19,7 +19,6 @@
"framer-motion": "^11.2.4", "framer-motion": "^11.2.4",
"next": "14.2.3", "next": "14.2.3",
"next-auth": "^5.0.0-beta.18", "next-auth": "^5.0.0-beta.18",
"next-themes": "^0.3.0",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1" "react-dom": "^18.3.1"
}, },
@ -7281,15 +7280,6 @@
} }
} }
}, },
"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": { "node_modules/next-tick": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz", "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",

1
package.json
View File

@ -20,7 +20,6 @@
"framer-motion": "^11.2.4", "framer-motion": "^11.2.4",
"next": "14.2.3", "next": "14.2.3",
"next-auth": "^5.0.0-beta.18", "next-auth": "^5.0.0-beta.18",
"next-themes": "^0.3.0",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1" "react-dom": "^18.3.1"
}, },