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() { |
||||
return ( |
||||
<div className="App"> |
||||
|
||||
</div> |
||||
); |
||||
class App extends Component { |
||||
render(){ |
||||
return ( |
||||
<AppRouter /> |
||||
); |
||||
} |
||||
} |
||||
|
||||
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 Header from './Header/Header'; |
||||
import TabBar from './TabBar/TabBar'; |
||||
import Body from './Body/Body'; |
||||
import './Home.scss'; |
||||
export default class Home extends Component { |
||||
constructor(props) { |
||||
super(props); |
||||
this.state = { |
||||
tabBar : 'chat', |
||||
} |
||||
} |
||||
|
||||
setTabBar = (value) => { |
||||
this.setState({ |
||||
tabBar : value, |
||||
}) |
||||
}
|
||||
render(){ |
||||
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> |
||||
); |
||||
} |
||||
|
@ -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