Skip to content

Commit 6de76a8

Browse files
BasharElmetwaliahmedBasharElmetwaliahmed
committed
add create post modal
1 parent 050e67f commit 6de76a8

File tree

9 files changed

+95
-28
lines changed

9 files changed

+95
-28
lines changed

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<title>Code Link</title>
88
<link rel="preconnect" href="https://fonts.googleapis.com">
99
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
10+
<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">
1111
<link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
1212
</head>
1313
<body>

‎src/Components/Home/HomeContent/HomeContent.jsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1+
import CreatePost from "../../Posts/CreatePost"
12
import Posts from "../../Posts/Posts"
23

34
function HomeContent() {
4-
55
return (
6-
<div className="w-3/4 h-full bg-white shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] min-h-[calc(100vh_-_99px)]">
6+
<div className="w-1/2 h-full shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] min-h-[calc(100vh_-_99px)] bg-[rgba(237,237,237,1)]">
7+
<CreatePost/>
78
<Posts/>
89
</div>
910
)

‎src/Components/Posts/CreatePost.jsx

+42-22
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,48 @@
1-
import { useState } from 'react'
2-
import EmojisComponent from './EmojisComponent'
3-
import PostOptions from './PostOptions'
4-
import UploadImages from './UploadImages'
5-
function CreatePost() {
6-
const [uploadedImage,setUploadedImage]=useState(null)
1+
import { useState } from 'react';
2+
import Profileimg from '../../assets/images/posts/Ellipse 25 (1).svg'
3+
import Modal from 'react-modal';
4+
import CreatePostModal from './CreatePostModal';
75

6+
const customStyles = {
7+
content: {
8+
top: '50%',
9+
left: '50%',
10+
right: 'auto',
11+
bottom: 'auto',
12+
marginRight: '-50%',
13+
transform: 'translate(-50%, -50%)',
14+
background:'none',
15+
border:'none'
16+
},
17+
};
818

9-
return (
10-
<div className="bg-[rgba(252,250,248,1)] m-10 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] py-8 px-12 rounded-3xl" >
11-
<h3 className="text-4xl font-bold text-center">Create Post </h3>
12-
<div className='w-full bg-white mx-auto my-2 '>
13-
<textarea className='w-full min-h-[200px] resize-none'/>
14-
<div className='flex justify-between p-2' >
15-
<UploadImages setUploadedImage={setUploadedImage}/>
16-
<EmojisComponent />
17-
</div>
18-
</div>
19-
<PostOptions uploadedImage={uploadedImage} setUploadedImage={setUploadedImage} />
20-
<div className='flex my-14 ml-auto w-fit space-x-3 text-2xl'>
21-
<button>Cancel</button>
22-
<button className='dark-btn'>Publish</button>
23-
</div>
2419

25-
</div>
20+
const CreatePost=()=> {
21+
const [open, setOpen] = useState(false);
22+
23+
const openModal=()=>{
24+
setOpen(true)
25+
}
26+
const closeModal=()=>{
27+
setOpen(false)
28+
}
29+
return (
30+
<> <div className='h-[150px] px-16 mb-2 bg-white element-center' onClick={openModal}>
31+
<button className="bg-white shadow-[shadow:0px_10px_10px_0px_rgba(218,218,218,0.3)] rounded-full flex justify-between w-full my-auto h-[50px]">
32+
<p className="text-[rgba(152,150,150,1)] text-roboto text-xl py-2 px-5 my-auto">What’s on your mind?</p>
33+
<img src={Profileimg}/>
34+
</button>
35+
36+
</div>
37+
<Modal
38+
isOpen={open}
39+
onRequestClose={closeModal}
40+
style={customStyles}
41+
contentLabel="Example Modal"
42+
>
43+
<CreatePostModal closeModal={closeModal}/>
44+
</Modal>
45+
</>
2646
)
2747
}
2848

‎src/Components/Posts/CreatePostModal.jsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { useState } from 'react'
2+
import EmojisComponent from './EmojisComponent'
3+
import PostOptions from './PostOptions'
4+
import UploadImages from './UploadImages'
5+
function CreatePostModal({closeModal}) {
6+
const [uploadedImage,setUploadedImage]=useState(null)
7+
8+
9+
return (
10+
<div className="bg-[rgba(252,250,248,1)] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] py-8 px-12 rounded-3xl w-[700px] max-w-full m-2" >
11+
<h3 className="text-4xl font-bold text-center">Create Post </h3>
12+
<div className='w-full bg-white mx-auto my-2 '>
13+
<textarea className='w-full min-h-[200px] resize-none'/>
14+
<div className='flex justify-between p-2' >
15+
<UploadImages setUploadedImage={setUploadedImage}/>
16+
<EmojisComponent />
17+
</div>
18+
</div>
19+
<PostOptions uploadedImage={uploadedImage} setUploadedImage={setUploadedImage} />
20+
<div className='flex my-14 ml-auto w-fit space-x-3 text-2xl'>
21+
<button onClick={closeModal}>Cancel</button>
22+
<button className='dark-btn'>Publish</button>
23+
</div>
24+
25+
</div>
26+
)
27+
}
28+
29+
export default CreatePostModal

‎src/Components/Posts/Post.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ function Post({post}) {
1515
<p className='ml-auto'>1h</p>
1616

1717
</header>
18-
<img src={`http://localhost:8000/api/${post['image_path']}`} alt='post image' className='w-full' />
18+
<img src={postImg} alt='post image' className='w-full' />
1919
<p className='text-xl text-inter p-4 '>{post.content}</p>
2020
<div className='flex justify-between px-4 py-4'>
2121
<p className='flex items-center gap-3'>300<img src={likeIcon}/></p>

‎src/Components/Posts/Posts.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {useLoaderData} from 'react-router-dom'
44
function Posts() {
55
const posts=useLoaderData()
66
return (
7-
<div className="w-3/5 border-r-[1px] border-r-primary border-opacity-30 bg-[rgba(237,237,237,1)]">
7+
<div className=" border-r-[1px] border-r-primary border-opacity-30 ">
88
{posts.map(post=><Post post={post} key={post.id}/>)}
99

1010
</div>

‎src/assets/images/posts/Ellipse 25 (1).svg

+10
Loading

‎src/index.css

+4
Original file line numberDiff line numberDiff line change
@@ -63,4 +63,8 @@ body{
6363

6464
.emojis>div{
6565
width: 300px;
66+
}
67+
68+
.ReactModal__Overlay{
69+
background-color: rgb(9 9 9 / 75%) !important;
6670
}

‎tailwind.config.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,17 @@ export default {
1616
extend: {
1717
fontFamily: {
1818
'inter': ['Inter', 'sans-serif'],
19+
'roboto':['Roboto', 'sans-serif'],
1920
},
2021
colors:{
2122
'primary':'#D9C6A4',
2223
'dark-primary':'rgba(200,174,125,1)',
2324
'secondary':'#FFFFFF',
2425
'customblack':'rgba(0,0,0,1)',
2526
'customgray':'rgba(139,139,139,1)',
26-
'custombg':'rgba(252,250,248,1)'
27+
'custombg':'rgba(252,250,248,1)',
28+
29+
2730
},
2831
boxShadow: {
2932
'btnshadow': ' 0px 6px 15px 0px rgba(218, 218, 218, 0.5)',

0 commit comments

Comments
 (0)