parent
570ed28253
commit
6423cdeddf
24 changed files with 1251 additions and 35 deletions
@ -1,11 +1,12 @@ |
|||||||
import './App.css'; |
import React,{Component} from 'react'; |
||||||
|
import AppRouter from "./Router"; |
||||||
|
|
||||||
function App() { |
class App extends Component { |
||||||
return ( |
render(){ |
||||||
<div className="App"> |
return ( |
||||||
|
<AppRouter /> |
||||||
</div> |
); |
||||||
); |
} |
||||||
} |
} |
||||||
|
|
||||||
export default App; |
export default App; |
@ -0,0 +1,6 @@ |
|||||||
|
import { combineReducers } from "redux"; |
||||||
|
|
||||||
|
|
||||||
|
export default combineReducers({ |
||||||
|
|
||||||
|
}); |
@ -0,0 +1,16 @@ |
|||||||
|
import { createStore, applyMiddleware } from "redux"; |
||||||
|
import { composeWithDevTools } from "redux-devtools-extension"; |
||||||
|
import rootReducer from "./Reducers/Reduce"; |
||||||
|
import thunk from "redux-thunk"; |
||||||
|
|
||||||
|
const initialState = {}; |
||||||
|
|
||||||
|
const middleware = [thunk]; |
||||||
|
|
||||||
|
const store = createStore( |
||||||
|
rootReducer, |
||||||
|
initialState, |
||||||
|
composeWithDevTools(applyMiddleware(...middleware)) |
||||||
|
); |
||||||
|
|
||||||
|
export default store; |
@ -0,0 +1,34 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; |
||||||
|
import store from "./Redux/store"; |
||||||
|
import { Provider } from "react-redux"; |
||||||
|
|
||||||
|
import Home from "./views/Home/Home"; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default class AppRouter extends Component { |
||||||
|
render() { |
||||||
|
let home; |
||||||
|
if(1){ |
||||||
|
home = <Route exact path={'/'}>
|
||||||
|
{/* <Navbar /> */} |
||||||
|
<Home />
|
||||||
|
</Route> |
||||||
|
}else{ |
||||||
|
// home = <Route exact path={'/'}>
|
||||||
|
// <Auth page="login" />
|
||||||
|
// </Route>
|
||||||
|
return null; |
||||||
|
} |
||||||
|
return ( |
||||||
|
<Provider store={store} > |
||||||
|
<Router> |
||||||
|
<Switch> |
||||||
|
{home} |
||||||
|
</Switch> |
||||||
|
</Router> |
||||||
|
</Provider> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
After Width: | Height: | Size: 49 KiB |
@ -0,0 +1,17 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
import ChatList from './ChatList/ChatList'; |
||||||
|
import Location from './Location/Location'; |
||||||
|
import Info from './Info/Info'; |
||||||
|
|
||||||
|
import './Body.scss'; |
||||||
|
export default class Body extends Component { |
||||||
|
render(){ |
||||||
|
return ( |
||||||
|
<div className="body d-flex"> |
||||||
|
{this.props.tabBar === 'chat' ? <ChatList /> : null} |
||||||
|
{this.props.tabBar === 'location' ? <Location /> : null} |
||||||
|
{this.props.tabBar === 'info' ? <Info /> : null} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,9 @@ |
|||||||
|
@media screen and (max-width: 450px){ |
||||||
|
.body{ |
||||||
|
background-color: rgb(240, 240, 240); |
||||||
|
flex : 1; |
||||||
|
border-radius: 40px; |
||||||
|
z-index: 10; |
||||||
|
overflow-y : scroll; |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,24 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
|
||||||
|
|
||||||
|
import './Chat.scss'; |
||||||
|
export default class Chat extends Component { |
||||||
|
render(){ |
||||||
|
const {data} = this.props; |
||||||
|
return ( |
||||||
|
<div className="chat d-flex"> |
||||||
|
<img src={data.imageUrl} alt="عکس کاربر" /> |
||||||
|
<div className="chat__data d-flex flex-column"> |
||||||
|
<h1 className="chat__data--name"> |
||||||
|
{data.name} |
||||||
|
</h1> |
||||||
|
<p className="chat__data--lastMessage"> |
||||||
|
{data.lastMessage.slice(0,40) + '...'} |
||||||
|
</p> |
||||||
|
<span>2</span> |
||||||
|
<div>07:45</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,52 @@ |
|||||||
|
@media screen and (max-width: 450px){ |
||||||
|
.chat{ |
||||||
|
width: 100%; |
||||||
|
direction: rtl; |
||||||
|
align-items:center; |
||||||
|
margin-bottom: 20px; |
||||||
|
position: relative; |
||||||
|
border-bottom : 1px solid rgb(45, 173, 242); |
||||||
|
padding : 0px 0px 20px; |
||||||
|
img { |
||||||
|
width: 70px; |
||||||
|
height: 70px; |
||||||
|
border-radius:35px; |
||||||
|
object-fit: cover; |
||||||
|
} |
||||||
|
&__data{ |
||||||
|
text-align:right; |
||||||
|
flex : 1; |
||||||
|
justify-content: space-around; |
||||||
|
height : 100%; |
||||||
|
padding : 10px 10px; |
||||||
|
h1{ |
||||||
|
font-size: 15px; |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
p{ |
||||||
|
font-size: 12px; |
||||||
|
margin: 0; |
||||||
|
max-width: calc(100vw - 100px); |
||||||
|
} |
||||||
|
span{ |
||||||
|
background-color: blue; |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
display: flex; |
||||||
|
justify-content:center; |
||||||
|
align-items:center; |
||||||
|
border-radius: 13px; |
||||||
|
position: absolute; |
||||||
|
left : 20px; |
||||||
|
top : 37px; |
||||||
|
color: white; |
||||||
|
} |
||||||
|
div{ |
||||||
|
color : rgb(99, 99, 99); |
||||||
|
position: absolute; |
||||||
|
left : 20px; |
||||||
|
top : 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,86 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
import Chat from './Chat/Chat'; |
||||||
|
|
||||||
|
import photo from '../../../../assets/images/reza.png'; |
||||||
|
|
||||||
|
import './ChatList.scss'; |
||||||
|
export default class ChatList extends Component { |
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
this.state = { |
||||||
|
chats : [ |
||||||
|
{ |
||||||
|
id : 0, |
||||||
|
name : 'محسن محمدی', |
||||||
|
lastMessage : 'باشه.رسیدم بهت خبر میدم', |
||||||
|
imageUrl : photo |
||||||
|
}, |
||||||
|
{ |
||||||
|
id : 1, |
||||||
|
name : 'غلامرضا', |
||||||
|
lastMessage : 'رضا داداش امروز وقت داشتی یه نیم ساعت بیای اینو بهم بگو', |
||||||
|
imageUrl : photo |
||||||
|
}, |
||||||
|
{ |
||||||
|
id : 2, |
||||||
|
name : 'محسن محمدی', |
||||||
|
lastMessage : 'باشه.رسیدم بهت خبر میدم', |
||||||
|
imageUrl : photo |
||||||
|
}, |
||||||
|
{ |
||||||
|
id : 3, |
||||||
|
name : 'غلامرضا', |
||||||
|
lastMessage : 'رضا داداش امروز وقت داشتی یه نیم ساعت بیای اینو بهم بگو', |
||||||
|
imageUrl : photo |
||||||
|
}, |
||||||
|
{ |
||||||
|
id : 4, |
||||||
|
name : 'محسن محمدی', |
||||||
|
lastMessage : 'باشه.رسیدم بهت خبر میدم', |
||||||
|
imageUrl : photo |
||||||
|
}, |
||||||
|
{ |
||||||
|
id : 5, |
||||||
|
name : 'غلامرضا', |
||||||
|
lastMessage : 'رضا داداش امروز وقت داشتی یه نیم ساعت بیای اینو بهم بگو', |
||||||
|
imageUrl : photo |
||||||
|
}, |
||||||
|
{ |
||||||
|
id : 6, |
||||||
|
name : 'محسن محمدی', |
||||||
|
lastMessage : 'باشه.رسیدم بهت خبر میدم', |
||||||
|
imageUrl : photo |
||||||
|
}, |
||||||
|
{ |
||||||
|
id : 7, |
||||||
|
name : 'غلامرضا', |
||||||
|
lastMessage : 'رضا داداش امروز وقت داشتی یه نیم ساعت بیای اینو بهم بگو', |
||||||
|
imageUrl : photo |
||||||
|
}, |
||||||
|
{ |
||||||
|
id : 8, |
||||||
|
name : 'محسن محمدی', |
||||||
|
lastMessage : 'باشه.رسیدم بهت خبر میدم', |
||||||
|
imageUrl : photo |
||||||
|
}, |
||||||
|
{ |
||||||
|
id : 9, |
||||||
|
name : 'غلامرضا', |
||||||
|
lastMessage : 'رضا داداش امروز وقت داشتی یه نیم ساعت بیای اینو بهم بگو', |
||||||
|
imageUrl : photo |
||||||
|
}, |
||||||
|
], |
||||||
|
} |
||||||
|
} |
||||||
|
render(){ |
||||||
|
return ( |
||||||
|
<div className="chat-list d-flex flex-column"> |
||||||
|
{ |
||||||
|
this.state.chats.map(item => ( |
||||||
|
<Chat key={item.id} data={item} /> |
||||||
|
)) |
||||||
|
} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,9 @@ |
|||||||
|
@media screen and (max-width: 450px){ |
||||||
|
.chat-list{ |
||||||
|
flex : 1; |
||||||
|
border-radius: 40px; |
||||||
|
padding: 40px 14px; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
} |
||||||
|
} |
@ -0,0 +1,13 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
|
||||||
|
|
||||||
|
import './Info.scss'; |
||||||
|
export default class Info extends Component { |
||||||
|
render(){ |
||||||
|
return ( |
||||||
|
<div className="info d-flex"> |
||||||
|
|
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,13 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
|
||||||
|
|
||||||
|
import './Location.scss'; |
||||||
|
export default class Location extends Component { |
||||||
|
render(){ |
||||||
|
return ( |
||||||
|
<div className="location d-flex"> |
||||||
|
|
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,15 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
import MenuIcon from '@material-ui/icons/Menu'; |
||||||
|
import SearchIcon from '@material-ui/icons/Search'; |
||||||
|
|
||||||
|
import './Header.scss'; |
||||||
|
export default class Header extends Component { |
||||||
|
render(){ |
||||||
|
return ( |
||||||
|
<div className="header d-flex"> |
||||||
|
<SearchIcon style={{color : "white" , width : 38, height : 38}} /> |
||||||
|
<MenuIcon style={{color : "white" , width : 38, height : 38}} /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,11 @@ |
|||||||
|
@media screen and (max-width: 450px){ |
||||||
|
.header{ |
||||||
|
border-top-right-radius: 40px; |
||||||
|
border-top-left-radius: 40px; |
||||||
|
height: 70px; |
||||||
|
width: 100%; |
||||||
|
justify-content : space-between; |
||||||
|
align-items: flex-end; |
||||||
|
padding : 0px 15px; |
||||||
|
} |
||||||
|
} |
@ -1,10 +1,28 @@ |
|||||||
import React, { Component } from 'react'; |
import React, { Component } from 'react'; |
||||||
|
|
||||||
|
import Header from './Header/Header'; |
||||||
|
import TabBar from './TabBar/TabBar'; |
||||||
|
import Body from './Body/Body'; |
||||||
|
import './Home.scss'; |
||||||
export default class Home extends Component { |
export default class Home extends Component { |
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
this.state = { |
||||||
|
tabBar : 'chat', |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
setTabBar = (value) => { |
||||||
|
this.setState({ |
||||||
|
tabBar : value, |
||||||
|
}) |
||||||
|
}
|
||||||
render(){ |
render(){ |
||||||
return ( |
return ( |
||||||
<div className="home d-flex"> |
<div className="home d-flex flex-column"> |
||||||
|
<Header /> |
||||||
|
<TabBar tabBar={this.state.tabBar} setTabBar={this.setTabBar} /> |
||||||
|
<Body tabBar={this.state.tabBar} /> |
||||||
</div> |
</div> |
||||||
); |
); |
||||||
} |
} |
||||||
|
@ -0,0 +1,8 @@ |
|||||||
|
@media screen and (max-width: 450px){ |
||||||
|
.home{ |
||||||
|
flex : 1; |
||||||
|
background-color: rgb(15, 93, 209); |
||||||
|
border-radius: 40px; |
||||||
|
height: 100vh; |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,39 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
import ChatIcon from '@material-ui/icons/Chat'; |
||||||
|
import LocationOnIcon from '@material-ui/icons/LocationOn'; |
||||||
|
import InfoIcon from '@material-ui/icons/Info'; |
||||||
|
|
||||||
|
import './TabBar.scss'; |
||||||
|
export default class TabBar extends Component { |
||||||
|
|
||||||
|
render(){ |
||||||
|
return ( |
||||||
|
<div className="tabBar d-flex"> |
||||||
|
<div className="tabBar__item d-flex flex-column" onClick={() => this.props.setTabBar('info')}> |
||||||
|
<InfoIcon style={{color : this.props.tabBar === "info" ? "white" : "#afafaf" , width : 60, height : 60}} /> |
||||||
|
{ |
||||||
|
this.props.tabBar === 'info' ?
|
||||||
|
<div className="tabBar__item--active"> |
||||||
|
</div> : null |
||||||
|
} |
||||||
|
</div> |
||||||
|
<div className="tabBar__item d-flex flex-column" onClick={() => this.props.setTabBar('location')}> |
||||||
|
<LocationOnIcon style={{color : this.props.tabBar === "location" ? "white" : "#afafaf" , width : 60, height : 60}} /> |
||||||
|
{ |
||||||
|
this.props.tabBar === 'location' ?
|
||||||
|
<div className="tabBar__item--active"> |
||||||
|
</div> : null |
||||||
|
} |
||||||
|
</div> |
||||||
|
<div className="tabBar__item d-flex flex-column" onClick={() => this.props.setTabBar('chat')}> |
||||||
|
<ChatIcon style={{color : this.props.tabBar === "chat" ? "white" : "#afafaf" , width : 60, height : 60}} /> |
||||||
|
{ |
||||||
|
this.props.tabBar === 'chat' ?
|
||||||
|
<div className="tabBar__item--active"> |
||||||
|
</div> : null |
||||||
|
} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,23 @@ |
|||||||
|
@media screen and (max-width: 450px){ |
||||||
|
.tabBar{ |
||||||
|
margin-top: 30px; |
||||||
|
height: 80px; |
||||||
|
width: 100%; |
||||||
|
justify-content : space-around; |
||||||
|
align-items: center; |
||||||
|
padding : 0px 5px; |
||||||
|
&__item{ |
||||||
|
position: relative; |
||||||
|
&--active{ |
||||||
|
width: 60px; |
||||||
|
height: 60px; |
||||||
|
border-radius: 30px; |
||||||
|
position: absolute; |
||||||
|
top : 58px; |
||||||
|
left: 0px; |
||||||
|
z-index: 0px; |
||||||
|
background-color: rgb(240, 240, 240) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
Loading…
Reference in new issue