reactstrap#Navbar TypeScript Examples
The following examples show how to use
reactstrap#Navbar.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: TutorPanel.tsx From TutorBase with MIT License | 6 votes |
|
Panel = (props: IProps) => {
let dispatch = useDispatch();
let sidebarToggled = useSelector(selectSidebarToggled);
let params : string = useLocation().pathname;
let extension:string = params.split('/')[2];
return (
<div id="panel-wrapper">
<Navbar className={classNames("navbar-expand-lg", "navbar-light", "bg-light", "border-bottom", "shadow")}>
<Button className="btn-red" id="menu-toggle" onClick={() => {
dispatch(actions.toggleSidebar());
}}>☰</Button>
</Navbar>
{/* <div class="container-fluid">
<h2 className={classNames("mt-4", "hr")}>Tutor Dashboard</h2>
</div>
<div class="container-fluid">
<h5 className={classNames("mt-4", "hr")}>Courses</h5>
<p>This is where the tutor will be able to add or drop classes they are tutoring for.</p>
<Button variant="danger">Add New Course</Button>
<Button variant="danger">Drop Course</Button>
</div> */}
{extension === "overview" ? <TutorOverview></TutorOverview> : null}
{extension === "meetings" ? <Meetings mode="Tutor"></Meetings> : null}
{extension === "history" ? <TutorHistory></TutorHistory> : null}
{extension === "analytics" ? <DataVisualization /> : null}
{extension === "settings" ? <Settings></Settings> : null}
</div>
);
}
Example #2
| Source File: ClientPanel.tsx From TutorBase with MIT License | 5 votes |
|
Panel = () => {
const isMobile = useMediaQuery('(max-width: 1200px)')
let dispatch = useDispatch();
let sidebarToggled = useSelector(selectSidebarToggled);
let clientFlowData = useSelector(selectClientFlowData);
let steps = ["Subject", "Class", "Tutor", "Time", "Notes"];
let params : string = useLocation().pathname;
params = params.split('/')[2];
let body = <FormParent />;
if (params === 'meetings') {
body = <Meetings mode="Client" />;
} else if (params === 'history') {
body = <ClientHistory />;
} else if (params === 'settings') {
body = <ClientSettings />
}
const renderSteps = () => {
let flow = [];
if(!isMobile)
flow.push(<FlowText>Schedule a tutoring session {"→"} </FlowText>);
steps.forEach((step, index) => {
if(clientFlowData.currentStep === index)
if(isMobile)
flow.push(<FlowText><b style={{color: 'black'}}> {index + 1} </b></FlowText>)
else
flow.push(<FlowText><b style={{color: 'black'}}> {step} </b></FlowText>)
else
if(isMobile)
flow.push(<FlowText>{index + 1}</FlowText>)
else
flow.push(<FlowText> {step} </FlowText>)
if(index != 4)
flow.push(<FlowText> {"→"} </FlowText>)
})
return flow;
}
return (
<div id="panel-wrapper" style={{width:'100vw'}}>
<Helmet>
<meta charSet="utf-8" />
<title>TutorBase - Dashboard</title>
</Helmet>
<Navbar className={classNames("navbar-expand-lg", "navbar-light", "bg-light", "border-bottom", "shadow")}>
<Button className="btn-red" id="menu-toggle" onClick={() => {
dispatch(actions.toggleSidebar());
}} style={{marginLeft: '0.5em'}}>
☰
</Button>
</Navbar>
<div className="container-fluid" style={{maxWidth:'100vw'}}>
{params === "schedule" && (
<Container >
{renderSteps().map((component, index) => (
<React.Fragment key={index}>
{ component }
</React.Fragment>
))}
</Container>
)}
{body}</div>
</div>
);
}
Example #3
| Source File: TutorPanelSignup.tsx From TutorBase with MIT License | 4 votes |
|
Panel = (props: IProps) => {
let dispatch = useDispatch();
let id = useSelector(selectClientData).clientId;
const [modalOpen, setModalOpen] = useState(false);
let params : string = useLocation().pathname;
const [selectedSubjects, setSelectedSubjects] = useState(new Set<string>());
const [RIN, setRIN] = useState("");
const [validRIN, setValidRIN] = useState(false);
const [cohort, setCohort] = useState("");
const [comments, setComments] = useState("");
const [footerMessage, setFooterMessage] = useState("");
const [rate, setRate] = useState(0);
let subjects = [];
let selectedSubjectsOutput = [];
const [subjectsList, setSubjectsList] = useState(new Array<Subject>());
function checkRIN(value: string) {
if (value.length !== 9) {
setValidRIN(false);
}
else {
setValidRIN(true);
}
setRIN(value);
}
function submit() {
if (!validRIN
|| cohort === ""
|| cohort === "Select"
|| selectedSubjects.size === 0) {
setFooterMessage("Please complete required fields.");
return;
}
let subs: Array<String> = Array.from(selectedSubjects.keys());
api.TutorSignup(id, RIN, subs, comments, rate).then(res =>{
res ?
setFooterMessage("Application submitted.")
: setFooterMessage("Error submitting. Please try again.");
}).catch(err => {
setFooterMessage("Error submitting. Please try again.")
});
}
useEffect(() => {
// Get all avaliable subjects from API
const getSubjects = async () => {
return (await api.GetSubjects()).data;
}
getSubjects().then(value => {
setSubjectsList(value);
}
)
}, []);
for (let i = 0; i < subjectsList.length; i++) {
let name: string = subjectsList[i].id;
let color = SubjectToColor(name);
subjects.push(
(<Button
style={{background: color}}
onClick={() => setSelectedSubjects(SelectedSubjectsHandler(selectedSubjects, name))}
>
{name}
</Button>
)
);
}
let selectedSubs:Array<string> = Array.from(selectedSubjects.keys());
for (let i = 0; i < selectedSubs.length; i++) {
let name: string = selectedSubs[i];
let color = SubjectToColor(name);
selectedSubjectsOutput.push(
(
<Badge
style={{
backgroundColor: color,
cursor:'default',
color: "black",
minWidth: '6em',
display: "flex",
flexDirection:'row',
alignItems: 'center',
marginRight: '0.5em'
}}
pill
>
<div style={{
display: "flex",
flex: '50%',
}}>
{name + ' '}
</div>
<Button
close
style={{
display: "flex",
flex: '50%',
alignItems: 'center'
}}
onClick={() => setSelectedSubjects(SelectedSubjectsHandler(selectedSubjects, name))} />
</Badge>
)
);
}
return (
<div id="panel-wrapper">
<Navbar className={classNames("navbar-expand-lg", "navbar-light", "bg-light", "border-bottom", "shadow")}>
<Button className="btn-red" id="menu-toggle" onClick={() => {
dispatch(actions.toggleSidebar());
}}>☰</Button>
</Navbar>
<Container fluid className="background" style={{marginBottom:'10em'}}>
<hr></hr>
<Row xs="2" className="parent">
</Row>
<div style={{display:'flex', flexDirection:'column', flexWrap:'wrap', alignContent:'center'}}>
{props.isLoading ? (
<div style={{display:'flex', flexDirection:'row', flex:'1 1 0px', flexWrap:'wrap', justifyContent:'center', marginTop:'10em'}}>
<Spinner style={{color:'#E66064'}}></Spinner>
</div>)
: (
<div>
<div style={{display:'flex', flexDirection:'row', flex:'1 1 0px', flexWrap:'wrap', justifyContent:'center', marginTop:'10em'}}>
<h5>You are not currently signed up as a tutor. This dashboard is for tutors only. You can apply to be a TutorBase tutor below!
</h5></div>
<div style={{display:'flex', flexDirection:'row', flex:'1 1 0px', flexWrap:'wrap', justifyContent:'center', marginTop:'1em'}}>
<Button
className="btn-red"
style={{height:'4em', width:'10em', borderRadius:'20em'}}
onClick={() => setModalOpen(true)}
>
Sign up as tutor
</Button>
<Modal
centered={true}
scrollable={true}
isOpen={modalOpen}
>
<ModalHeader toggle={() => setModalOpen(!modalOpen)}>
Tutor Application Form
</ModalHeader>
<ModalBody>
<h5>RIN</h5>
<Input
defaultValue={RIN}
onChange={(e) => checkRIN(e.target.value)}
valid={validRIN}
invalid={!validRIN}
/>
<p />
<h5>Cohort</h5>
<Input
type="select"
onChange={(e) => setCohort(e.target.value)}
initialValue="Select"
invalid={cohort === "" || cohort === "Select"}>
<option>
Select
</option>
<option>
Freshman
</option>
<option>
Sophomore
</option>
<option>
Junior
</option>
<option>
Senior
</option>
<option>
Graduate
</option>
</Input>
<p />
<h5>Select Subjects to tutor</h5>
<ButtonGroup>
{subjects}
</ButtonGroup>
<p>
Selected:
<Card
outline={selectedSubjects.size === 0}
color= {selectedSubjects.size === 0 ? "danger" : ""}>
<CardBody
style={{
display: "flex",
background: "lightgray",
minHeight: "4em",
flexWrap: 'wrap'
}}>
{selectedSubjectsOutput}
</CardBody></Card>
</p>
<p>
<h5>Hourly Rate ($) (optional)</h5>
<Input
type="number"
onChange={(e) => setRate(+(e.target.value))} />
</p>
<h5>Comments (optional)</h5>
<Input
type="textarea"
onChange={(e) => setComments(e.target.value)} />
</ModalBody>
<ModalFooter>
<p style={{color: footerMessage === "Application submitted." ? 'green' : 'red'}}>
{footerMessage}
</p>
<Button
color="primary"
onClick={() => submit()}
>
Submit
</Button>
{' '}
<Button onClick={() => setModalOpen(false)}>
Cancel
</Button>
</ModalFooter>
</Modal>
</div>
</div>
)}
</div>
</Container>
</div>
);
}
