Skip to content

Commit ac912bc

Browse files
flovflov
committed
React fire, tailwindcss
1 parent 9549cd4 commit ac912bc

11 files changed

+1336
-112
lines changed

‎package.json

+7-1
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,15 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"autoprefixer": "^10.4.7",
13+
"firebase": "^9.8.4",
1214
"next": "12.2.0",
15+
"postcss": "^8.4.14",
1316
"react": "18.2.0",
14-
"react-dom": "18.2.0"
17+
"react-dom": "18.2.0",
18+
"react-firebase-hooks": "^5.0.3",
19+
"reactfire": "^4.2.1",
20+
"tailwindcss": "^3.1.4"
1521
},
1622
"devDependencies": {
1723
"@types/node": "18.0.0",

‎pages/_app.tsx

+22-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,26 @@
1-
import '../styles/globals.css'
2-
import type { AppProps } from 'next/app'
1+
import '../styles/globals.css';
2+
import type { AppProps } from 'next/app';
3+
import { FirebaseAppProvider } from 'reactfire';
4+
import { firebaseConfig } from '../src/utils/firebase';
5+
import { createContext, Dispatch, SetStateAction, useState } from 'react';
6+
import { UserCredential } from 'firebase/auth';
7+
8+
type UserContextType = {
9+
user: UserCredential | null;
10+
setUser: Dispatch<SetStateAction<UserCredential>>;
11+
} | null;
12+
13+
export const UserContext = createContext<UserContextType>(null);
314

415
function MyApp({ Component, pageProps }: AppProps) {
5-
return <Component {...pageProps} />
16+
const [user, setUser] = useState(null);
17+
return (
18+
<FirebaseAppProvider firebaseConfig={firebaseConfig}>
19+
<UserContext.Provider value={{ user, setUser }}>
20+
<Component {...pageProps} />
21+
</UserContext.Provider>
22+
</FirebaseAppProvider>
23+
);
624
}
725

8-
export default MyApp
26+
export default MyApp;

‎pages/api/hello.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,4 @@ export default function handler(
1010
res: NextApiResponse<Data>
1111
) {
1212
res.status(200).json({ name: 'John Doe' })
13-
}
13+
}

‎pages/index.tsx

+19-61
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,30 @@
1-
import type { NextPage } from 'next'
2-
import Head from 'next/head'
3-
import Image from 'next/image'
4-
import styles from '../styles/Home.module.css'
1+
import type { NextPage } from 'next';
2+
import Head from 'next/head';
3+
import Image from 'next/image';
4+
import Link from 'next/link';
5+
import styles from '../styles/Home.module.css';
6+
import { CurrentUser } from '../src/components/CurrentUser';
57

68
const Home: NextPage = () => {
79
return (
8-
<div className={styles.container}>
10+
<>
911
<Head>
10-
<title>Create Next App</title>
11-
<meta name="description" content="Generated by create next app" />
12+
<title>Hitchlog</title>
13+
<meta name="description" content="Log your hitchhiking experience" />
1214
<link rel="icon" href="/favicon.ico" />
1315
</Head>
1416

15-
<main className={styles.main}>
17+
<main>
18+
<div className='w-full bg-gray-200 h-96' id="map"></div>
19+
<h1 className="text-3xl font-bold underline">Hello world!</h1>
20+
1621
<h1 className={styles.title}>
17-
Welcome to <a href="https://nextjs.org">Next.js!</a>
22+
Welcome to <Link href="/">Hitchlog</Link>
1823
</h1>
19-
20-
<p className={styles.description}>
21-
Get started by editing{' '}
22-
<code className={styles.code}>pages/index.tsx</code>
23-
</p>
24-
25-
<div className={styles.grid}>
26-
<a href="https://nextjs.org/docs" className={styles.card}>
27-
<h2>Documentation &rarr;</h2>
28-
<p>Find in-depth information about Next.js features and API.</p>
29-
</a>
30-
31-
<a href="https://nextjs.org/learn" className={styles.card}>
32-
<h2>Learn &rarr;</h2>
33-
<p>Learn about Next.js in an interactive course with quizzes!</p>
34-
</a>
35-
36-
<a
37-
href="https://github.com/vercel/next.js/tree/canary/examples"
38-
className={styles.card}
39-
>
40-
<h2>Examples &rarr;</h2>
41-
<p>Discover and deploy boilerplate example Next.js projects.</p>
42-
</a>
43-
44-
<a
45-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
46-
className={styles.card}
47-
>
48-
<h2>Deploy &rarr;</h2>
49-
<p>
50-
Instantly deploy your Next.js site to a public URL with Vercel.
51-
</p>
52-
</a>
53-
</div>
24+
<CurrentUser />
5425
</main>
26+
</>
27+
);
28+
};
5529

56-
<footer className={styles.footer}>
57-
<a
58-
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
59-
target="_blank"
60-
rel="noopener noreferrer"
61-
>
62-
Powered by{' '}
63-
<span className={styles.logo}>
64-
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
65-
</span>
66-
</a>
67-
</footer>
68-
</div>
69-
)
70-
}
71-
72-
export default Home
30+
export default Home;

‎pages/yoyo.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { NextPage } from 'next';
2+
3+
const Yoyo: NextPage = () => (
4+
<h1 className="text-3xl font-bold underline">Hello world!</h1>
5+
);
6+
7+
export default Yoyo;

0 commit comments

Comments
 (0)