Skip to content

Commit 4ac6620

Browse files
motorcyklemotorcykle
committed
home
1 parent e5dd0f1 commit 4ac6620

File tree

7 files changed

+117
-7
lines changed

7 files changed

+117
-7
lines changed

‎components/DocumentRow.js

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,21 @@
11
import React from 'react';
2+
import { useRouter } from 'next/router'
3+
import MoreVertIcon from '@material-ui/icons/MoreVert';
4+
import { IconButton } from '@material-ui/core';
5+
import DescriptionIcon from '@material-ui/icons/Description';
6+
7+
const DocumentRow = ({ doc }) => {
8+
9+
const router = useRouter();
210

3-
const DocumentRow = () => {
411
return (
5-
<div>
6-
12+
<div onClick={() => router.push(`/doc/${doc?.id}`)} className="flex items-center p-4 rounded-lg hover:bg-gray-100 text-gray-700 cursor-pointer text-sm border mb-2">
13+
<DescriptionIcon color="primary" />
14+
<p className="flex-grow ml-5 w-10 mr-10 truncate">{doc?.fileName}</p>
15+
<p className="text-sm mr-6">{doc?.timestamp?.toDate().toLocaleDateString()}</p>
16+
<IconButton>
17+
<MoreVertIcon />
18+
</IconButton>
719
</div>
820
);
921
}

‎components/Header.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,21 @@ import { signOut } from 'next-auth/client';
88

99
const Header = () => {
1010
return (
11-
<header className="p-2 shadow-md">
11+
<header className="p-2 shadow-md sticky top-0">
1212
<div className="grid grid-cols-4">
1313

1414
<div className="flex items-center col-span-1">
1515
<IconButton>
1616
<MenuIcon />
1717
</IconButton>
18-
<div className="text-[#2196f3] item-center space-x-2 ml-3 hidden md:inline-flex">
18+
<div className="text-[#2196f3] items-center space-x-2 ml-3 hidden md:inline-flex">
1919
<DescriptionIcon fontSize="large" />
20-
<p className="!text-2xl text-gray-500">Docs</p>
20+
<p className="text-xl text-gray-500">Docs</p>
2121
</div>
2222
</div>
2323

2424
<div className="col-span-2">
25-
<div className="bg-gray-100 rounded-lg hidden md:inline-flex items-center space-x-1 text-gray-500 focus-within:text-gray-600 focus-within:shadow-md">
25+
<div className="bg-gray-100 rounded-lg hidden md:inline-flex w-full items-center space-x-1 text-gray-500 focus-within:text-gray-600 focus-within:shadow-md">
2626
<IconButton>
2727
<SearchIcon />
2828
</IconButton>

‎firebase.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import firebase from 'firebase';
2+
3+
const firebaseConfig = {
4+
apiKey: process.env.API_KEY,
5+
authDomain: "gdocsclone.firebaseapp.com",
6+
projectId: "gdocsclone",
7+
storageBucket: "gdocsclone.appspot.com",
8+
messagingSenderId: "531727213919",
9+
appId: process.env.APP_ID
10+
};
11+
12+
const app = !firebase.apps.length ? firebase.initializeApp(firebaseConfig) : firebase.app();
13+
14+
const db = app.firestore();
15+
16+
export default db;

‎next.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
images: {
3+
domains: ['ssl.gstatic.com'],
4+
},
5+
}

‎pages/_app.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import 'tailwindcss/tailwind.css'
2+
import '../styles.css'
23
import { Provider } from 'next-auth/client'
34

45
function MyApp({ Component, pageProps }) {

‎pages/index.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,27 @@ import Header from '../components/Header';
33
import { useEffect } from 'react';
44
import Login from '../components/Login';
55
import { getSession } from 'next-auth/client';
6+
import { Button, IconButton } from '@material-ui/core';
7+
import UnfoldMoreIcon from '@material-ui/icons/UnfoldMore';
8+
import MoreVertIcon from '@material-ui/icons/MoreVert';
9+
import FolderOpenIcon from '@material-ui/icons/FolderOpen';
10+
import Image from 'next/image';
611

712
export default function Home({ session }) {
813

914
if (!session) return <Login />
1015

16+
// useEffect(() => {
17+
// const unsub = db
18+
// .collection('userDocs')
19+
// .doc(session?.user.email)
20+
// .collection('docs')
21+
// .get().then(shit => shit.docs.forEach(doc => console.log(doc.id)))
22+
23+
24+
// return unsub
25+
// }, [])
26+
1127
return (
1228
<div className="">
1329
<Head>
@@ -17,6 +33,57 @@ export default function Home({ session }) {
1733

1834
<Header />
1935

36+
<section className="bg-[#F0F3F4] py-5 text-gray-600 px-5 md:px-0">
37+
<div className="max-w-6xl mx-auto">
38+
39+
<div className="flex justify-between items-center">
40+
<p>Start a new document</p>
41+
42+
<div className="newDoc-btns flex items-center space-x-2">
43+
<Button>
44+
Template gallery
45+
<UnfoldMoreIcon />
46+
</Button>
47+
<div className="border-l h-7 bg-gray-600 border-gray-300"></div>
48+
<IconButton>
49+
<MoreVertIcon />
50+
</IconButton>
51+
</div>
52+
</div>
53+
54+
<div className="">
55+
56+
<div className="">
57+
<div className="relative h-52 w-40 border cursor-pointer hover:border-blue-700 rounded-md overflow-hidden">
58+
<Image src={"https://ssl.gstatic.com/docs/templates/thumbnails/docs-blank-googlecolors.png"} layout="fill" />
59+
</div>
60+
<p className="ml-2 mt-2 text-sm">Blank</p>
61+
</div>
62+
63+
</div>
64+
65+
66+
</div>
67+
</section>
68+
69+
<section className="py-5 text-gray-600 px-5 md:px-0">
70+
<div className="max-w-6xl mx-auto">
71+
<div className="flex items-center justify-between pb-5">
72+
<h2 className="font-medium flex-grow">My Documents</h2>
73+
<p className="mr-12">Date created</p>
74+
<FolderOpenIcon />
75+
</div>
76+
77+
{/* {snapshot?.docs?.map(doc => (
78+
<DocumentRow
79+
key={doc.id}
80+
doc={{ ...doc.data(), id: doc.id }}
81+
/>
82+
))} */}
83+
84+
</div>
85+
</section>
86+
2087
</div>
2188
)
2289
}

‎styles.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.newDoc-btns .MuiButton-root {
2+
text-transform: none !important;
3+
font-weight: 400;
4+
color: rgba(75, 85, 99);
5+
}
6+
7+
.newDoc-btns .MuiButton-root svg {
8+
margin-left: 0.25em;
9+
}

0 commit comments

Comments
 (0)