🔃 updated user interface(#21)

SashenJayathilaka · Oct 11, 2022 · 369966f · 369966f
1 parent 4a74ad7
commit 369966f
Show file tree

Hide file tree

Showing 20 changed files with 392 additions and 121 deletions.
diff --git a/components/NotUserMenu.tsx b/components/NotUserMenu.tsx
@@ -1,11 +1,10 @@
 /* eslint-disable @next/next/no-img-element */
-import { faker } from "@faker-js/faker";
-import React, { useEffect, useState } from "react";
+import React from "react";
 
 type RightMenuProps = {};
 
 const RightMenu: React.FC<RightMenuProps> = () => {
-  const [suggestions, setSuggestions] = useState<any[]>([]);
+  /*   const [suggestions, setSuggestions] = useState<any[]>([]);
 
   useEffect(() => {
     const suggestions = [...Array(5)].map((_, i) => ({
@@ -21,7 +20,7 @@ const RightMenu: React.FC<RightMenuProps> = () => {
     }));
     setSuggestions(suggestions);
     //console.log(suggestions);
-  }, []);
+  }, []); */
 
   return (
     <div className="w-1/5 pt-16 h-full hidden xl:block px-4 fixed top-0 right-0 overflow-scroll scrollbar-hide">
@@ -71,7 +70,17 @@ const RightMenu: React.FC<RightMenuProps> = () => {
             </div>
           </div>
         </div> */}
-        <ul className="p-2">
+        <iframe
+          title="facebook Iframe"
+          src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FFacebookforDevelopers&tabs=timeline&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
+          height="500"
+          style={{ border: "none", overflow: "hidden" }}
+          scrolling="no"
+          frameBorder="0"
+          allow="encrypted-media"
+          className="rounded-md"
+        ></iframe>
+        {/*         <ul className="p-2">
           {suggestions.map((data, index) => (
             <li key={index}>
               <div className="flex items-center space-x-4 p-2 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-lg cursor-pointer">
@@ -89,7 +98,7 @@ const RightMenu: React.FC<RightMenuProps> = () => {
               </div>
             </li>
           ))}
-        </ul>
+        </ul> */}
       </div>
     </div>
   );

diff --git a/components/Post.tsx b/components/Post.tsx
@@ -19,12 +19,12 @@ import {
   serverTimestamp,
   setDoc,
 } from "firebase/firestore";
+import { motion } from "framer-motion";
 import moment from "moment";
+import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import { useAuthState } from "react-firebase-hooks/auth";
 import { auth, firestore } from "../firebase/firebase";
-import { motion } from "framer-motion";
-import { useRouter } from "next/router";
 
 type PostProps = {
   author: any;
@@ -178,17 +178,45 @@ const Post: React.FC<PostProps> = ({
       <div className="px-4 py-2">
         <div className="flex items-center justify-between">
           <div className="flex flex-row-reverse items-center">
-            <span className="ml-2 text-gray-500 dark:text-gray-300">
-              {likes.length}
-            </span>
-            <span className="rounded-full grid place-items-center text-2xl -ml-2 text-yellow-600">
-              <EmojiEmotionsIcon />
+            {user ? (
+              <>
+                {hasLikes ? (
+                  <span className="ml-2 text-gray-500 dark:text-gray-300 text-sm">
+                    {"You, "}
+                    {faker.name.fullName()} {"and"} {likes.length} {"others"}
+                  </span>
+                ) : (
+                  <span className="ml-2 text-gray-500 dark:text-gray-300 text-sm">
+                    {faker.name.fullName()} {"and"} {likes.length} {"others"}
+                  </span>
+                )}
+              </>
+            ) : (
+              <span className="ml-2 text-gray-500 dark:text-gray-300 text-sm">
+                {likes.length}
+              </span>
+            )}
+
+            <span className="rounded-full grid place-items-center text-2xl -ml-1 text-yellow-600">
+              <img
+                src="https://i.postimg.cc/L89gyc8L/heart.png"
+                alt="like/button"
+                className="w-5 h-5"
+              />
             </span>
-            <span className="rounded-full grid place-items-center text-2xl -ml-2 text-red-500">
-              <FavoriteIcon />
+            <span className="rounded-full grid place-items-center text-2xl -ml-1 text-red-500">
+              <img
+                src="https://i.postimg.cc/4xW7jWYM/haha.png"
+                alt="like/button"
+                className="w-5 h-5"
+              />
             </span>
-            <span className="rounded-full grid place-items-center text-2xl -ml-2 text-blue-500">
-              <ThumbUpIcon />
+            <span className="rounded-full grid place-items-center text-2xl -ml-1 text-blue-500">
+              <img
+                src="https://i.postimg.cc/bNH29ypq/like.png"
+                alt="like/button"
+                className="w-5 h-5"
+              />
             </span>
           </div>
           <div className="text-gray-500 dark:text-gray-300">

diff --git a/components/RightMenu.tsx b/components/RightMenu.tsx
@@ -73,7 +73,7 @@ const RightMenu: React.FC<RightMenuProps> = ({ isMessenger }) => {
               <div className="flex justify-between mt-3 cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-800 px-2 py-2 rounded-md">
                 <img
                   className="w-8 h-8 mr-2"
-                  src="https://freepikpsd.com/file/2019/10/birthday-present-transparent-background-5-Transparent-Images.png"
+                  src="https://i.postimg.cc/jdr7fwV8/gift.png"
                   alt=""
                 />
                 <p className="text-md">

diff --git a/components/profilePage/CustomPosts.tsx b/components/profilePage/CustomPosts.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import Filter from "../../icons/filter";
+
+type CustomPostsProps = {};
+
+const CustomPosts: React.FC<CustomPostsProps> = () => {
+  return (
+    <div>
+      <div className="p-4 bg-white shadow-fb rounded w-full mt-4 dark:bg-gray-800">
+        <div className="flex justify-between items-center">
+          <div className="text-xl font-bold text-fBlack">Posts</div>
+          <button className="bg-fFill text-fBlack px-4 py-2.5 focus:outline-none rounded flex justify-center items-center">
+            <Filter /> <span className="ml-2">Posts</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default CustomPosts;
diff --git a/components/profilePage/Intro.tsx b/components/profilePage/Intro.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import { faker } from "@faker-js/faker";
+
+import SuitCase from "../../icons/suitCase";
+import Hat from "../../icons/hat";
+import HomeAlt from "../../icons/homeAlt";
+import Pin from "../../icons/pin";
+import RSS from "../../icons/rss";
+
+type IntroProps = {};
+
+const Intro: React.FC<IntroProps> = () => {
+  return (
+    <div className="p-4 shadow rounded-lg bg-white w-80 dark:bg-gray-800">
+      <div className="text-xl font-bold text-fBlack">Intro</div>
+      <div className="mt-4 flex items-center">
+        <SuitCase />
+        <span className="ml-2">{faker.company.bs()}</span>
+      </div>
+      <div className="mt-4 flex items-center">
+        <Hat />
+        <span className="ml-2">{faker.company.suffixes()}</span>
+      </div>
+      {/*       <div className="mt-4 flex items-center">
+        <Hat />
+        <span className="ml-2">{faker.company.companySuffix()}</span>
+      </div> */}
+      <div className="mt-4 flex items-center">
+        <HomeAlt />
+        <span className="ml-2">
+          Lives in <b>{faker.address.city()}</b>{" "}
+        </span>
+      </div>
+      <div className="mt-4 flex items-center">
+        <Pin />
+        <span className="ml-2">
+          From <b>{faker.address.country()}</b>{" "}
+        </span>
+      </div>
+      <div className="mt-4 flex items-center">
+        <RSS />
+        <span className="ml-2">
+          Followed by <b>{faker.random.numeric()} people</b>{" "}
+        </span>
+      </div>
+    </div>
+  );
+};
+export default Intro;
diff --git a/components/profilePage/Photos.tsx b/components/profilePage/Photos.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+
+type PhotosProps = {};
+
+const Photos: React.FC<PhotosProps> = () => {
+  return (
+    <div className="w-full shadow-fb bg-white rounded p-4">
+      <div className="flex justify-between items-center">
+        <div className="text-xl font-bold text-fBlack">Photos</div>
+        <button className="focus:outline-none text-fBlue">
+          See All Photos
+        </button>
+      </div>
+      <div className="grid grid-cols-3 flex gap-1.5 mt-4">
+        <img
+          src="https://picsum.photos/id/1018/3000"
+          className="rounded-tl"
+          alt="photo"
+        />
+        <img src="https://picsum.photos/id/1018/3000" alt="photo" />
+        <img
+          src="https://picsum.photos/id/1018/3000"
+          className="rounded-tr"
+          alt="photo"
+        />
+        <img src="https://picsum.photos/id/1018/3000" alt="photo" />
+        <img src="https://picsum.photos/id/1018/3000" alt="photo" />
+        <img src="https://picsum.photos/id/1018/3000" alt="photo" />
+        <img
+          src="https://picsum.photos/id/1018/3000"
+          className="rounded-bl"
+          alt="photo"
+        />
+        <img src="https://picsum.photos/id/1018/3000" alt="photo" />
+        <img
+          src="https://picsum.photos/id/1018/3000"
+          className="rounded-br"
+          alt="photo"
+        />
+      </div>
+    </div>
+  );
+};
+export default Photos;
diff --git a/components/profilePage/Profile.tsx b/components/profilePage/Profile.tsx
@@ -2,10 +2,13 @@ import { faker } from "@faker-js/faker";
 import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import { useAuthState } from "react-firebase-hooks/auth";
+
 import PostForm from "../PostForm";
 import ProfileFeed from "./ProfileFeed";
 import ProfileHeader from "./ProfileHeader";
 import { auth } from "../../firebase/firebase";
+import CustomPosts from "./CustomPosts";
+import Intro from "./Intro";
 
 type ProfileProps = {};
 
@@ -62,13 +65,9 @@ const Profile: React.FC<ProfileProps> = () => {
               {/* LEFT */}
               <div>
                 {/* // INTRO */}
+
                 <div className="mr-12 mt-4">
-                  <div
-                    className="p-4 shadow rounded-lg bg-white w-80 dark:bg-gray-800"
-                    id="intro"
-                  >
-                    <h1 className="font-bold text-xl">Intro</h1>
-                  </div>
+                  <Intro />
                 </div>
                 {/* // END INTRO */}
 
@@ -132,6 +131,8 @@ const Profile: React.FC<ProfileProps> = () => {
                 {/*  <CreatePost /> */}
                 {isShow && <PostForm isShow={false} userData={userData} />}
 
+                <CustomPosts />
+
                 {/* END CREATE POST */}
 
                 {/* POST */}