Merge pull request #213 from ChetanSaini12/main

Experience Page Done
ChetanSaini12 · Jul 1, 2024 · b638aae · b638aae
2 parents 36a38b1 + 596093f
commit b638aae
Show file tree

Hide file tree

Showing 6 changed files with 777 additions and 531 deletions.
diff --git a/frontend/src/Components/Loader2.jsx b/frontend/src/Components/Loader2.jsx
@@ -3,8 +3,9 @@ import '../index.css';
 
 export const Loader2 = () => {
     return (
-        <div className="loader-2-container">
-            <div className="loader-2 bg-gray-400 dark:bg-gray-600"></div>
-        </div>
+        // <div className="loader-2-container">
+            // <div className="loader-2 bg-gray-400 dark:bg-gray-600"></div>
+            <div className=" bg-gray-400 dark:bg-gray-600"></div>
+        // </div>
     )
 }
diff --git a/frontend/src/Pages/Experience/AllExperience.jsx b/frontend/src/Pages/Experience/AllExperience.jsx
@@ -11,6 +11,8 @@ import { FaUserCircle } from "react-icons/fa";
 import { IoIosArrowBack } from "react-icons/io";
 import { LiaCommentSolid } from "react-icons/lia";
 import { AiTwotoneLike } from "react-icons/ai";
+import { PiHandsClappingLight } from "react-icons/pi";
+import { FaRegComment } from "react-icons/fa";
 import moment from 'moment';
 
 export const AllExperience = () => {
@@ -74,32 +76,30 @@ export const AllExperience = () => {
     }
 
     return (
-        <div className='flex flex-col items-center py-0.5 gap-5 min-w-screen max-w-screen min-h-screen' >
-            {/* <h1 className='text-3xl font-bold'>All Experiences</h1> */}
-            <div className='flex flex-col w-full'>
+        <div className='flex flex-col my-3 items-center py-0.5 gap-5 min-w-screen max-w-screen min-h-screen' >
+            <h1 className='text-3xl font-bold'>Explore Latest Companies Experiences</h1>
+            <div className='flex flex-col w-5/6'>
                 {ready && experienceData?.length === 0 && <h1 className='text-2xl font-semibold'>No experiences to show</h1>}
                 {experienceData && experienceData?.map((exp, index) => {
                     return (
-                        <div key={index} className=" flex flex-col bg-gray-200 dark:bg-gray-800 dark:opacity-75 rounded shadow-md py-4 px-2 md:px-6  hover:shadow-lg hover:bg-gray-300
+                        <div key={index} className=" flex flex-col bg-gray-200 dark:bg-gray-800 dark:opacity-75 rounded shadow-md py-4 px-4 md:px-6  hover:shadow-lg hover:bg-gray-300
                          dark:hover:bg-gray-700 transition duration-300  mb-2">
                             <Link to={`/experience/${exp.id}`}>
                                 <div className='flex justify-between items-center gap-1'>
                                     <div>
                                         <div className='mb-1 flex gap-1 items-center'>
                                             <FaUserCircle />
-                                            <h2 className='text-xs'>{exp.anonymous ? "Anonymous user" : exp.creatorUsername}</h2>
+                                            <h2 className='text-xs'>{(exp.anonymous || !exp.creatorUsername) ? "Anonymous user" : exp.creatorUsername}</h2>
                                         </div>
                                         <div className='flex gap-1 items-center'>
-                                            <h1 className='text-md sm:text-lg font-semibold'>{exp.company}</h1>
-                                            <h2 className='font-semibold'> | {exp.role}</h2>
-                                        </div>
-                                        <div className='text-pretty leading-relaxed'>
-                                            {truncatedDescription(exp.description, 10)}
+                                            <h1 className='text-md sm:text-lg font-semibold'>{exp.company} | {exp.role}</h1>
                                         </div>
+                                        {/* EXP DESCRIPTION */}
+                                        <div className='text-pretty text-xs text-slate-600 dark:text-slate-400 leading-relaxed' dangerouslySetInnerHTML={{ __html: truncatedDescription(exp.description, 20) }} />
                                         <div className=' mt-3 text-xs flex flex-wrap justify-start gap-2'>
                                             <h2>{moment(exp.createdAt).format('DD MMMM')}</h2>
                                             <div className='flex gap-1 items-center '>
-                                                <AiTwotoneLike size={13} />
+                                                <PiHandsClappingLight size={13} />
                                                 <h3 className=''>{exp.upvotes - exp.downvotes}</h3>
                                             </div>
                                             <div className='flex gap-1 items-center '>