Skip to content

Commit 91e2758

Browse files
author
Sam Thompson
committedAug 10, 2023
add tailwind and nextui
1 parent 921c3da commit 91e2758

10 files changed

+3454
-233
lines changed
 

‎app/layout.tsx

+33-33
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,33 @@
1-
import { ClerkProvider, UserButton } from "@clerk/nextjs";
1+
import "../styles/globals.css";
2+
import { Metadata } from "next";
3+
import { Providers } from "./providers";
24

5+
import { ClerkProvider, UserButton } from "@clerk/nextjs";
36
import { Analytics } from "@vercel/analytics/react";
47

5-
import type { Metadata } from "next";
6-
78
import Link from "next/link";
89

9-
import "../styles.css";
10-
11-
interface LayoutProps {
12-
children: React.ReactNode;
13-
}
14-
1510
export const metadata: Metadata = {
1611
title: {
17-
default: "Premiere Pal",
18-
template: "%s | Premiere Pal",
12+
default: "Test",
13+
template: `%s - Test 2`,
1914
},
20-
twitter: {
21-
card: "summary_large_image",
22-
description: "Premiere Pal",
23-
images: [
24-
{
25-
url: "https://nextjs-typescript-react-stripe-js.vercel.app/social_card.png",
26-
},
27-
],
28-
site: "@PremierePal",
29-
title: "Premiere Pal",
15+
description: "Test Description",
16+
themeColor: [
17+
{ media: "(prefers-color-scheme: light)", color: "white" },
18+
{ media: "(prefers-color-scheme: dark)", color: "black" },
19+
],
20+
icons: {
21+
icon: "/favicon.ico",
22+
shortcut: "/favicon-16x16.png",
23+
apple: "/apple-touch-icon.png",
3024
},
3125
};
3226

27+
interface LayoutProps {
28+
children: React.ReactNode;
29+
}
30+
3331
export default function RootLayout({ children }: LayoutProps) {
3432
return (
3533
<ClerkProvider>
@@ -39,18 +37,20 @@ export default function RootLayout({ children }: LayoutProps) {
3937
<title>Premiere Pal</title>
4038
</head>
4139
<body>
42-
<header
43-
style={{
44-
display: "flex",
45-
justifyContent: "space-between",
46-
padding: "20px",
47-
}}
48-
>
49-
<Link href="/">Premiere Pal</Link>
50-
<UserButton afterSignOutUrl="/" />
51-
</header>
52-
53-
<main>{children}</main>
40+
<Providers>
41+
<header
42+
style={{
43+
display: "flex",
44+
justifyContent: "space-between",
45+
padding: "20px",
46+
}}
47+
>
48+
<Link href="/">Premiere Pal</Link>
49+
<UserButton afterSignOutUrl="/" />
50+
</header>
51+
52+
<main>{children}</main>
53+
</Providers>
5454
<Analytics />
5555
</body>
5656
</html>

‎app/notifications/page.tsx

+3-20
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
"use client";
2+
import { Button } from "@nextui-org/button";
23

34
import { useEffect, useState } from "react";
45

@@ -117,32 +118,14 @@ export default function NotificationsPage(): JSX.Element {
117118
setStatus("permission not granted, cannot subscribe to push");
118119
}
119120
});
120-
121-
// const registration = await navigator.serviceWorker.ready;
122-
// const subscription = await registration.pushManager.subscribe({
123-
// userVisibleOnly: true,
124-
// applicationServerKey: process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY,
125-
// });
126-
// const response = await fetch("/api/subscribe", {
127-
// method: "POST",
128-
// headers: {
129-
// "Content-Type": "application/json",
130-
// },
131-
// body: JSON.stringify(subscription),
132-
// });
133-
// if (response.ok) {
134-
// setStatus("Successfully subscribed");
135-
// } else {
136-
// setStatus("Error subscribing user.");
137-
// }
138121
};
139122

140123
return (
141124
<ul>
142125
<li>Notifications</li>
143126
<li>
144-
<button onClick={subscribe}>Subscribe to Notifications</button>
145-
<button onClick={unsubscribe}>Unsubscribe from Notifications</button>
127+
<Button onClick={subscribe}>Subscribe to Notifications</Button>
128+
<Button onClick={unsubscribe}>Unsubscribe from Notifications</Button>
146129
<p>Status: {status}</p>
147130
</li>
148131
</ul>

‎app/page.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ export default async function IndexPage(): Promise<JSX.Element> {
55
const user = await currentUser();
66
return (
77
<>
8-
<p>Hello {user ? user?.firstName : "unknown user"}</p>
8+
<p className="text-3xl font-bold">
9+
Hello {user ? user?.firstName : "unknown user"}
10+
</p>
911
<ul>
1012
<li>
1113
<Link href="/sign-up">Sign Up</Link>

‎app/providers.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
"use client";
2+
3+
import * as React from "react";
4+
import { NextUIProvider } from "@nextui-org/system";
5+
6+
export interface ProvidersProps {
7+
children: React.ReactNode;
8+
}
9+
10+
export function Providers({ children }: ProvidersProps) {
11+
return <NextUIProvider>{children}</NextUIProvider>;
12+
}

‎package-lock.json

+3,372-151
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+6
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,13 @@
77
},
88
"dependencies": {
99
"@clerk/nextjs": "^4.23.2",
10+
"@nextui-org/button": "^2.0.6",
11+
"@nextui-org/react": "^2.0.9",
1012
"@stripe/react-stripe-js": "2.1.1",
1113
"@stripe/stripe-js": "1.54.1",
1214
"@vercel/analytics": "^1.0.1",
1315
"analytics": "github:vercel/analytics",
16+
"framer-motion": "^10.15.1",
1417
"next": "latest",
1518
"react": "18.2.0",
1619
"react-dom": "18.2.0",
@@ -20,6 +23,9 @@
2023
"devDependencies": {
2124
"@types/node": "20.4.6",
2225
"@types/react": "18.2.18",
26+
"autoprefixer": "^10.4.14",
27+
"postcss": "^8.4.27",
28+
"tailwindcss": "^3.3.3",
2329
"typescript": "5.1.6"
2430
}
2531
}

‎postcss.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎styles.css

-28
This file was deleted.

‎styles/globals.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎tailwind.config.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { nextui } from "@nextui-org/theme";
2+
3+
/** @type {import('tailwindcss').Config} */
4+
module.exports = {
5+
content: [
6+
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
7+
"./components/**/*.{js,ts,jsx,tsx,mdx}",
8+
"./app/**/*.{js,ts,jsx,tsx,mdx}",
9+
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
10+
],
11+
theme: {
12+
extend: {},
13+
},
14+
darkMode: "class",
15+
plugins: [nextui()],
16+
};

0 commit comments

Comments
 (0)
Please sign in to comment.