@fortawesome/free-solid-svg-icons#faPlus JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faPlus.
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: Settings.js From ponce-tournois-mario-kart with MIT License | 6 votes |
function AddEditorBtn() {
const [showForm, setShowForm] = useState(false);
const openForm = () => {
if (!showForm) setShowForm(true);
};
const closeForm = () => {
setShowForm(false);
};
return (
<div
className={`managersEditors__item ${
!showForm ? 'managersEditors__addEditor' : ''
}`}
onClick={openForm}
>
{showForm ? (
<AddEditorForm closeForm={closeForm} />
) : (
<div>
<FontAwesomeIcon
icon={faPlus}
className="managersEditors__addEditorBtn"
/>
Ajouter un utilisateur
</div>
)}
</div>
);
}
Example #2
Source File: timesheet-view.js From ofbiz-ui with Apache License 2.0 | 6 votes |
constructor(router, timesheetService, store) {
this.router = router;
this.timesheetService = timesheetService;
this.timesheet = {};
this.timesheets = {};
this.tasks = {};
this.rates = {};
this.store = store;
this.faPlus = faPlus;
this.myTimes = {};
this.store.state.subscribe(
(state) => (this.state = state)
);
}
Example #3
Source File: icons.js From WirtBot with GNU Affero General Public License v3.0 | 6 votes |
library.add( faFileDownload, faTrash, faBars, faCheckSquare, faCheck, faPlus, faCogs, faServer, faLaptop, faMobileAlt );
Example #4
Source File: task-list.js From ofbiz-ui with Apache License 2.0 | 6 votes |
constructor(taskService, store, router) {
this.taskService = taskService;
this.store = store;
this.router = router;
this.faPlus = faPlus;
this.faCheck = faCheck;
this.faBars = faBars;
this.subscription = this.store.state.subscribe(
(state) => (this.state = state)
);
}
Example #5
Source File: ProfileBio.js From pathways with GNU General Public License v3.0 | 6 votes |
render() {
return(
<div className='profileBio'>
<div>
<div>
<ProfileInfo bio={this.props.content.bio}/>
</div>
<hr />
<div>
<ProfileStats content={this.props.content.pathwayData}/>
</div>
<hr />
<div className='createPathwayLink'>
<Link to="/create">
<FontAwesomeIcon icon={faPlus} />
<span>Create a Pathway</span>
</Link>
</div>
</div>
<div className='profileFooter'>
pathways.
</div>
</div>
);
}
Example #6
Source File: AddTrackBtn.js From ponce-tournois-mario-kart with MIT License | 6 votes |
function AddTrackBtn({ setCreating }) {
return (
<Col xs={12} md={6} lg={3} onClick={() => setCreating(true)}>
<div className="cupsList__cup">
<FontAwesomeIcon
icon={faPlus}
className="cupsList__addCupIcon"
/>
Ajouter
</div>
</Col>
);
}
Example #7
Source File: AddCupBtn.js From ponce-tournois-mario-kart with MIT License | 6 votes |
function AddCupBtn({ setCreating }) {
return (
<Col xs={6} md={4} lg={2} onClick={() => setCreating(true)}>
<div className="cupsList__cup">
<FontAwesomeIcon
icon={faPlus}
className="cupsList__addCupIcon"
/>
Ajouter
</div>
</Col>
);
}
Example #8
Source File: LibraryAuthoringPage.jsx From frontend-app-library-authoring with GNU Affero General Public License v3.0 | 6 votes |
ButtonTogglesBase = ({ library, setShowPreviews, showPreviews, sending, quickAddBehavior, intl, }) => ( <> <Button variant="success" className="mr-1" size="lg" disabled={sending} onClick={quickAddBehavior}> <FontAwesomeIcon icon={faPlus} className="pr-1" /> {intl.formatMessage(messages[`library.detail.add_${library.type}`])} </Button> <Button variant="primary" className="ml-1" onClick={() => setShowPreviews(!showPreviews)} size="lg"> <FontAwesomeIcon icon={faSync} className="pr-1" /> { intl.formatMessage(showPreviews ? messages['library.detail.hide_previews'] : messages['library.detail.show_previews']) } </Button> </> )
Example #9
Source File: TabsBar.js From Postman-Clone with MIT License | 5 votes |
TabsBar = (props) => {
const {
tabs,
tabIndex,
handleTabChange,
handleNewTab,
handleRemoveTab,
} = props;
return (
<div>
{/* Tabs Bar */}
<div className="content__tabBar">
<div className="content__tabBarRow">
<div className="content__tabBarColumn" id="content__tabBarTabs">
<div className="content__tabsRow">
{/* Tabs */}
{tabs.map((tab, index) => {
return (
<div
key={index}
onClick={() => {
handleTabChange(index);
}}
className={
index === tabIndex
? "content__requestTab active"
: "content__requestTab "
}
>
<span className="content__requestType">{tab.type}</span>
{tab.name}
<FontAwesomeIcon
icon={faTimes}
onClick={() => handleRemoveTab(tab)}
className="content__requestTabCloseIcon"
/>
</div>
);
})}
<div
className="content__requestTab"
id="content__requestTabAddTab"
onClick={handleNewTab}
>
<FontAwesomeIcon icon={faPlus} />
</div>
</div>
</div>
<div className="content__tabBarColumn content__tabBarOptionsWrapper">
<input value="DEV" className="content__tabBarSelect" />
<button className="content__button">
<FontAwesomeIcon icon={faEye} />
</button>
<button className="content__button">
<FontAwesomeIcon icon={faCog} />
</button>
</div>
</div>
</div>
</div>
);
}
Example #10
Source File: IndexHeader.js From climatescape.org with MIT License | 5 votes |
IndexHeader = ({ title, definition, buttonText, buttonUrl, filter, onClearFilter, onApplyFilter, organizations, allOrganizations, showFilters, }) => ( <div className="border-b border-gray-400 py-3"> <div className="flex items-center md:mt-4 "> <h2 className="text-xl sm:text-2xl tracking-wide flex-grow">{title}</h2> <span className="text-gray-800 hidden sm:block"> {organizations?.length} organizations </span> {buttonText && buttonUrl && ( <a href={buttonUrl} className="px-4 py-2 ml-2 flex-shrink-0 leading-none border rounded text-teal-500 border-teal-500 hover:text-white hover:bg-teal-500" target="_blank" rel="noopener noreferrer" > <FontAwesomeIcon icon={faPlus} className="mr-2" /> {buttonText} </a> )} </div> {definition && <p className="mt-3 mb-4 text-sm">{definition}</p>} <OrganizationFilter currentFilter={filter} onClearFilter={onClearFilter} onApplyFilter={onApplyFilter} organizations={allOrganizations} showFilters={showFilters} /> </div> )
Example #11
Source File: icon.js From uptime-kuma with MIT License | 5 votes |
library.add( faArrowAltCircleUp, faCog, faEdit, faEye, faEyeSlash, faList, faPause, faPlay, faPlus, faSearch, faTachometerAlt, faTimes, faTimesCircle, faTrash, faCheckCircle, faStream, faSave, faExclamationCircle, faBullhorn, faArrowsAltV, faUnlink, faQuestionCircle, faImages, faUpload, faCopy, faCheck, faFile, faAward, faLink, faChevronDown, faSignOutAlt, faPen, faExternalLinkSquareAlt, faSpinner, faUndo, faPlusCircle, faAngleDown, faLink, );
Example #12
Source File: CourseImportListItem.jsx From frontend-app-library-authoring with GNU Affero General Public License v3.0 | 5 votes |
CourseImportListItem = ({
intl, course, libraryId, importBlocksHandler, ongoingImportState, taskPaginationParams,
}) => {
const [importState, setImportState] = useState('default');
useEffect(() => {
setImportState(ongoingImportState);
}, [ongoingImportState]);
const handleImport = () => {
importBlocksHandler({ params: { libraryId, courseId: course.id, taskPaginationParams } });
};
const importButtonProps = {
state: ongoingImportState || 'default',
variant: importState === 'error' ? 'danger' : 'primary',
labels: {
default: intl.formatMessage(messages['library.course_import.new_import.label']),
pending: intl.formatMessage(messages['library.course_import.ongoing_import.label']),
complete: intl.formatMessage(messages['library.course_import.import_scheduled.label']),
error: intl.formatMessage(messages['library.course_import.import_schedule_failed.label']),
},
icons: {
default: <FontAwesomeIcon icon={faPlus} className="icon-inline" />,
pending: <FontAwesomeIcon icon={faSpinner} className="icon-inline fa-spin" />,
complete: <FontAwesomeIcon icon={faCheck} className="icon-inline" />,
error: <FontAwesomeIcon icon={faSync} className="icon-inline" />,
},
disabledStates: ['pending', 'complete'],
className: 'btn-lg',
onClick: handleImport,
};
return (
<div className="library-link">
<Row className="h-100">
<Col xs={6} md={6} className="my-auto">
<h3 className="library-title">{course.title}</h3>
</Col>
<Col xs={6} md={6} className="my-auto text-center text-md-right">
<StatefulButton {...importButtonProps} />
</Col>
</Row>
<div className="library-metadata">
<span className="library-org metadata-item">
<span className="label">{intl.formatMessage(messages['library.course_import.list_item.organization'])}</span>
<span className="value">{course.org}</span>
</span>
<span className="library-slug metadata-item">
<span className="label">{intl.formatMessage(messages['library.course_import.list_item.id'])}</span>
<span className="value">{course.id}</span>
</span>
</div>
</div>
);
}
Example #13
Source File: Accordion.js From fellowship-program-website with MIT License | 5 votes |
AccordionSection = ({
i,
expanded,
setExpanded,
headerText,
children,
}) => {
const isOpen = expanded[i] === true
const icon = isOpen ? faMinus : faPlus
// By using `AnimatePresence` to mount and unmount the contents, we can animate
// them in and out while also only rendering the contents of open accordions
return (
<Container>
<Header
initial={false}
animate={{
backgroundColor: isOpen ? styles.colorWhite : styles.colorWhite,
color: isOpen ? styles.colorGrayDarkest : styles.colorGrayDarkest,
}}
onClick={() => setExpanded({ ...expanded, [i]: isOpen ? false : true })}
>
<span>
<Icon icon={icon} />
</span>
<span>{headerText}</span>
</Header>
<AnimatePresence initial={false}>
{isOpen && (
<Section
key="content"
initial="collapsed"
animate="open"
exit="collapsed"
variants={{
open: { opacity: 1, height: "auto" },
collapsed: { opacity: 0, height: 0 },
}}
transition={{ duration: 0.8, ease: [0.04, 0.62, 0.23, 0.98] }}
>
<Content
variants={{ collapsed: { scale: 0.8 }, open: { scale: 1 } }}
transition={{ duration: 0.8 }}
className="accordion-content"
>
{children}
</Content>
</Section>
)}
</AnimatePresence>
</Container>
)
}
Example #14
Source File: Sidebar.js From Postman-Clone with MIT License | 5 votes |
Sidebar = () => {
const [tabs] = useState(["History", "Collections", "APIs"]);
const [tabIndex, setTabIndex] = useState(1);
const handleTabChange = (index) => {
setTabIndex(index);
};
return (
<div className="sidebar">
<div className="sidebar__searchBarWrapper">
<input
type="text"
placeholder="Filter"
className="sidebar__searchBar"
/>
<div className="sidebar__menu">
{tabs.map((tab, index) => {
return (
<span
onClick={() => handleTabChange(index)}
className={
index === tabIndex
? "sidebar__menuOptions active"
: "sidebar__menuOptions"
}
>
{tab}
</span>
);
})}
</div>
<div className="sidebar__row">
<div className="sidebar__column">
<span className="sidebar__newCollectionLink">
<FontAwesomeIcon icon={faPlus} /> New Collection
</span>
<span className="sidebar__trashLink">Trash</span>
</div>
</div>
{/* Collections List */}
<div className="sidebar__collectionList">
{collections.map((collection, index) => {
return (
<div className="sidebar__collection">
<div className="sidebar__collectionRow">
<div className="sidebar__collectionColumn">
<FontAwesomeIcon
icon={faCaretRight}
className="sidebar__icons"
/>
<FontAwesomeIcon
icon={faFolder}
className="sidebar__icons"
/>
</div>
<div className="sidebar__collectionColumn">
<span>{collection.name}</span>
<p className="sidebar__collectionRequests">
{collection.requestsCount} Requests
</p>
</div>
</div>
</div>
);
})}
</div>
</div>
</div>
);
}
Example #15
Source File: SystemIcons.jsx From gatsby-startbootstrap-agency with MIT License | 5 votes |
PlusIcon = makeFAIcon(faPlus)
Example #16
Source File: project-list.js From ofbiz-ui with Apache License 2.0 | 5 votes |
constructor(router, projectService) {
this.router = router;
this.projectService = projectService;
this.faPlus = faPlus;
}
Example #17
Source File: resource-list.js From ofbiz-ui with Apache License 2.0 | 5 votes |
constructor(router, resourceService) {
this.faPlus = faPlus;
this.faFilter = faFilter;
this.router = router;
this.resourceService = resourceService;
}
Example #18
Source File: timesheet-list.js From ofbiz-ui with Apache License 2.0 | 5 votes |
constructor(router, timesheetService) {
this.router = router;
this.timesheetService = timesheetService;
this.faPlus = faPlus;
this.faFilter = faFilter;
}
Example #19
Source File: fontawesome.js From xmrig-workers with GNU General Public License v3.0 | 5 votes |
export default function () {
library.add(faGithub, faWindows, faLinux, faTwitter, faReddit, faTelegram, faCheckCircle, faMicrochip, faTrashAlt,
faPaperPlane, faSpinner, faFlask, faInfoCircle, faPen, faTools, faCheck, faPlus, faCog, faExclamationTriangle,
faQuestionCircle, faSyncAlt, faInfinity, faDownload, faCopy, faPlug, faTimesCircle);
}
Example #20
Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
ProjectDetailList = () => {
const playList1 = [
{ title: "Activity #1" },
{ title: "Activity #2" },
{ title: "My first activity", status: "Shared" },
];
const playList2 = [
{ title: "Activity #1" },
{ title: "Activity #2" },
{ title: "My first activity", status: "Shared" },
{ title: "Activity #2" },
{ title: "Activity #2", status: "Shared" },
];
const [openMyProject, setOpenMyProject] = useState(false);
const [uploadImageStatus, setUploadImageStatus] = useState(false);
return (
<>
<div className="myproject-playlist">
<div className="content-wrapper">
<div className="inner-content">
<div className="topHeading-playlist-detail">
<div className="topHeading-creation-btn">
<div>
<TopHeading
description="Nevada Department of Education"
image={projectFolder}
heading="Design, Art & History"
color="#084892"
className="heading-style"
/>
</div>
<div className="playlist-creation-btn">
<Buttons
secondary={true}
text="Create new playlist"
icon={faPlus}
width="189px"
height="35px"
hover={true}
className="btn-margin"
/>
<Buttons
primary={true}
text="Project Preview"
icon={faEye}
width="162px"
height="35px"
hover={true}
/>
</div>
</div>
</div>
<div className="topHeading-playlist-project-title">
<HeadingThree text="Project name" color="#084892" />
</div>
<div className="project-playlist-card">
<div className="playlist-card">
<ProjectList
projectTitle="Playlist name #2"
playList={playList1}
/>
</div>
<div className="playlist-card">
<ProjectList
projectTitle="Playlist name #3"
playList={playList2}
/>
</div>
</div>
</div>
</div>
</div>
</>
);
}
Example #21
Source File: AddPlayerBtn.js From ponce-tournois-mario-kart with MIT License | 5 votes |
function AddPlayerBtn({ tournamentId }) {
const [showForm, setShowForm] = useState(false);
const openForm = () => {
if (!showForm) setShowForm(true);
};
const closeForm = () => {
setShowForm(false);
};
return (
<Row>
<Col xs={12} onClick={openForm}>
<div
className={`podium__player ${
!showForm ? 'podium__addPlayer' : ''
}`}
>
<Row justify="center" align="center">
{showForm ? (
<AddPlayerForm
closeForm={closeForm}
tournamentId={tournamentId}
/>
) : (
<Col xs={12} className="podium__addPlayerWrapper">
<FontAwesomeIcon
icon={faPlus}
className="podium__addPlayerBtn"
/>
Ajouter au podium
</Col>
)}
</Row>
</div>
</Col>
</Row>
);
}
Example #22
Source File: ParticipationComparison.js From ponce-tournois-mario-kart with MIT License | 5 votes |
function ParticipationComparison({
tournament,
onAddComparison,
comparedUsers,
}) {
const [showForm, setShowForm] = useState(false);
const openForm = () => {
if (!showForm) setShowForm(true);
};
const closeForm = () => {
setShowForm(false);
};
const onAdd = (participation) => {
setShowForm(false);
onAddComparison(participation);
};
useEffect(() => {
closeForm();
}, [tournament]);
return (
<Row>
<Col xs={12} onClick={openForm}>
<div
className={`participation__comparison ${
!showForm ? 'participation__addComparison' : ''
}`}
>
<Row justify="center" align="center">
{showForm ? (
<AddComparisonForm
closeForm={closeForm}
onAdd={onAdd}
tournament={tournament}
comparedUsers={comparedUsers}
/>
) : (
<Col xs={12}>
<FontAwesomeIcon
icon={faPlus}
className="participation__addComparisonBtn"
/>
Comparer avec d'autres utilisateurs
</Col>
)}
</Row>
</div>
</Col>
</Row>
);
}
Example #23
Source File: AddParticipationStreamersChart.js From ponce-tournois-mario-kart with MIT License | 5 votes |
function AddParticipationStreamersChart({ tournament, comparedStreamers }) {
const [showForm, setShowForm] = useState(false);
const openForm = () => {
if (!showForm) setShowForm(true);
};
const closeForm = () => {
setShowForm(false);
};
const onClose = () => {
setShowForm(false);
};
useEffect(() => {
closeForm();
}, [tournament]);
return (
<Row>
<Col xs={12} onClick={openForm}>
<div
className={`participation__comparison ${
!showForm ? 'participation__addComparison' : ''
}`}
>
<Row justify="center" align="center">
{showForm ? (
<AddComparisonForm
closeForm={closeForm}
onClose={onClose}
tournament={tournament}
comparedStreamers={comparedStreamers}
/>
) : (
<Col xs={12}>
<FontAwesomeIcon
icon={faPlus}
className="participation__addComparisonBtn"
/>
Comparer avec d'autres streamers
</Col>
)}
</Row>
</div>
</Col>
</Row>
);
}
Example #24
Source File: headline.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
export default function Headline({ setCreateProject }) {
const organization = useSelector((state) => state.organization);
const { currentOrganization, permission } = organization;
const primaryColor = getGlobalColor('--main-primary-color');
return (
<>
<div className="project-headline">
<div className="title">
<div className="title-name-heading-image">
<Headings text={`${currentOrganization?.name}`} headingType="body2" color="#084892" />
<div className="heading-image">
{/* <img src={foldericon} alt="" /> */}
<svg width="35" height="35" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0)">
<path
d="M4 9.60938V24.6094C4 25.2998 4.55965 25.8594 5.25 25.8594H25.25C25.9404 25.8594 26.5 25.2998 26.5 24.6094V11.3402C26.5 10.6498 25.9404 10.0902 25.25 10.0902H16.4038"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
/>
<path
d="M16.4038 10.0902L12.933 6.04244C12.8159 5.92523 12.6569 5.85938 12.4911 5.85938H4.625C4.27983 5.85938 4 6.1392 4 6.48437V9.60937"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
/>
</g>
<defs>
<clipPath id="clip0">
<rect width="30" height="30" fill="white" transform="translate(0 0.859375)" />
</clipPath>
</defs>
</svg>
{/* Projects */}
<Headings text="My Projects" headingType="h2" color="#084892" />
</div>
</div>
<div className="search-main-relaced">
<div className="search-div">
<SearchForm />
</div>
{permission?.Project?.includes('project:create') && (
<Buttons
primary
text="Create a project"
icon={faPlus}
iconColor="#FF0000"
width="auto"
height="35px"
onClick={() => {
setCurrentVisibilityType(null);
setCreateProject(true);
}}
hover
/>
)}
</div>
</div>
<Headings text="Create and organize your activities into projects to create complete courses." headingType="body2" color="#515151" className="top-heading-detail" />
</div>
</>
);
}
Example #25
Source File: AddRaceBtn.js From ponce-tournois-mario-kart with MIT License | 5 votes |
function AddRaceBtn({ participationId }) {
const [showForm, setShowForm] = useState(false);
const openForm = () => {
if (!showForm) setShowForm(true);
};
const closeForm = () => {
setShowForm(false);
};
return (
<Row className="participation__raceWrapper">
<Col xs={12} onClick={openForm}>
<div
className={`participation__race ${
!showForm ? 'participation__addRace' : ''
}`}
>
<Row justify="center" align="center">
{showForm ? (
<AddRaceForm
closeForm={closeForm}
participationId={participationId}
/>
) : (
<Col xs={12}>
<FontAwesomeIcon
icon={faPlus}
className="participation__addRaceBtn"
/>
Ajouter une course
</Col>
)}
</Row>
</div>
</Col>
</Row>
);
}
Example #26
Source File: projectlist.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
ProjectList = ({ className, projectTitle, playList }) => {
const currikiUtility = classNames("curriki-utility-projectlist", className);
const [editStatus, setEditStatus] = useState(true);
return (
<div className={currikiUtility}>
<div className="playlist-top">
<div className="playlist-card-title">
<h3>{projectTitle}</h3>
</div>
<div className="playlist-card-dropdown">
<ActivityCardDropDown />
</div>
</div>
<div className="playlist-items-list">
{/* <div className="project-list-items">
<div className="project-list-title">
<p>Activity #1</p>
</div>
<div className="project-list-status-dropdown">
<div className="project-list-status">
<p>
<span></span> Shared
</p>
</div>
<div className="project-list-dropdown">
<ActivityCardDropDown />
</div>
</div>
</div> */}
{playList?.map((ltem, index) => {
return (
<div className="project-list-items">
<div className="project-list-title">
<p>{ltem.title}</p>
</div>
<div className="project-list-status-dropdown">
<div className="project-list-status">
{ltem?.status && (
<p>
<span></span> {ltem.status}
</p>
)}
</div>
<div className="project-list-dropdown">
<ActivityCardDropDown />
</div>
</div>
</div>
);
})}
</div>
<div className="project-list-add-activity">
<Link
to={`/org/:organization/project/create/one/playlist/addactivity/${editStatus}`}
className="add-activity-link"
>
<FontAwesomeIcon icon={faPlus} style={{ marginRight: "20px" }} />
Add new Activity
</Link>
</div>
</div>
);
}
Example #27
Source File: PlacementEditBoard.js From GB-GCGC with MIT License | 5 votes |
render() {
const {redirect} = this.state;
if(redirect){
return <Redirect to={"/home"}/>
}
return (
<div className="container">
<Card>
<Card.Body>
<div className="inline">
<Card.Title>
<h5 align="center">
Notice Board-Placements
<Tooltip title="Add">
<Link onClick={this.toggleModal}>
<FontAwesomeIcon icon={faPlus} size="xs" className="p-1 fa-lg" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/>
</Link>
</Tooltip>
</h5>
</Card.Title>
</div>
<div>
<Table size="sm" responsive striped>
<thead className="p-3" style={{backgroundColor:'#2A324B',color:'white',fontSize:'24px'}}>
<tr>
<th>S.No</th>
<th>Name of the Company</th>
<th>Date</th>
<th>CTC</th>
<th colspan="2">Operations</th>
</tr>
</thead>
<tbody>
{this.userList()}
</tbody>
</Table>
</div>
</Card.Body>
</Card>
<Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>
<ModalHeader toggle={this.toggleModal}>
Add Placement Event
</ModalHeader>
<ModalBody>
<Form onSubmit={this.handleSubmit}>
<FormGroup>
<Label htmlfor="company">Name Of The Company</Label>
<Input type="text" id="company" name="company" value={this.state.company} onChange={this.onChangeCompany} />
</FormGroup>
<FormGroup>
<Label htmlFor="date"> From </Label>
<Input type="date" id="date" name="date" value={this.state.date} onChange={this.onChangeDate} />
</FormGroup>
<FormGroup>
<Label htmlFor="CTC"> CTC </Label>
<Input type="text" id="ctc" name="ctc" value={this.state.CTC} onChange={this.onChangeCTC}/>
</FormGroup>
<Button type="submit" value="submit" color="primary">
Submit
</Button>
</Form>
</ModalBody>
</Modal>
</div>
);
}
Example #28
Source File: myprojectcard.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
MyProjectCard = ({ className, backgroundImg, title }) => {
const currikiUtility = classNames(
"curriki-utility-myproject-card",
className
);
return (
<div className={currikiUtility}>
<div
className="myproject-card-top"
style={{ backgroundImage: `url(${backgroundImg})` }}
>
<div className="myproject-card-dropdown">
<ActivityCardDropDown iconColor="white" />
</div>
<div className="myproject-card-title">
<h2>{title}</h2>
</div>
</div>
<div className="myproject-card-detail">
<p>
Within the six categories, there are over 50 learning activity types.
These range from Interactive Video, Flashcards.
</p>
</div>
<div className="myproject-card-status">
<p>
<span></span> Published
</p>
</div>
<div className="myproject-card-add-share">
<button
style={{
width: "86px",
height: "32px",
marginRight: "24px",
textAlign: "left",
}}
>
<Link
to="/org/currikistudio/project/create/one/playlist"
style={{ textDecoration: "none", color: "#084892" }}
>
<FontAwesomeIcon
icon={faPlus}
style={{ marginRight: "16px" }}
color="#084892"
/>
Add
</Link>
</button>
<button style={{ width: "108px", height: "32px", textAlign: "right" }}>
<FontAwesomeIcon
icon={faShareSquare}
style={{ marginRight: "16px" }}
color="#084892"
/>
Share
</button>
</div>
</div>
);
}
Example #29
Source File: addteamprojects.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
AddTeamProjects = ({ setPageLoad }) => {
const primaryColor = getGlobalColor('--main-primary-color');
return (
<div className="add-team-projects">
<div className="team-projects-top-section">
<div>
<div className="organization-name">CurrikiStudio</div>
<div className="title-image">
<div>
<h1 className="title">Add projects</h1>
</div>
</div>
</div>
<div
className="back-to-section"
onClick={() => {
setPageLoad((oldStatus) => !oldStatus);
}}
>
<FontAwesomeIcon icon={faAngleLeft} className="back-icon" />
<span>Back to team</span>
</div>
</div>
<div className="project-tabs">
<Tabs className="main-tabs" defaultActiveKey="Projects" id="uncontrolled-tab-example">
<Tab eventKey="Projects" title="Projects">
<div className="flex-button-top">
<div className="team-controller">
<div className="search-and-filters">
<div className="search-bar">
<input type="text" className="search-input" placeholder="Search project" />
{/* <img src={searchimg} alt="search" />*/}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" css-inspector-installed="true">
<path
d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58175 3 3.00003 6.58172 3.00003 11C3.00003 15.4183 6.58175 19 11 19Z"
stroke={primaryColor}
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path d="M21 20.9984L16.65 16.6484" stroke={primaryColor} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div className="team-project-btns">
<div className="project-selection">
<p>5 projects have been selected. </p>
</div>
<Buttons icon={faPlus} text="Add projects to team" primary={true} width="188px" height="32px" hover={true} />
</div>
</div>
</div>
<div className="list-of-team-projects">
<TeamProjectCard backgroundImg={Project1} title="The Curriki Vision" className="mrt" />
<TeamProjectCard backgroundImg={Project2} title="The Curriki Vision" className="mrt" />
<TeamProjectCard backgroundImg={Project3} title="The Curriki Vision" className="mrt" />
<TeamProjectCard backgroundImg={Project1} title="The Curriki Vision" className="mrt" />
<TeamProjectCard backgroundImg={Project2} title="The Curriki Vision" className="mrt" />
<TeamProjectCard backgroundImg={Project3} title="The Curriki Vision" className="mrt" />
</div>
</Tab>
<Tab eventKey="Search" title="Search">
<div className="flex-button-top">
<div className="team-controller">
<div className="search-and-filters">
<div className="search-bar">
<input type="text" className="search-input" placeholder="Search project" />
<img src={searchimg} alt="search" />
</div>
</div>
<div className="team-project-btns">
<div className="project-selection">
<p>5 projects have been selected. </p>
</div>
<Buttons icon={faPlus} text="Add projects to team" primary={true} width="188px" height="32px" hover={true} />
</div>
</div>
</div>
<SearchInterface fromTeam={true} />
</Tab>
</Tabs>
</div>
{/* <div className="flex-button-top">
<div className="team-controller">
<div className="search-and-filters">
<div className="search-bar">
<input
type="text"
className="search-input"
placeholder="Search project"
/>
<img src={searchimg} alt="search" />
</div>
</div>
<div className="team-project-btns">
<div className="project-selection">
<p>5 projects have been selected. </p>
</div>
<Buttons
icon={faPlus}
text="Add projects to team"
primary={true}
width="188px"
height="32px"
hover={true}
/>
</div>
</div>
</div> */}
</div>
);
}