Add files via upload

componets/Contact.js

@@ -0,0 +1,20 @@
+import Image from "next/image";
+
+function Contact({ src, name }) {
+  return (
+    <div className="flex items-center space-x-3 mb-2 relative hover:bg-gray-200 cursor-pointer p-2 rounded-xl">
+      <Image
+        className="rounded-full"
+        objectFit="cover"
+        src={src}
+        width={50}
+        height={50}
+        layout="fixed"
+      />
+      <p>{name}</p>
+      <div className="absolute bottom-2 left-7 bg-green-400 h-3 w-3 rounded-full" />
+    </div>
+  );
+}
+
+export default Contact;

componets/Feed.js

@@ -0,0 +1,18 @@
+import React from "react";
+import InputBox from "./InputBox";
+import Stories from "./Stories";
+import Posts from "./Posts";
+
+function Feed({ posts }) {
+  return (
+    <div className="flex-grow h-screen pb-44 pt-6 mr-4 xl:mr-40 overflow-y-auto scrollbar-hide">
+      <div className="mx-auto max-w-md md:max-w-lg lg:max-w-2xl">
+        <Stories />
+        <InputBox />
+        <Posts posts={posts} />
+      </div>
+    </div>
+  );
+}
+
+export default Feed;

componets/Header.js

@@ -0,0 +1,72 @@
+import Image from "next/image";
+import{
+    BellIcon,
+    ChatIcon,
+    ChevronDownIcon,
+    HomeIcon,
+    UserGroupIcon,
+    ViewGridIcon
+}from "@heroicons/react/solid";
+import{
+    FlagIcon,
+    PlayIcon,
+    SearchIcon,
+    ShoppingCartIcon,
+}from "@heroicons/react/outline";
+import HeaderIcon from "./HeaderIcon";
+import { signOut, useSession } from "next-auth/client";
+
+function Header() {
+    const [session] =useSession();
+    return (
+        <div className="sticky top-0 x=50 bg-white flex items-center p-2 lg:p-5 shadow-md">
+
+            {/* left */}
+            <div className="flex items-center"> 
+             <Image 
+              src="https://links.papareact.com/5me"
+             width ={40}
+             height={40}
+             layout="fixed" 
+             /> 
+             <div className="flex ml-2 items-center rounded-fall bg-gray-100 p-2">
+                 <SearchIcon className="h-6 text-gray-600"/>
+                <input className="hidden md:inline-flex  ml-2 items-center bg-transparent outline-none placeholder-gray-500 flex-shrink" type="text" placeholder="Search Facebook"/>
+             </div>
+            </div>
+            {/* center */}
+            <div className="flex justify-center flex-grow">
+                <div className="flex space-x-6 md:space-x-2">
+                  <HeaderIcon active Icon={HomeIcon}/>
+                  <HeaderIcon Icon={FlagIcon}/>
+                  <HeaderIcon Icon={PlayIcon}/>
+                  <HeaderIcon Icon={ShoppingCartIcon}/>
+                  <HeaderIcon Icon={UserGroupIcon}/>
+                </div>
+            </div>
+             {/* right */}
+            <div className="flex items-center sm:space-x-2 justify-end">
+
+              {/* profile pic */}
+              <Image 
+              onClick={signOut}
+              className="rounded-full cursor-pointer"
+              src={session.user.image}
+             width ={40}
+             height={40}
+             layout="fixed" 
+             />
+              <p className=" whitespace-nowrap font-semibold p-3">
+              {session.user.name}</p>
+              <ViewGridIcon className="icon"/>
+              <ChatIcon className="icon"/>
+              <BellIcon className="icon"/>
+              <ChevronDownIcon className="icon"/>
+            </div>
+
+
+        </div>
+    )
+}
+
+export default Header

componets/HeaderIcon.js

@@ -0,0 +1,10 @@
+function HeaderIcon({Icon, active}) {
+    return (
+        <div className="flex items-center cursor-pointer md:px-10 sm:h-14 md:hover:bg-gray-100 rounded-xl active:border-b-2 active:border-blue-500 group">
+            <Icon className={`h-5 text-center sm:h-7 mx-auto group-hover:text-blue-500 text-gray-500 ${active && 'text-blue-500'}` }/>
+
+        </div>
+    )
+}
+
+export default HeaderIcon

componets/InputBox.js

@@ -0,0 +1,145 @@
+
+
+import { EmojiHappyIcon } from "@heroicons/react/outline";
+import { CameraIcon, VideoCameraIcon } from "@heroicons/react/solid";
+import { useSession } from "next-auth/client";
+import { useRef, useState } from "react";
+import { db, storage } from "../firebase";
+import firebase from "firebase";
+import Image from "next/image";
+
+function InputBox() {
+  const [session] = useSession();
+  const inputRef = useRef(null);
+  const [imageToPost, setImageToPost] = useState(null);
+  const filepickerRef = useRef(null);
+
+  const sendPost = (e) => {
+    e.preventDefault();
+
+    if (!inputRef.current.value) return;
+
+    db.collection("posts")
+      .add({
+        message: inputRef.current.value,
+        name: session.user.name,
+        email: session.user.email,
+        image: session.user.image,
+        timestamp: firebase.firestore.FieldValue.serverTimestamp(),
+      })
+      .then((doc) => {
+        if (imageToPost) {
+          const uploadTask = storage
+            .ref(`posts/${doc.id}`)
+            .putString(imageToPost, "data_url");
+
+          removeImage();
+
+          uploadTask.on(
+            "state_changed",
+            null,
+            (error) => {
+              // ERROR function
+              console.log(error);
+            },
+            () => {
+              // COMPLETE function
+              storage
+                .ref("posts")
+                .child(doc.id)
+                .getDownloadURL()
+                .then((url) => {
+                  db.collection("posts").doc(doc.id).set(
+                    {
+                      postImage: url,
+                    },
+                    { merge: true }
+                  );
+                });
+            }
+          );
+        }
+      });
+
+    inputRef.current.value = "";
+  };
+
+  const addImageToPost = (e) => {
+    const reader = new FileReader();
+    if (e.target.files[0]) {
+      reader.readAsDataURL(e.target.files[0]);
+    }
+
+    reader.onload = (readerEvent) => {
+      setImageToPost(readerEvent.target.result);
+    };
+  };
+
+  const removeImage = () => {
+    setImageToPost(null);
+  };
+
+  return (
+    <div className="bg-white p-2 rounded-2xl shadow-md text-gray-500 font-medium mt-6">
+      <div className="flex space-x-4 p-4 items-center">
+        <Image
+          className="rounded-full"
+          src={session.user.image}
+          width={40}
+          height={40}
+          layout="fixed"
+        />
+        <form className="flex flex-1">
+          <input
+            className="rounded-full h-12 bg-gray-100 flex-grow px-5 focus:outline-none"
+            type="text"
+            placeholder={`What's on your mind, ${session.user.name}?`}
+            ref={inputRef}
+          />
+          <button hidden onClick={sendPost}>
+            Submit
+          </button>
+        </form>
+
+        {imageToPost && (
+          <div
+            onClick={removeImage}
+            className="flex flex-col filter hover:brightness-110 transition duration-150 transform hover:scale-105 cursor-pointer"
+          >
+            <img className="h-10 object-contain " src={imageToPost} alt="" />
+            <p className="text-xs text-red-500 text-center">Remove</p>
+          </div>
+        )}
+      </div>
+
+      <div className="flex justify-evenly p-3 border-t">
+        <div className="inputIcon">
+          <VideoCameraIcon className="h-7 text-red-500" />
+          <p className="text-xs sm:text-sm xl:text-base">Live Video</p>
+        </div>
+
+        <div
+          onClick={() => filepickerRef.current.click()}
+          className="inputIcon"
+        >
+          <CameraIcon className="h-7 text-green-400" />
+          <p className="text-xs sm:text-sm xl:text-base">Photo/Video</p>
+          <input
+            onChange={addImageToPost}
+            ref={filepickerRef}
+            type="file"
+            hidden
+          />
+        </div>
+
+        <div className="inputIcon">
+          <EmojiHappyIcon className="h-7 text-yellow-300" />
+          <p className="text-xs sm:text-sm xl:text-base">Feeling/Activity</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default InputBox;
+

componets/Login.js

@@ -0,0 +1,17 @@
+import Image from "next/image";
+import { signIn } from 'next-auth/client';
+function Login() {
+    return (
+        <div className="grid place-items-center">
+            <Image 
+            src="https://links.papareact.com/5me"
+             width ={300}
+             height={300}
+             objectfit="contain"
+             />
+             <h1 onClick={signIn} className="p-5 bg-blue-500 rounded-full text-white text-center cursor-pointer">Login with Facebook</h1>
+        </div>
+    )
+}
+
+export default Login

componets/Post.js

@@ -0,0 +1,51 @@
+import { ChatAltIcon, ShareIcon, ThumbUpIcon } from "@heroicons/react/outline";
+import Image from "next/image";
+
+function Post({ name, message, email, postImage, image, timestamp }) {
+  return (
+    <div className="flex flex-col">
+      <div className="p-5 bg-white mt-5 rounded-t-2xl shadow-sm">
+        <div className="flex items-center space-x-2">
+          <img className="rounded-full" src={image} width={40} height={40} />
+          <div>
+            <p className="font-medium">{name}</p>
+            {timestamp ? (
+              <p className="text-xs text-gray-400">
+                {new Date(timestamp?.toDate()).toLocaleString()}
+              </p>
+            ) : (
+              <p className="text-xs text-gray-400">Loading</p>
+            )}
+          </div>
+        </div>
+
+        <p className="pt-4">{message}</p>
+      </div>
+      {postImage && (
+        <div className="relative h-56 md:h-96 bg-white">
+          <Image src={postImage} objectFit="cover" layout="fill" />
+        </div>
+      )}
+
+      {/* Post Footer */}
+      <div className="flex justify-between items-center rounded-b-2xl bg-white shadow-md text-gray-400 border-t">
+        <div className="inputIcon p-3 rounded-none rounded-bl-2xl">
+          <ThumbUpIcon className="h-4" />
+          <p className="text-xs sm:text-base">Like</p>
+        </div>
+
+        <div className="inputIcon p-3 rounded-none">
+          <ChatAltIcon className="h-4" />
+          <p className="text-xs sm:text-base">Comment</p>
+        </div>
+
+        <div className="inputIcon p-3 rounded-none rounded-br-2xl">
+          <ShareIcon className="h-4" />
+          <p className="text-xs sm:text-base">Share</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Post;

componets/Posts.js

@@ -0,0 +1,38 @@
+import { db } from "../firebase";
+import { useCollection } from "react-firebase-hooks/firestore";
+import Post from "./Post";
+
+function Posts({ posts }) {
+  const [realtimePosts, loading, error] = useCollection(
+    db.collection("posts").orderBy("timestamp", "desc")
+  );
+
+  return (
+    <div>
+      {realtimePosts
+        ? realtimePosts?.docs.map((post) => (
+            <Post
+              key={post.id}
+              name={post.data().name}
+              message={post.data().message}
+              email={post.data().email}
+              timestamp={post.data().timestamp}
+              image={post.data().image}
+              postImage={post.data().postImage}
+            />
+          )):posts.map((post) => (
+            <Post
+              key={post.id}
+              name={post.name}
+              message={post.message}
+              email={post.email}
+              timestamp={post.timestamp}
+              image={post.image}
+              postImage={post.postImage}
+            />
+          ))}
+    </div>
+  );
+}
+
+export default Posts;