223 lines
15 KiB
React
223 lines
15 KiB
React
import React from "react";
|
|
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
|
|
|
|
|
export default function Settings(){
|
|
|
|
return(
|
|
<>
|
|
<BreadcrumbComBS title='Settings' paths={['Dashboard', 'Settings']} />
|
|
{/*<div className="row">*/}
|
|
{/* <div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
|
|
{/*</div>*/}
|
|
|
|
|
|
<div className="row account-contant">
|
|
<div className="col-12">
|
|
<div className="card card-statistics">
|
|
<div className="card-body p-0" style={{backgroundColor:"#f9f9fb"}}>
|
|
<div className="row no-gutters">
|
|
<div className="col-xl-3 pb-xl-0 pb-5 border-right">
|
|
<div className="page-account-profil pt-5">
|
|
<div className="profile-img text-center rounded-circle">
|
|
<div className="pt-5">
|
|
<div className="bg-img m-auto">
|
|
<img src="assets/img/avtar/01.jpg" className="img-fluid"
|
|
alt="users-avatar" />
|
|
</div>
|
|
<div className="profile pt-4">
|
|
<h4 className="mb-1">Alice Williams</h4>
|
|
<p>Enthusiast</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="py-5 profile-counter">
|
|
<ul className="nav justify-content-center text-center">
|
|
<li className="nav-item border-right px-3">
|
|
<div>
|
|
<h4 className="mb-0">90</h4>
|
|
<p>Post</p>
|
|
</div>
|
|
</li>
|
|
|
|
<li className="nav-item border-right px-3">
|
|
<div>
|
|
<h4 className="mb-0">1.5K</h4>
|
|
<p>Messages</p>
|
|
</div>
|
|
</li>
|
|
|
|
<li className="nav-item px-3">
|
|
<div>
|
|
<h4 className="mb-0">4.4K</h4>
|
|
<p>Members</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="profile-btn text-center">
|
|
<div>
|
|
<button className="btn btn-light text-primary mb-2">Upload New Avatar
|
|
</button>
|
|
</div>
|
|
{/*<div>*/}
|
|
{/* <button className="btn btn-danger">Delete</button>*/}
|
|
{/*</div>*/}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-xl-5 col-md-6 col-12 border-t border-right">
|
|
<div className="page-account-form">
|
|
<div className="form-titel border-bottom p-3">
|
|
<h5 className="mb-0 py-2">Edit Your Personal Settings</h5>
|
|
</div>
|
|
<div className="p-4">
|
|
<form>
|
|
<div className="form-row">
|
|
<div className="form-group col-md-12">
|
|
<label htmlFor="name1">First Name</label>
|
|
<input type="text" className="form-control" id="name1"
|
|
value="Alice" />
|
|
</div>
|
|
<div className="form-group col-md-12">
|
|
<label htmlFor="name1">Last Name</label>
|
|
<input type="text" className="form-control" id="name1"
|
|
value="Williams" />
|
|
</div>
|
|
<div className="form-group col-md-12">
|
|
<label htmlFor="name1">Account Name</label>
|
|
<input type="text" className="form-control" id="name1"
|
|
value="This is the best hospital name" />
|
|
</div>
|
|
{/*<div className="form-group col-md-12">*/}
|
|
{/* <label htmlFor="title1">Email</label>*/}
|
|
{/* <input type="text" className="form-control" id="title1"*/}
|
|
{/* value="email@email.com" />*/}
|
|
{/*</div>*/}
|
|
<div className="form-group col-md-12">
|
|
<label htmlFor="phone1">Phone Number</label>
|
|
<input type="text" className="form-control" id="phone1"
|
|
value="(01) 97 563 15613" />
|
|
</div>
|
|
<div className="form-group col-md-12">
|
|
<label htmlFor="email1">Email</label>
|
|
<input type="email" className="form-control" id="email1"
|
|
value="alicewilliams@gmail.com" />
|
|
</div>
|
|
</div>
|
|
<div className="form-group">
|
|
<label htmlFor="add1">Address</label>
|
|
<input type="text" className="form-control" id="add1"
|
|
value="17504 Carlton Cuevas Rd, Gulfport, MS, 39503" />
|
|
</div>
|
|
<div className="form-group">
|
|
<label htmlFor="add2">Address 2</label>
|
|
<input type="text" className="form-control" id="add2"
|
|
value="1234 North Avenue Luke Lane, South Bend, IN 360001" />
|
|
</div>
|
|
|
|
{/*<div className="form-row">*/}
|
|
{/* <div className="form-group col-md-4">*/}
|
|
{/* <label htmlFor="inputState3">City</label>*/}
|
|
{/* <select id="inputState3" className="form-control">*/}
|
|
{/* <option>Choose...</option>*/}
|
|
{/* <option selected="">London</option>*/}
|
|
{/* <option>Montreal</option>*/}
|
|
{/* <option>Delhi</option>*/}
|
|
{/* <option>Tokyo</option>*/}
|
|
{/* </select>*/}
|
|
{/* </div>*/}
|
|
{/* <div className="form-group col-md-4">*/}
|
|
{/* <label htmlFor="inputState4">State</label>*/}
|
|
{/* <select id="inputState4" className="form-control">*/}
|
|
{/* <option>Choose...</option>*/}
|
|
{/* <option selected="">England</option>*/}
|
|
{/* <option>California</option>*/}
|
|
{/* <option>Texas</option>*/}
|
|
{/* <option>Scotland</option>*/}
|
|
{/* </select>*/}
|
|
{/* </div>*/}
|
|
{/* <div className="form-group col-md-4">*/}
|
|
{/* <label htmlFor="inputZip">Zip</label>*/}
|
|
{/* <input type="text" className="form-control" id="inputZip"*/}
|
|
{/* value="EC1A 1BB" />*/}
|
|
{/* </div>*/}
|
|
{/*</div>*/}
|
|
{/*<div className="form-group">*/}
|
|
{/* <div className="form-check">*/}
|
|
{/* <input className="form-check-input" type="checkbox"*/}
|
|
{/* id="gridCheck" />*/}
|
|
{/* <label className="form-check-label" htmlFor="gridCheck">*/}
|
|
{/* I agree to receive email notification.*/}
|
|
{/* </label>*/}
|
|
{/* </div>*/}
|
|
{/*</div>*/}
|
|
<div style={{textAlign:"right"}}>
|
|
<button type="submit" className="btn btn-primary">Update Profile
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-xl-4 col-md-6 border-t col-12">
|
|
<div className="page-account-form">
|
|
<div className="form-titel border-bottom p-3">
|
|
<h5 className="mb-0 py-2">Your External Link</h5>
|
|
</div>
|
|
<div className="p-4">
|
|
<form>
|
|
<div className="form-group">
|
|
<label htmlFor="fb">Facebook URL:</label>
|
|
<input type="text" className="form-control" id="fb"
|
|
value="https://www.facebook.com/" />
|
|
</div>
|
|
<div className="form-group">
|
|
<label htmlFor="tr">Twitter URL:</label>
|
|
<input type="text" className="form-control" id="tr"
|
|
value="https://twitter.com/" />
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label htmlFor="br">Blogger URL:</label>
|
|
<input type="text" className="form-control" id="br"
|
|
value="https://www.blogger.com" />
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label htmlFor="go">Google+ URL:</label>
|
|
<input type="text" className="form-control" id="go"
|
|
value="https://plus.google.com/discover" />
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label htmlFor="li">LinkedIn URL:</label>
|
|
<input type="text" className="form-control" id="li"
|
|
value="https://in.linkedin.com/" />
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label htmlFor="we">Website URL:</label>
|
|
<input type="text" className="form-control" id="we"
|
|
value="https://yourwebsite.com" />
|
|
</div>
|
|
<div style={{textAlign:"right"}}>
|
|
<button type="submit" className="btn btn-primary">Update Links</button>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</>
|
|
)
|
|
} |