Skip to content

Commit fb8a8fa

Browse files
BasharElmetwaliahmedBasharElmetwaliahmed
committed
add tracks
1 parent 5cc8502 commit fb8a8fa

32 files changed

+428
-45
lines changed

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/src/assets/images/logo.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Code Link</title>
7+
<title>CodeLink</title>
88
<link rel="preconnect" href="https://fonts.googleapis.com">
99
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1010
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

‎src/App.jsx

+17-2
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ import { setSavedUser } from "./store/user/userSlice";
1212
import Home, { loader as postsLoader } from "./Pages/Home/Home";
1313
import Layout from "./Protected/Layout";
1414
import ResetPassword from "./Components/Forms/ResetPassword";
15+
import Tracks from "./Components/Friends/Tracks";
16+
import SelectionsSearch from "./Components/Home/HomeSideBar/SelectionsSearch";
17+
import FriendsList from './Components/Friends/FriendsList'
18+
import Friends from "./Components/Friends/FriendsList";
1519
// const router=createBrowserRouter(
1620
// [{
1721
// path:'/',
@@ -53,8 +57,19 @@ import ResetPassword from "./Components/Forms/ResetPassword";
5357
const router=createBrowserRouter([{
5458
element:<Home/>,
5559
path:'/',
56-
loader:postsLoader
57-
}])
60+
loader:postsLoader,
61+
children:[
62+
{
63+
index:true,
64+
element:<SelectionsSearch/>
65+
},
66+
67+
{
68+
path:'friends',
69+
element:<Friends/>,
70+
},],
71+
}
72+
])
5873
function App() {
5974
// const dispatch=useDispatch()
6075
// useEffect(()=>{

‎src/Components/Friends/FriendsList.jsx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import Tracks from './Tracks'
2+
3+
function Friends() {
4+
return (
5+
<div><Tracks/></div>
6+
)
7+
}
8+
9+
export default Friends

‎src/Components/Friends/TrackItem.jsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/* eslint-disable react/prop-types */
2+
/* eslint-disable react/no-unknown-property */
3+
4+
function TrackItem({track}) {
5+
return (
6+
<div className="w-[141px] h-[141px]">
7+
<img img={track.trackImg} src={track.trackText}/>
8+
<h2 className="text-lg">{track.trackText}</h2>
9+
</div>
10+
)
11+
}
12+
13+
export default TrackItem

‎src/Components/Friends/Tracks.jsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import tracks from "../../fakedata/tracks"
2+
import BoxItem from "../Home/HomeSideBar/BoxItem"
3+
import TrackItem from "./TrackItem"
4+
function Tracks() {
5+
return (
6+
<div className="scroll-y overflow-y-auto custom-scrollbar">
7+
<h2 className="text-xl my-6 font-normal">Choose your technical circle!</h2>
8+
<div className="flex flex-wrap justify-between h-fit w-full ">
9+
{tracks.map((track, index) => {
10+
return <BoxItem key={index} imgPath={track.trackImg} path={track.trackText} />
11+
})}
12+
</div>
13+
14+
</div>
15+
)
16+
}
17+
18+
export default Tracks

‎src/Components/Home/FriendsList/FriendsList.jsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import MyFriends from "./MyFriends/MyFriends"
22
import Requests from "./Requests/Requests"
33

4-
function FriendsList() {
4+
function FriendsList({isFixed}) {
55
return (
6-
<div className="w-1/4 p-4 ">
6+
<div className="w-1/4">
7+
<div className={`w-full p-4 ${!isFixed?'':'fixed !w-1/4 top-0 transform '} `}>
78
<Requests/>
89
<MyFriends/>
910
</div>
11+
</div>
12+
1013
)
1114
}
1215

‎src/Components/Home/HomeSideBar/BoxItem.jsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Link } from 'react-router-dom';
2+
function BoxItem({path,imgPath}) {
3+
return (
4+
<Link to={path} className='shadow-[0px_6px_20px_0px_rgba(218,218,218,0.3)] bg-white px-8 py-5 rounded-2xl element-center flex-col w-[150px] h-[150px] mb-9 justify-between hover:scale-[0.9] transition-all duration-200 hover:bg-opacity-70 '>
5+
<img src={imgPath} alt={`Image`} />
6+
<p className='text-sm text-center font-semibold' >{path}</p>
7+
</Link>
8+
)
9+
}
10+
11+
export default BoxItem

‎src/Components/Home/HomeSideBar/HomeSideBar.jsx

+8-20
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,19 @@
1-
import { Link } from 'react-router-dom';
2-
import FriendsImg from '../../../assets/images/home/Refer a friend-pana 2.svg'
3-
import MentorsImg from '../../../assets/images/home/Product presentation-pana 2.svg'
4-
import TeamImg from '../../../assets/images/home/Creative team-pana 2.svg'
5-
import ResourcesImg from '../../../assets/images/home/Pair programming-cuate 2.svg'
1+
import { Outlet } from 'react-router-dom';
62
import SearchField from './SearchField';
73

8-
const links = [
9-
{ imgPath: FriendsImg, path: 'friends' },
10-
{ imgPath: MentorsImg, path: 'mentors' },
11-
{ imgPath: TeamImg, path: 'team' },
12-
{ imgPath: ResourcesImg, path: 'resources' },
13-
];
144

15-
function HomeSideBar() {
5+
6+
function HomeSideBar({isFixed}) {
167
return (
17-
<div className=' w-[408px] mx-auto'>
8+
<div className={` mx-auto w-1/4 ${!isFixed?'':'fixed top-0 right-0 '} scroll-y overflow-y-auto custom-scrollbar h-screen `}>
9+
<div className={`w-[408px] mx-auto `}>
1810
<div className='px-[35px] pt-[32px] flex flex-wrap justify-between h-fit w-full'>
1911
<SearchField/>
20-
<p className='text-xl my-6 font-normal'>Choose what you want!</p>
21-
{links.map((link, index) => (
22-
<Link key={index} to={link.path} className='shadow-[0px_6px_20px_0px_rgba(218,218,218,0.3)] bg-white px-8 py-5 rounded-2xl h-fit element-center flex-col w-[141px] h-[141px] mb-9 justify-between hover:scale-[0.9] transition-all duration-200 hover:bg-opacity-70 '>
23-
<img src={link.imgPath} alt={`Image ${index}`} />
24-
<p className='text-lg font-medium' >{link.path}</p>
25-
</Link>
26-
))}
12+
<Outlet/>
13+
2714
</div>
2815
</div>
16+
</div>
2917
);
3018
}
3119

‎src/Components/Home/HomeSideBar/SelectionsSearch.jsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import FriendsImg from '../../../assets/images/home/Refer a friend-pana 2.svg'
2+
import MentorsImg from '../../../assets/images/home/Product presentation-pana 2.svg'
3+
import TeamImg from '../../../assets/images/home/Creative team-pana 2.svg'
4+
import ResourcesImg from '../../../assets/images/home/Pair programming-cuate 2.svg'
5+
import BoxItem from './BoxItem';
6+
7+
function SelectionsSearch() {
8+
const links = [
9+
{ imgPath: FriendsImg, path: 'friends' },
10+
{ imgPath: MentorsImg, path: 'mentors' },
11+
{ imgPath: TeamImg, path: 'team' },
12+
{ imgPath: ResourcesImg, path: 'resources' },
13+
];
14+
return (
15+
<> <p className='text-xl my-6 font-normal'>Choose what you want!</p>
16+
<div className='flex flex-wrap justify-between h-fit w-full'>
17+
{links.map((link, index) => (
18+
<BoxItem key={index} path={link.path} imgPath={link.imgPath}/>
19+
))}
20+
</div>
21+
</>
22+
)
23+
}
24+
25+
export default SelectionsSearch

‎src/Components/Posts/Post/Post.jsx

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,32 @@
1-
import { useEffect, useState } from 'react';
1+
import { useEffect } from 'react';
22
import PostActions from '../Post/PostActions/PostActions';
33
import PostContent from './PostContent';
4-
import PostDetails from './PostDetails';
4+
import PostDetails from './PostDetails/PostDetails';
55
import PostHeader from './PostHeader';
6-
import useFetch from '../../../CustomHooks/useFetch'; // Import useFetch
7-
import { getOptions } from '../../../options'; // Import getOptions
86
import CommentSection from './PostActions/comment/CommentSection';
97
import { useDispatch, useSelector } from 'react-redux';
108
import { fetchLikesForPost } from '../../../store/posts/fetchLikesForPost';
9+
import LikesList from './PostDetails/LikesList';
10+
import { useState } from 'react';
1111

1212
function Post({ post }) {
1313
const dispatch=useDispatch()
14+
const [openLikesList,setOpenLikesList]=useState(false)
1415
const likesDataForPost=useSelector(state=>state.posts).postsLikesData
1516
const existedPost=likesDataForPost.find(postData=>{
1617
return post.id==postData.postid})
1718
useEffect(()=>{
1819
dispatch(fetchLikesForPost(post.id))
1920
},[])
2021
return (
21-
<div className='py-[30px] border-t-[6px] border-t-[rgba(235,235,235,1)] font-medium'>
22+
<div className='py-[30px] border-t-[6px] relative border-t-[rgba(235,235,235,1)] font-medium'>
2223
<PostHeader post={post} />
2324
<div >
2425
<PostContent post={post} />
25-
<PostDetails post={post} />
26+
<PostDetails post={post} openLikesList={setOpenLikesList} />
2627
<PostActions post={post} usersLikesThisPost={existedPost?existedPost.likesData:[]} />
2728
</div>
29+
{openLikesList &&<LikesList datalikes={likesDataForPost} closeLikesList={()=>setOpenLikesList(false)}/>}
2830

2931
{/* {usersCommentsOnPost.length>0&& <CommentSection fetchedComments={usersCommentsOnPost} /> } */}
3032
</div>

‎src/Components/Posts/Post/PostDetails/LikeListItem.jsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import profileImg from '../../../../assets/images/home/Ellipse 64.svg'
2+
3+
function LikeListItem() {
4+
return (
5+
<div className='flex justify-between'>
6+
<div className='flex items-center gap-6'>
7+
<img src={profileImg} alt="profile img" className='w-14' />
8+
<div>
9+
<h3 className='text-base font-semibold'>Layla Damian</h3>
10+
<p className='text-xs'>Data Scientist</p>
11+
</div>
12+
</div>
13+
<button className='bg-primary py-2 px-5 w-fit text-white rounded-[10px] h-fit'>Following</button>
14+
</div>
15+
)
16+
}
17+
18+
export default LikeListItem

‎src/Components/Posts/Post/PostDetails/LikesList.jsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import closeImg from '../../../../assets/images/home/icons8-close-50 5.svg'
2+
import LikeListItem from './LikeListItem'
3+
function LikesList({datalikes, closeLikesList}) {
4+
return (
5+
<div className="absolute top-[35px] w-full h-[calc(100%_-_50px)] overflow-hidden shadow-lg scroll-y overflow-y-auto custom-scrollbar rounded-lg bg-[rgba(252,250,248,1)]">
6+
<div className='border-b-[1.5px] border-b-solid border-b-[rgba(227,227,227,1)]'>
7+
<div className='py-5 ml-auto flex justify-between items-center w-1/2 pr-7 '>
8+
<h2 className='text-xl font-semibold text-center'>Likes</h2>
9+
<button onClick={closeLikesList}><img src={closeImg}/></button>
10+
</div>
11+
</div>
12+
13+
<div className='p-6 flex flex-col gap-6'>
14+
<LikeListItem/>
15+
<LikeListItem/>
16+
17+
<LikeListItem/>
18+
<LikeListItem/>
19+
<LikeListItem/>
20+
21+
</div>
22+
</div>
23+
)
24+
}
25+
26+
export default LikesList

‎src/Components/Posts/Post/PostDetails.jsx renamed to ‎src/Components/Posts/Post/PostDetails/PostDetails.jsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11

22
// Import your icons here
3-
import commentIcon from '../../../assets/images/posts/image 79.svg';
4-
import likeIcon from '../../../assets/images/posts/icons8-like-24 2.svg';
5-
import sharIcon from '../../../assets/images/posts/icons8-share-30 2.svg';
3+
import commentIcon from '../../../../assets/images/posts/image 79.svg';
4+
import likeIcon from '../../../../assets/images/posts/icons8-like-24 2.svg';
5+
import sharIcon from '../../../../assets/images/posts/icons8-share-30 2.svg';
66

7-
function PostDetails({ post }) {
7+
function PostDetails({ post, openLikesList }) {
88
const icons = [
9-
{ count: post.likes_count, icon: likeIcon, alt: 'Like Icon' },
9+
{ count: post.likes_count, icon: likeIcon, alt: 'Like Icon' ,click:openLikesList},
1010
{ count: post.comments_count, icon: commentIcon, alt: 'Comment Icon' },
1111
{ count: post.shares_count, icon: sharIcon, alt: 'Share Icon' },
1212
];
1313

1414
return (
1515
<div className='flex justify-between py-4 border-b border-b-gray-300 border-b-opacity-100 border-b-solid border-b-[1.5px]'>
16-
{icons.map(({ count, icon, alt }, index) => (
17-
<p key={index} className='flex items-center gap-3 text-sm font-medium'>
16+
{icons.map(({ count, icon, alt,click }, index) => (
17+
<button key={index} className='flex items-center gap-3 text-sm font-medium' onClick={click?()=>click(true):null}>
1818
{count} <img src={icon} alt={alt} className='w-5'/>
19-
</p>
19+
</button>
2020
))}
2121
</div>
2222
);

‎src/Components/StartPage/Header.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ function Header() {
77
return (
88
<div className=' py-7 border-b-[1.5px] border-b-[rgba(227, 227, 227, 1)] border-solid'>
99
<div className='container flex justify-between items-center'>
10-
<h1 className='flex text-4xl font-bold items-center'><img src={logo}/> Codelink</h1>
10+
<h1 className='flex text-3xl gap-5 font-bold items-center'><img src={logo} className='w-[54px]'/> CodeLink</h1>
1111
<StartPageNav/>
1212

1313
</div>

‎src/Functions/generateRandomGirlName.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const getRandomGirlName=()=>{
2+
const names = ["Jessica", "Marry", "Olivia", "Layla", "Ella", "Emily", "Amelia"];
3+
4+
if (names.length === 0) {
5+
throw new Error("The input array is empty.");
6+
}
7+
8+
const randomIndex = Math.floor(Math.random() * names.length);
9+
return names[randomIndex];
10+
}
11+

‎src/Functions/generateRandomManName.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
export const getRandomManName=()=> {
2+
const names = [
3+
"Mohamed",
4+
"David",
5+
"Samuel",
6+
"Ahmed",
7+
"Michael",
8+
"Robert",
9+
"Richard",
10+
"Tomas",
11+
"John",
12+
"Harry",
13+
"George"
14+
];
15+
16+
if (names.length === 0) {
17+
throw new Error("The input array is empty.");
18+
}
19+
20+
const randomIndex = Math.floor(Math.random() * names.length);
21+
return names[randomIndex];
22+
}

‎src/Functions/generateRandomTrack.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export const getRandomTrack=()=> {
2+
const names = [
3+
"Android Developer",
4+
"IOS Developer",
5+
"UI/UX designer",
6+
"BackEnd Developer",
7+
"Engineer",
8+
"Frontend Developer"
9+
];
10+
11+
12+
13+
const randomIndex = Math.floor(Math.random() * names.length);
14+
return names[randomIndex];
15+
}

0 commit comments

Comments
 (0)