|
import React, { Component } from "react"; |
|
|
|
export class ToggleButton extends Component { |
|
|
|
state={ |
|
surah:true, |
|
chapter:false, |
|
checkBtn:true |
|
} |
|
|
|
toggleChapter = ()=>{ |
|
|
|
this.setState({ |
|
surah:false, |
|
chapter:true, |
|
checkBtn:false |
|
}) |
|
} |
|
|
|
toggleSurah = ()=>{ |
|
|
|
this.setState({ |
|
surah:true, |
|
chapter:false, |
|
checkBtn:true |
|
}) |
|
} |
|
|
|
|
|
|
|
render() { |
|
|
|
const showSurah = ( |
|
<div className="row d-flex justify-content-center mt-3"> |
|
<div className="col-sm-4"> |
|
<div className="card" style={{ boxShadow: "1px 2px 3px rgba(0, 0, 0, .1)" }}> |
|
<div className="card-body m-auto"> |
|
<p> |
|
Al-Faatiha <span className="text-success">(الفاتحة)</span>{" "} |
|
<span className="text-info">The Opener</span> |
|
</p> |
|
<small>Details: Makkan / Ayat: 7 / Num: 1</small> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div className="col-sm-4"> |
|
<div className="card" style={{ boxShadow: "1px 2px 3px rgba(0, 0, 0, .1)" }}> |
|
<div className="card-body m-auto"> |
|
<p> |
|
Al-Faatiha <span className="text-success">(الفاتحة)</span>{" "} |
|
<span className="text-info">The Opener</span> |
|
</p> |
|
<small>Details: Makkan / Ayat: 7 / Num: 1</small> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div className="col-sm-4"> |
|
<div className="card" style={{ boxShadow: "1px 2px 3px rgba(0, 0, 0, .1)" }}> |
|
<div className="card-body m-auto"> |
|
<p> |
|
Al-Faatiha <span className="text-success">(الفاتحة)</span>{" "} |
|
<span className="text-info">The Opener</span> |
|
</p> |
|
<small>Details: Makkan / Ayat: 7 / Num: 1</small> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
); |
|
|
|
const showChapter = ( |
|
<div> |
|
<h1>not Hello</h1> |
|
</div> |
|
); |
|
|
|
return ( |
|
<div> |
|
<div className="row d-flex justify-content-center mt-4"> |
|
<div className="radio mr-3"> |
|
<label className="text-success" style={{cursor:"pointer"}}> |
|
<input type="radio" name="optradio" onClick={this.toggleSurah} checked={this.state.checkBtn} /> |
|
Surah |
|
</label> |
|
</div> |
|
<div className="radio"> |
|
<label className="text-warning" style={{cursor:"pointer"}}> |
|
<input type="radio" name="optradio" onClick={this.toggleChapter} /> |
|
Chapter |
|
</label> |
|
</div> |
|
</div> |
|
{ |
|
this.state.surah ? showSurah : showChapter |
|
} |
|
</div> |
|
|
|
); |
|
} |
|
} |
|
|
|
export default ToggleButton; |
