reactstrap#Badge TypeScript Examples
The following examples show how to use
reactstrap#Badge.
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: index.tsx From resume-nextjs with MIT License | 6 votes |
|
function Component({ payload }: PropsWithChildren<{ payload: Payload }>) {
const totalPeriod = () => {
if (payload.disableTotalPeriod) {
return '';
}
return (
<span style={{ fontSize: '50%' }}>
<Badge>{getFormattingExperienceTotalDuration(payload)}</Badge>
</span>
);
};
// 여기는 기간 표시, Skill Keywords 같은 특이 요소가 있어서 CommonSection, CommonRow 로 못바꾸지 않을까..
return (
<div className="mt-5">
<EmptyRowCol>
<Row className="pb-3">
<Col>
<h2 style={Style.blue}>EXPERIENCE {totalPeriod()}</h2>
</Col>
</Row>
{payload.list.map((item, index) => (
<ExperienceRow key={index.toString()} item={item} index={index} />
))}
</EmptyRowCol>
</div>
);
}
Example #2
| Source File: row.tsx From resume-nextjs with MIT License | 6 votes |
|
function createSkillKeywords(skillKeywords?: string[]) {
if (!skillKeywords) {
return '';
}
return (
<li>
<strong>Skill Keywords</strong>
<div>
{skillKeywords.map((keyword, index) => (
<Badge
style={Style.skillKeywordBadge}
key={index.toString()}
color="secondary"
className="mr-1"
>
{keyword}
</Badge>
))}
</div>
</li>
);
}
Example #3
| Source File: index.tsx From resume-nextjs with MIT License | 6 votes |
|
function Component({ payload }: PropsWithChildren<{ payload: Payload }>) {
const latestUpdated = DateTime.fromFormat(
payload.latestUpdated,
Util.LUXON_DATE_FORMAT.YYYY_LL_DD,
);
const latestUpdatedByNow = Math.floor(
DateTime.local().diff(latestUpdated).milliseconds / 1000 / 60 / 60 / 24,
);
return (
<div className="mt-5">
<Row>
<Col sm={12} md={3}>
<h2 style={Style.blue}>INTRODUCE</h2>
</Col>
<Col sm={12} md={9}>
{payload.contents.map((content, index) => (
<p key={index.toString()}>{content}</p>
))}
<p className="text-right">
<small>Latest Updated</small>{' '}
<Badge color="secondary">
{`${latestUpdated.toFormat(
Util.LUXON_DATE_FORMAT.YYYY_DOT_LL_DOT_DD,
)} (D+${latestUpdatedByNow})`}
</Badge>
</p>
<p className="text-right" style={Style.sign}>
{payload.sign}
</p>
</Col>
</Row>
</div>
);
}
Example #4
| Source File: contact.tsx From resume-nextjs with MIT License | 6 votes |
|
function createLink(payload: IProfile.Contact) {
if (payload.badge) {
return <Badge color="light">{payload.title || payload.link}</Badge>;
}
return payload.link ? (
<HrefTargetBlank url={payload.link} text={payload.title} />
) : (
<span>{payload.title}</span>
);
}
Example #5
| Source File: row.tsx From resume-nextjs with MIT License | 6 votes |
|
function createBadge(level?: ISkill.Item['level']) {
if (!level) {
return '';
}
const color = (() => {
switch (level) {
case 3: {
return 'primary';
}
case 2: {
return 'secondary';
}
case 1:
default: {
return 'light';
}
}
})();
return (
<span>
<Badge pill color={color}>
{level}
</Badge>{' '}
</span>
);
}
Example #6
| Source File: row.tsx From resume-nextjs with MIT License | 5 votes |
|
function createWorkingPeriod(startedAtString: string, endedAtString?: string) {
const DATE_FORMAT = Util.LUXON_DATE_FORMAT;
const startedAt = DateTime.fromFormat(startedAtString, DATE_FORMAT.YYYY_LL);
const { periodTitle, endedAt, isWorking } = (() => {
if (!endedAtString) {
return {
periodTitle: `${startedAt.toFormat(DATE_FORMAT.YYYY_DOT_LL)} ~`,
isWorking: true,
endedAt: undefined,
};
}
const _endedAt = DateTime.fromFormat(endedAtString, DATE_FORMAT.YYYY_LL);
return {
periodTitle: `${startedAt.toFormat(DATE_FORMAT.YYYY_DOT_LL)} ~ ${_endedAt.toFormat(
DATE_FORMAT.YYYY_DOT_LL,
)}`,
endedAt: _endedAt,
isWorking: false,
};
})();
return (
<Row>
<Col md={12} xs={isWorking ? 7 : 9}>
<h4 style={Style.gray}>{periodTitle}</h4>
</Col>
<Col md={12} xs={isWorking ? 5 : 3} className="text-md-right text-center">
{isWorking ? (
<Badge color="primary" className="mr-1">
재직 중
</Badge>
) : (
''
)}
<Badge color="info">{Util.getFormattingDuration(startedAt, endedAt)}</Badge>
</Col>
</Row>
);
}
Example #7
| 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>
);
}
