Css to Profile and public profile

Eevee-Elites-Capstone · Feb 15, 2022 · 22aca19 · 22aca19
1 parent a8797f6
commit 22aca19
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 16 deletions.
diff --git a/src/components/Users/AllUsers.js b/src/components/Users/AllUsers.js
diff --git a/src/components/Users/OnlineUsers.js b/src/components/Users/OnlineUsers.js
@@ -1,8 +1,6 @@
 import React from 'react';
 import { useCollection } from '../../hooks/useCollection';
 import Avatar from '../UI/Avatar';
-// styles
-// import './OnlineUsers.css'
 
 export default function OnlineUsers() {
   const { isPending, error, documents } = useCollection('users')

diff --git a/src/components/Users/Profile.js b/src/components/Users/Profile.js
@@ -5,15 +5,12 @@ import { Link } from "react-router-dom";
 import Navbar from "../UI/Navbar";
 
 const EditProfile = () => {
-
   const { user } = useAuthContext();
-  const { document, error } = useDocument('users', user.uid);
-
-
-if(!document) {
-  return (<div>"loader bar here "</div>)
-}
+  const { document, error } = useDocument("users", user.uid);
 
+  if (!document) {
+    return <div>"loader bar here "</div>;
+  }
 
   return (
     <div>
@@ -56,8 +53,7 @@ if(!document) {
 
           <div className="flex flex-col rounded-lg  md:flex-rows w-full h-60 border-4 border-[#DADDFC] shadow-lg mt-2 p-4">
             <h2>Projects</h2>
-              photos
-
+            photos
           </div>
 
           <div className="flex flex-col rounded-lg  md:flex-rows w-full h-60 border-4 border-[#DADDFC] shadow-lg mt-2 p-4">
@@ -87,14 +83,17 @@ if(!document) {
               text-base
               font-normal"
             >
-              {document.skills}
+              <ul className="grid grid-cols-4 gap-2 uppercase">
+                {document.skills.map((skill) => {
+                  return <li key={skill}>{skill}</li>;
+                })}
+              </ul>
             </p>
           </div>
         </div>
       </div>
     </div>
   );
-}
-
+};
 
 export default EditProfile;
diff --git a/src/components/Users/PublicProfile.js b/src/components/Users/PublicProfile.js
@@ -153,7 +153,7 @@ const PublicProfile = () => {
                   alt="Avatar"
                 />
                 </div>
-                <div class="swiper-slide object-cover ">
+                <div className="swiper-slide object-cover ">
                 <img
                   src={photos[2]}
                   className="object-cover w-full h-96 z-0"
@@ -172,7 +172,11 @@ const PublicProfile = () => {
         <div className="flex flex-col rounded-xl shadow-lg  md:flex-rows w-full h-40  mt-2 p-2 bg-white border-4 border-[#DADDFC]">
           <h2 className="text-xl font-bold">Skills</h2>
           <p className="rounded-lg m-2 w-full h-fullpy-1.5 text-base font-normal">
-            {document.skills}
+            <ul className="grid grid-cols-4 gap-2 uppercase">
+            {document.skills.map( skill => {
+               return <li key={skill}>{skill}</li>
+            })}
+              </ul>
           </p>
         </div>