@fortawesome/free-solid-svg-icons#faUsers JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faUsers.
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: button-icon.js From ofbiz-ui with Apache License 2.0 | 6 votes |
|
iconController() {
switch (this.elemName) {
case 'project':
this.faIcon = faCalendarAlt;
break;
case 'crm':
this.faIcon = faUsers;
break;
case 'cms':
this.faIcon = faCubes;
break;
case 'marketdata':
this.faIcon = faPoll;
break;
case 'sfa':
this.faIcon = faMagic;
break;
case 'marketing':
this.faIcon = faAt;
break;
case 'object dist':
this.faIcon = faNetworkWired;
break;
default:
this.faIcon = faFileInvoice;
}
}
Example #2
| Source File: organization.js From climatescape.org with MIT License | 6 votes |
|
function AttributesSection({ org, className }) {
const topCategories = org.categories.filter(cat => !cat.parent)
const subCategories = org.categories.filter(cat => cat.parent)
// Show all sub categories as well as top categories not represented
// by sub categories
const categoryList = topCategories
.filter(
category => !subCategories.map(cat => cat.parent.id).includes(category.id)
)
.concat(subCategories)
if (!categoryList.length && !hasMeta(org)) return null
return (
<SidebarSectionList title="In a snapshot" className={className}>
{categoryList.map(category => (
<SidebarSectionList.Item
key={category.name}
text={category.name}
to={category.slug}
icon={faBox}
/>
))}
{org.location && (
<SidebarSectionList.Item text={org.location} icon={faMapMarkerAlt} />
)}
{org.orgType && (
<SidebarSectionList.Item text={org.orgType} icon={faBuilding} />
)}
{org.headcount && (
<SidebarSectionList.Item
text={`${org.headcount} employees`}
icon={faUsers}
/>
)}
</SidebarSectionList>
)
}
Example #3
| Source File: organization.js From goodhere with MIT License | 6 votes |
|
function AttributesSection({ org, className }) {
const topCategories = org.categories.filter(cat => !cat.parent)
const subCategories = org.categories.filter(cat => cat.parent)
// Show all sub categories as well as top categories not represented
// by sub categories
const categoryList = topCategories
.filter(
category => !subCategories.map(cat => cat.parent.id).includes(category.id)
)
.concat(subCategories)
if (!categoryList.length && !hasMeta(org)) return null
return (
<SidebarSectionList title="In a snapshot" className={className}>
{categoryList.map(category => (
<SidebarSectionList.Item
key={category.name}
text={category.name}
to={category.slug}
icon={faBox}
/>
))}
{org.location && (
<SidebarSectionList.Item text={org.location} icon={faMapMarkerAlt} />
)}
{org.orgType && (
<SidebarSectionList.Item text={org.orgType} icon={faBuilding} />
)}
{org.headcount && (
<SidebarSectionList.Item
text={`${org.headcount} employees`}
icon={faUsers}
/>
)}
</SidebarSectionList>
)
}
Example #4
| Source File: get-links.js From gatsby-starter-scientist with MIT License | 6 votes |
|
getLinks = (links) => {
const linkComponents = {
people: (
<Link key="people" to="/people">
<FontAwesomeIcon icon={faUsers} />
People
</Link>
),
publications: (
<Link key="publications" to="/publications">
<FontAwesomeIcon icon={faBook} />
Publications
</Link>
),
};
return (
<>
{links.map((link) => linkComponents[link])}
</>
);
}
Example #5
| Source File: NotificationMenu.jsx From react-lte with MIT License | 6 votes |
|
demoData = [
{
id: 1,
icon: faEnvelope,
message: '4 new messages',
date: '3 mins',
href: '/notification/1',
},
{
id: 2,
icon: faUsers,
message: '8 friend requests',
date: '12 hours',
href: '/notification/2',
},
{
id: 3,
icon: faFile,
message: '3 new reports',
date: '2 days',
href: '/notification/3',
},
]
Example #6
| Source File: LteInfoBox.test.jsx From react-lte with MIT License | 6 votes |
|
test('Should render component without crash', () => {
const dom = <LteInfoBox icon={faUsers} text={text} number={number} />;
const { container } = render(dom);
expect(container.firstChild.nodeName).toEqual('DIV');
expect(container.firstChild.getAttribute('class')).toEqual('info-box');
expect(container.querySelector('.info-box-icon > svg')).toHaveClass('fa-users');
expect(container.querySelector('.info-box-icon').getAttribute('class')).toEqual('info-box-icon');
expect(container.querySelector('.info-box-text')).toHaveTextContent(text);
expect(container.querySelector('.info-box-number')).toHaveTextContent(number);
});
Example #7
| Source File: OrganizationAttributes.js From climatescape.org with MIT License | 5 votes |
|
OrganizationHeadcount = ({ text, compact, ...props }) => (
<Tag {...props}>
<FontAwesomeIcon icon={faUsers} className="mr-2" />
{text}
</Tag>
)
Example #8
| Source File: people.js From gatsby-starter-scientist with MIT License | 5 votes |
|
People = ({
markdown,
}) => (
<div className="people">
<section>
<header>
<h1>
People
</h1>
<FontAwesomeIcon icon={faUsers} size="2x" />
</header>
<ul className="people__list">
{
markdown.map((person) => (
<li key={person.node.frontmatter.name}>
<Portrait
image={person.node.frontmatter.image}
name={person.node.frontmatter.name}
/>
<div>
<h2>{person.node.frontmatter.name}</h2>
{
person.node.frontmatter.title
&& (
<h3>{person.node.frontmatter.title}</h3>
)
}
{
person.node.frontmatter.email
&& (
<Link
className="person__list-email"
to={`mailto:${person.node.frontmatter.email}`}
>
{person.node.frontmatter.email}
</Link>
)
}
<div dangerouslySetInnerHTML={{ __html: person.node.html }} />
</div>
</li>
))
}
</ul>
</section>
</div>
)
Example #9
| Source File: LteInfoBox.test.jsx From react-lte with MIT License | 5 votes |
|
test('Should render component with icon color', () => {
const dom = <LteInfoBox icon={faUsers} text={text} number={number} iconColor='danger' />;
const { container } = render(dom);
expect(container.querySelector('.info-box-icon')).toHaveClass('bg-danger');
});
Example #10
| Source File: LteInfoBox.test.jsx From react-lte with MIT License | 5 votes |
|
test('Should render component with custom tag', () => {
const dom = <LteInfoBox icon={faUsers} text={text} number={number} tag='section' />;
const { container } = render(dom);
expect(container.firstChild.nodeName).toEqual('SECTION');
});
Example #11
| Source File: LteInfoBox.test.jsx From react-lte with MIT License | 5 votes |
|
test('Should render component with bg color', () => {
const dom = <LteInfoBox icon={faUsers} text={text} number={number} bgColor='danger' />;
const { container } = render(dom);
expect(container.firstChild).toHaveClass('bg-danger');
});
Example #12
| Source File: DemoDashboard.jsx From react-lte with MIT License | 4 votes |
|
export default function DemoDashboard() {
return (
<>
<LteContentHeader title='Dashboard' />
<LteContent>
<Row>
<Col xs='12' sm='6' md='3'>
<LteInfoBox icon={faCog} text='CPU Traffic' number='10%' iconColor='info' />
</Col>
<Col xs='12' sm='6' md='3'>
<LteInfoBox icon={faThumbsUp} text='Likes' number='41,410' iconColor='danger' />
</Col>
<div className='clearfix hidden-md-up' />
<Col xs='12' sm='6' md='3'>
<LteInfoBox icon={faShoppingCart} text='Sales' number='760' iconColor='success' />
</Col>
<Col xs='12' sm='6' md='3'>
<LteInfoBox icon={faUsers} text='New Members' number='2,000' iconColor='warning' />
</Col>
</Row>
<Row>
<Col lg='3' xs='6'>
<LteSmallBox title='150' message='New Orders' href='/info' icon={faShoppingBasket} color='info' />
</Col>
<Col lg='3' xs='6'>
<LteSmallBox title='53%' message='Bounce Rate' href='/info' icon={faChartBar} color='success' />
</Col>
<Col lg='3' xs='6'>
<LteSmallBox title='44' message='User Registrations' href='/info' icon={faUserPlus} color='warning' />
</Col>
<Col lg='3' xs='6'>
<LteSmallBox title='65' message='Unique Visitors' href='/info' icon={faChartPie} color='danger' />
</Col>
</Row>
<Row>
<Col lg='8'>
<Card>
<CardHeader className='border-transparent'>
<CardTitle>Latest Orders</CardTitle>
<LteCardTools>
<Button color='' className='btn-tool' data-card-widget='collapse'>
<FontAwesomeIcon icon={faMinus} />
</Button>
<Button color='' className='btn-tool' data-card-widget='remove'>
<FontAwesomeIcon icon={faTimes} />
</Button>
</LteCardTools>
</CardHeader>
<CardBody className='p-0'>
<Table responsive>
<thead>
<tr>
<th>Order ID</th>
<th>Item</th>
<th>Status</th>
<th>Popularity</th>
</tr>
</thead>
<tbody>
<tr>
<td>OR9842</td>
<td>Call of Duty IV</td>
<td>
<Badge tag='span' color='success'>
Shipped
</Badge>
</td>
<td>
<div className='sparkbar' data-color='#00a65a' data-height='20'>
90,80,90,-70,61,-83,63
</div>
</td>
</tr>
<tr>
<td>OR1848</td>
<td>Samsung Smart TV</td>
<td>
<Badge tag='span' color='warning'>
Pending
</Badge>
</td>
<td>
<div className='sparkbar' data-color='#f39c12' data-height='20'>
90,80,-90,70,61,-83,68
</div>
</td>
</tr>
<tr>
<td>OR7429</td>
<td>iPhone 6 Plus</td>
<td>
<Badge tag='span' color='danger'>
Delivered
</Badge>
</td>
<td>
<div className='sparkbar' data-color='#f56954' data-height='20'>
90,-80,90,70,-61,83,63
</div>
</td>
</tr>
<tr>
<td>OR7429</td>
<td>Samsung Smart TV</td>
<td>
<Badge tag='span' color='info'>
Processing
</Badge>
</td>
<td>
<div className='sparkbar' data-color='#00c0ef' data-height='20'>
90,80,-90,70,-61,83,63
</div>
</td>
</tr>
<tr>
<td>OR1848</td>
<td>Samsung Smart TV</td>
<td>
<Badge tag='span' color='warning'>
Pending
</Badge>
</td>
<td>
<div className='sparkbar' data-color='#f39c12' data-height='20'>
90,80,-90,70,61,-83,68
</div>
</td>
</tr>
<tr>
<td>OR7429</td>
<td>iPhone 6 Plus</td>
<td>
<Badge tag='span' color='danger'>
Delivered
</Badge>
</td>
<td>
<div className='sparkbar' data-color='#f56954' data-height='20'>
90,-80,90,70,-61,83,63
</div>
</td>
</tr>
<tr>
<td>OR9842</td>
<td>Call of Duty IV</td>
<td>
<Badge tag='span' color='success'>
Shipped
</Badge>
</td>
<td>
<div className='sparkbar' data-color='#00a65a' data-height='20'>
90,80,90,-70,61,-83,63
</div>
</td>
</tr>
</tbody>
</Table>
</CardBody>
</Card>
<Row>
<Col lg='6'>
<LteDirectChat color='warning'>
<CardHeader>
<CardTitle>Direct Chat</CardTitle>
<LteCardTools>
<Badge color='warning' data-toggle='tooltip' title='3 New Messages'>
3
</Badge>
<Button className='btn-tool' color='' data-card-widget='collapse'>
<FontAwesomeIcon icon={faMinus} />
</Button>
<Button
color=''
className='btn-tool'
data-toggle='tooltip'
title='Contacts'
data-widget='chat-pane-toggle'
>
<FontAwesomeIcon icon={faComments} />
</Button>
<Button color='' className='btn-tool' data-card-widget='remove'>
<FontAwesomeIcon icon={faTimes} />
</Button>
</LteCardTools>
</CardHeader>
<CardBody>
<LteDirectChatMessages>
<LteDirectChatMsg
name='Alexander Pierce'
date='23 Jan 2:00 pm'
image={user1}
message="Is this template really for free? That's unbelievable!"
/>
<LteDirectChatMsg
right
name='Sarah Bullock'
date='23 Jan 2:05 pm'
image={user3}
message='You better believe it!'
/>
<LteDirectChatMsg
name='Alexander Pierce'
date='23 Jan 5:37 pm'
image={user1}
message='Working with AdminLTE on a great new app! Wanna join?'
/>
<LteDirectChatMsg
right
name='Sarah Bullock'
date='23 Jan 6:10 pm'
image={user3}
message='I would love to.'
/>
</LteDirectChatMessages>
<LteDirectChatContacts>
<LteContactsList>
<LteContactsListItem
href='/contacts'
image={user1}
name='Count Dracula'
date='2/28/2015'
message='How have you been? I was...'
/>
<LteContactsListItem
href='/contacts'
image={user7}
name='Sarah Doe'
date='2/23/2015'
message='I will be waiting for...'
/>
<LteContactsListItem
href='/contacts'
image={user3}
name='Nadia Jolie'
date='2/20/2015'
message="I'll call you back at..."
/>
<LteContactsListItem
href='/contacts'
image={user5}
name='Nora S. Vans'
date='2/10/2015'
message='Where is your new...'
/>
<LteContactsListItem
href='/contacts'
image={user6}
name='John K.'
date='1/27/2015'
message='Can I take a look at...'
/>
<LteContactsListItem
href='/contacts'
image={user8}
name='Kenneth M.'
date='1/4/2015'
message='Never mind I found...'
/>
</LteContactsList>
</LteDirectChatContacts>
</CardBody>
<CardFooter>
<Form>
<InputGroup>
<Input placeholder='Type Message ...' />
<InputGroupAddon addonType='append'>
<Button color='warning'>Send</Button>
</InputGroupAddon>
</InputGroup>
</Form>
</CardFooter>
</LteDirectChat>
</Col>
<Col lg='6'>
<Card>
<CardHeader>
<CardTitle>Latest Members</CardTitle>
<LteCardTools>
<Badge color='danger'>8 New Members</Badge>
<Button className='btn-tool' color='' data-card-widget='collapse'>
<FontAwesomeIcon icon={faMinus} />
</Button>
<Button color='' className='btn-tool' data-card-widget='remove'>
<FontAwesomeIcon icon={faTimes} />
</Button>
</LteCardTools>
</CardHeader>
<CardBody className='p-0'>
<LteUsersList>
<LteUsersListItem image={user1} href='/users' name='Alexander Pierce' date='Today' />
<LteUsersListItem image={user8} href='/users' name='Norman' date='Yesterday' />
<LteUsersListItem image={user7} href='/users' name='Jane' date='12 Jan' />
<LteUsersListItem image={user6} href='/users' name='John' date='12 Jan' />
<LteUsersListItem image={user2} href='/users' name='Alexander' date='13 Jan' />
<LteUsersListItem image={user5} href='/users' name='Sarah' date='14 Jan' />
<LteUsersListItem image={user4} href='/users' name='Nora' date='15 Jan' />
<LteUsersListItem image={user3} href='/users' name='Nadia' date='15 Jan' />
</LteUsersList>
</CardBody>
</Card>
</Col>
</Row>
</Col>
<Col lg='4'>
<LteInfoBox icon={faTag} text='Inventory' number='5,200' bgColor='warning' />
<LteInfoBox icon={faHeart} text='Mentions' number='92,050' bgColor='success' />
<LteInfoBox icon={faCloudDownloadAlt} text='Downloads' number='114,381' bgColor='danger' />
<LteInfoBox icon={faComment} text='Direct Messages' number='163,921' bgColor='info' />
<Card>
<CardHeader className='border-0'>
<CardTitle>Online Store Overview</CardTitle>
<LteCardTools>
<Button className='btn-tool' color=''>
<FontAwesomeIcon icon={faDownload} />
</Button>
<Button color='' className='btn-tool'>
<FontAwesomeIcon icon={faBars} />
</Button>
</LteCardTools>
</CardHeader>
<CardBody>
<div className='d-flex justify-content-between align-items-center border-bottom mb-3'>
<p className='text-success text-xl'>
<FontAwesomeIcon icon={faRedo} />
</p>
<p className='d-flex flex-column text-right'>
<span className='font-weight-bold'>
<FontAwesomeIcon icon={faArrowUp} className='text-success' />
12%
</span>
<span className='text-muted'>CONVERSION RATE</span>
</p>
</div>
<div className='d-flex justify-content-between align-items-center border-bottom mb-3'>
<p className='text-warning text-xl'>
<FontAwesomeIcon icon={faShoppingCart} />
</p>
<p className='d-flex flex-column text-right'>
<span className='font-weight-bold'>
<FontAwesomeIcon icon={faArrowUp} className='text-warning' /> 0.8%
</span>
<span className='text-muted'>SALES RATE</span>
</p>
</div>
<div className='d-flex justify-content-between align-items-center mb-0'>
<p className='text-danger text-xl'>
<FontAwesomeIcon icon={faUsers} />
</p>
<p className='d-flex flex-column text-right'>
<span className='font-weight-bold'>
<FontAwesomeIcon icon={faArrowUp} className='text-danger' /> 1%
</span>
<span className='text-muted'>REGISTRATION RATE</span>
</p>
</div>
</CardBody>
</Card>
</Col>
</Row>
</LteContent>
</>
);
}
Example #13
| Source File: index.js From Webiu with MIT License | 4 votes |
|
Team = ({
title,
showSearchBar,
heads,
contributors,
researchers,
alumni,
}) => {
const [searchItem, setSearchItem] = useState("")
const [headsSearchItem, setHeadsSearchItem] = useState("")
const [headsSearchResults, setHeadsSearchResults] = useState(heads)
const [researchersSearchItem, setResearchersSearchItem] = useState("")
const [researchersSearchResults, setResearchersSearchResults] = useState(
researchers
)
const [alumniSearchItem, setAlumniSearchItem] = useState("")
const [alumniSearchResults, setAlumniSearchResults] = useState(alumni)
const [searchResults, setSearchResults] = useState(contributors)
const [name, setName] = useState(null)
const [position, setPosition] = useState(null)
const [show, setShow] = useState(false)
const [image, setImage] = useState(null)
const handleClick = (name, position, image) => {
setName(name)
setPosition(position)
setImage(image)
setShow(true)
}
const handleHeadsSearch = async headsSearchItem => {
const results = heads.filter(head =>
head.name.toLowerCase().includes(headsSearchItem)
)
setHeadsSearchItem(headsSearchItem)
setHeadsSearchResults(results)
}
const handleResearcherSearch = async researchersSearchItem => {
const results = researchers.filter(researcher =>
researcher.name.toLowerCase().includes(researchersSearchItem)
)
setResearchersSearchItem(researchersSearchItem)
setResearchersSearchResults(results)
}
const handleAlumniSearch = async alumniSearchItem => {
const results = alumni.filter(aAlumni =>
aAlumni.name.toLowerCase().includes(alumniSearchItem)
)
setAlumniSearchItem(alumniSearchItem)
setAlumniSearchResults(results)
}
const handleSearch = async searchItem => {
const results = contributors.filter(contributor =>
contributor.name.toLowerCase().includes(searchItem)
)
setSearchItem(searchItem)
setSearchResults(results)
}
return (
<div className="team-component">
<Modal show={show} onHide={() => setShow(false)}>
<Modal.Header closeButton></Modal.Header>
<Modal.Body>
<div style={{ textAlign: "center" }}>
<img src={image} alt="profile" className="team-img" />
<div>
<h4 className="team-title">{name}</h4>
</div>
<div>
<p className="team-position">{position}</p>
</div>
</div>
</Modal.Body>
</Modal>
{title ? (
<div className="header-component">
<h2>
<FontAwesomeIcon icon={faUsers} className="icon-h2" /> {title}
</h2>
</div>
) : null}
<Container>
{!heads || (
<div>
<div className="team-search-div">
<h3>Heads</h3>
<div className="contributors-search">
{showSearchBar ? (
<SearchBar
input={headsSearchItem}
handleSearch={handleHeadsSearch}
placeHolder="Search heads"
/>
) : null}
</div>
</div>
<Row>
{headsSearchResults.map((item, i) => (
<Col
md={6}
key={i}
className="team-column"
onClick={() => handleClick(item.name, item.title, item.image)}
>
<TeamListItem name={item.name} title={item.title} />
</Col>
))}
</Row>
</div>
)}
<br />
{!researchers || (
<div>
<div className="team-search-div">
<h3>Researchers</h3>
<div className="contributors-search">
{showSearchBar ? (
<SearchBar
input={researchersSearchItem}
handleSearch={handleResearcherSearch}
placeHolder="Search Researchers"
/>
) : null}
</div>
</div>
<Row>
{researchersSearchResults.map((item, i) => (
<Col
md={4}
sm={6}
key={i}
className="team-column"
onClick={() => handleClick(item.name, item.title, item.image)}
>
<TeamListItem
name={item.name}
title={item.title}
horizontal
/>
</Col>
))}
</Row>
<br />
</div>
)}
{!alumni || (
<div>
<div className="team-search-div">
<h3>Alumni</h3>
<div className="contributors-search">
{showSearchBar ? (
<SearchBar
input={alumniSearchItem}
handleSearch={handleAlumniSearch}
placeHolder="Search Alumni"
/>
) : null}
</div>
</div>
<Row>
{alumniSearchResults.map((item, i) => (
<Col
md={4}
sm={6}
key={i}
className="team-column"
onClick={() => handleClick(item.name, item.title, item.image)}
>
<TeamListItem
name={item.name}
title={item.title}
horizontal
/>
</Col>
))}
</Row>
<br />
</div>
)}
{!contributors || (
<div>
<div className="team-search-div">
<h3>Contributors</h3>
<div className="contributors-search">
{showSearchBar ? (
<SearchBar
input={searchItem}
handleSearch={handleSearch}
placeHolder="Search Contributors"
/>
) : null}
</div>
</div>
<Row>
{searchResults.map((item, i) => (
<Col
md={3}
sm={4}
key={i}
className="team-column"
onClick={() => handleClick(item.name, item.title, item.image)}
>
<TeamListItem
name={item.name}
title={item.title}
horizontal
/>
</Col>
))}
</Row>
<br />
</div>
)}
</Container>
</div>
)
}
Example #14
| Source File: ColabApp.js From Sketchify with MIT License | 4 votes |
|
function ColabApp() {
// const [html, setHtml] = useLocalStorage("html", "");
// const [css, setCss] = useLocalStorage("css", "");
// const [js, setJs] = useLocalStorage("js", "");
// const [title, setTitle] = useLocalStorage("title", "");
const [username] = useLocalStorage("username", "");
const [roomname] = useLocalStorage("roomname", "");
const [html, setHtml] = useState("");
const [css, setCss] = useState("");
const [js, setJs] = useState("");
const [title, setTitle] = useState("");
const [srcDoc, setSrcDoc] = useState("");
const { socket } = useSocket();
const htmlEditor = useRef(null);
const cssEditor = useRef(null);
const jsEditor = useRef(null);
// HTML
const downloadHtml = () => {
let htmlContent = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>${title}</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>${html}</body>
<script src="./script.js"></script>
</html>
`;
let link = document.getElementById("download-btn-html");
let file = new Blob([htmlContent], { type: "html" });
let downloadFile = "index.html";
link.target = "_blank";
link.href = URL.createObjectURL(file);
link.download = downloadFile;
};
const downloadCss = () => {
// CSS
let cssLink = document.getElementById("download-btn-css");
let cssFile = new Blob([css], { type: "css" });
let cssDownloadFile = "styles.css";
cssLink.target = "_blank";
cssLink.href = URL.createObjectURL(cssFile);
cssLink.download = cssDownloadFile;
};
const downloadJs = () => {
// JS
let jsLink = document.getElementById("download-btn-js");
let jsFile = new Blob([js], { type: "js" });
let jsDownloadFile = "script.js";
jsLink.target = "_blank";
jsLink.href = URL.createObjectURL(jsFile);
jsLink.download = jsDownloadFile;
};
const clearEditor = () => {
setHtml("");
setCss("");
setJs("");
};
socket.on("msg", (data) => {
setHtml(data.html);
setCss(data.css);
setJs(data.js);
setTitle(data.title);
console.log("FROM", data.username);
});
useEffect(() => {
if (title === "") {
document.title = "Sketchify - Untitled";
} else {
document.title = "Sketchify - " + title;
}
if (!(html === "" && css === "" && js === "")) {
document.getElementById("iframe").classList.remove("disblock");
document.getElementById("intro").classList.add("disblock");
}
const timeout = setTimeout(() => {
setSrcDoc(`
<html>
<body>${html}</body>
<style>${css}</style>
<script>${js}</script>
</html>
`);
}, 250);
return () => clearTimeout(timeout);
}, [html, css, js, title]);
useEffect(() => {
window.addEventListener("beforeunload", (ev) => {
ev.preventDefault();
return (
(ev.returnValue = "Changes you made will not be saved."),
socket.emit("leave-room", { roomname })
);
});
});
const sendData = () => {
console.log("sending", htmlEditor.current.props.value);
socket.emit("data-to-room", {
roomname,
username,
title,
html: htmlEditor.current.props.value,
css: cssEditor.current.props.value,
js: jsEditor.current.props.value,
});
};
return (
<div className="wrap-box">
<nav className="nav-bar box1">
<div className="logo">Sketchify</div>
<input
className="title"
id="title-input"
placeholder="Untitled"
required="required"
value={title}
onChange={() =>
setTitle(document.getElementById("title-input").value)
}
autoComplete="off"
/>
<div className="btn-container">
<div className="clearCode" onClick={clearEditor}>
<FontAwesomeIcon icon={faEraser} />
<div>Clear Code</div>
</div>
<a
href=" "
id="download-btn-html"
title="Download HTML file"
onClick={downloadHtml}>
<FontAwesomeIcon icon={faDownload} />
<div>HTML</div>
</a>
<a
href=" "
id="download-btn-css"
title="Download CSS file"
onClick={downloadCss}>
<FontAwesomeIcon icon={faDownload} />
<div>CSS</div>
</a>
<a
href=" "
id="download-btn-js"
title="Download JS file"
onClick={downloadJs}>
<FontAwesomeIcon icon={faDownload} />
<div>JS</div>
</a>
<a
href="/colabDetails"
id="collaborate-btn"
title="Collaborate">
<FontAwesomeIcon icon={faUsers} />
<div>Collaborate</div>
</a>
</div>
</nav>
<Split sizes={[50, 50]} direction="vertical" className="box2">
<Split className="pane top-pane box21" sizes={[33, 34, 33]}>
<Editor
language="text/html"
displayName="HTML"
refer={htmlEditor}
value={html}
onChange={setHtml}
performSend={sendData}
/>
<Editor
language="css"
displayName="CSS"
value={css}
onChange={setCss}
performSend={sendData}
refer={cssEditor}
/>
<Editor
language="javascript"
displayName="JS"
value={js}
onChange={setJs}
performSend={sendData}
refer={jsEditor}
/>
</Split>
<div className="pane box22">
<iframe
srcDoc={srcDoc}
title="output"
id="iframe"
sandbox="allow-scripts"
frameBorder="0"
width="100%"
height="100%"
className="disblock"
/>
<iframe
srcDoc={introDoc}
title="intro"
id="intro"
sandbox="allow-scripts"
frameBorder="0"
width="100%"
height="100%"
/>
</div>
</Split>
<a
href="https://github.com/s-katte/Sketchify"
target="_blank"
rel="noopener noreferrer"
id="github-link"
className="text-center">
<FontAwesomeIcon icon={faGithub} />
<span> GitHub</span>
</a>
</div>
);
}
Example #15
| Source File: App.js From Sketchify with MIT License | 4 votes |
|
function App() {
const [html, setHtml] = useLocalStorage("html", "");
const [css, setCss] = useLocalStorage("css", "");
const [js, setJs] = useLocalStorage("js", "");
const [title, setTitle] = useLocalStorage("title", "");
const [srcDoc, setSrcDoc] = useState("");
// HTML
const downloadHtml = () => {
let htmlContent = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>${title}</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>${html}</body>
<script src="./script.js"></script>
</html>
`;
let link = document.getElementById("download-btn-html");
let file = new Blob([htmlContent], { type: "html" });
let downloadFile = "index.html";
link.target = "_blank";
link.href = URL.createObjectURL(file);
link.download = downloadFile;
};
const downloadCss = () => {
// CSS
let cssLink = document.getElementById("download-btn-css");
let cssFile = new Blob([css], { type: "css" });
let cssDownloadFile = "styles.css";
cssLink.target = "_blank";
cssLink.href = URL.createObjectURL(cssFile);
cssLink.download = cssDownloadFile;
};
const downloadJs = () => {
// JS
let jsLink = document.getElementById("download-btn-js");
let jsFile = new Blob([js], { type: "js" });
let jsDownloadFile = "script.js";
jsLink.target = "_blank";
jsLink.href = URL.createObjectURL(jsFile);
jsLink.download = jsDownloadFile;
};
const clearEditor = () => {
setHtml("");
setCss("");
setJs("");
};
useEffect(() => {
if (title === "") {
document.title = "Sketchify - Untitled";
} else {
document.title = "Sketchify - " + title;
}
if (!(html === "" && css === "" && js === "")) {
document.getElementById("iframe").classList.remove("disblock");
document.getElementById("intro").classList.add("disblock");
}
const timeout = setTimeout(() => {
setSrcDoc(`
<html>
<body>${html}</body>
<style>${css}</style>
<script>${js}</script>
</html>
`);
}, 250);
return () => clearTimeout(timeout);
}, [html, css, js, title]);
useEffect(() => {
window.addEventListener("beforeunload", (ev) => {
ev.preventDefault();
return (ev.returnValue = "Changes you made will not be saved.");
});
});
return (
<div className="wrap-box">
<nav className="nav-bar box1">
<div className="logo">Sketchify</div>
<input
className="title"
id="title-input"
placeholder="Untitled"
required="required"
value={title}
onChange={() =>
setTitle(document.getElementById("title-input").value)
}
autoComplete="off"
/>
<div className="btn-container">
<div className="clearCode" onClick={clearEditor}>
<FontAwesomeIcon icon={faEraser} />
<div>Clear Code</div>
</div>
<a
href=" "
id="download-btn-html"
title="Download HTML file"
onClick={downloadHtml}>
<FontAwesomeIcon icon={faDownload} />
<div>HTML</div>
</a>
<a
href=" "
id="download-btn-css"
title="Download CSS file"
onClick={downloadCss}>
<FontAwesomeIcon icon={faDownload} />
<div>CSS</div>
</a>
<a
href=" "
id="download-btn-js"
title="Download JS file"
onClick={downloadJs}>
<FontAwesomeIcon icon={faDownload} />
<div>JS</div>
</a>
<a
href="/colabDetails"
id="collaborate-btn"
title="Collaborate">
<FontAwesomeIcon icon={faUsers} />
<div>Collaborate</div>
</a>
</div>
</nav>
<Split sizes={[50, 50]} direction="vertical" className="box2">
<Split className="pane top-pane box21" sizes={[33, 34, 33]}>
<Editor
language="text/html"
displayName="HTML"
value={html}
onChange={setHtml}
/>
<Editor
language="css"
displayName="CSS"
value={css}
onChange={setCss}
/>
<Editor
language="javascript"
displayName="JS"
value={js}
onChange={setJs}
/>
</Split>
<div className="pane box22">
<iframe
srcDoc={srcDoc}
title="output"
id="iframe"
sandbox="allow-scripts"
frameBorder="0"
width="100%"
height="100%"
className="disblock"
/>
<iframe
srcDoc={introDoc}
title="intro"
id="intro"
sandbox="allow-scripts"
frameBorder="0"
width="100%"
height="100%"
/>
</div>
</Split>
<a
href="https://github.com/s-katte/Sketchify"
target="_blank"
rel="noopener noreferrer"
id="github-link"
className="text-center">
<FontAwesomeIcon icon={faGithub} />
<span> GitHub</span>
</a>
</div>
);
}
Example #16
| Source File: SideBar.js From GB-GCGC with MIT License | 4 votes |
|
SideBar = ({ isOpen, toggle }) => (
<div className={classNames("sidebar", { "is-open": isOpen })}>
<div>
<div className="sidebar-header">
<span color="info" onClick={toggle} style={{ color: "#fff" }}>
×
</span>
<Link to={"/home"}>
<h3>GITAM Career Guidance Cell</h3>
</Link>
</div>
<div align="center" className="pt-2 pb-2">
<h4>Menu</h4>
</div>
<div className="side-menu">
<Nav vertical className="pb-3">
<li>
<NavLink tag={Link} to={"/home"}>
<FontAwesomeIcon icon={faHome} className="mr-2" />
Home
</NavLink>
</li>
<hr/>
<span className="pl-3" style={{"textAlign":"initial"}}>
<Collapsible className ="pl-1 fa fa" trigger={<UserIcon/>}>
<Nav vertical className="list-unstyled">
<ul style={{"padding":"0px"}}>
<li className="pl-3">
<NavLink tag={Link} to={"/user-staff"}>
<FontAwesomeIcon icon={faUsers} className="mr-2" />
Staff
</NavLink>
</li>
<li className="pl-3">
<NavLink tag={Link} to={"/user-student"}>
<FontAwesomeIcon icon={faGraduationCap} className="mr-2" />
Student
</NavLink>
</li>
</ul>
</Nav>
</Collapsible>
</span>
<hr/>
<li>
<NavLink tag={Link} to={"/assessment"}>
<FontAwesomeIcon icon={faEdit} className="mr-2"/>
Assessment
</NavLink>
</li>
<hr/>
<li>
<NavLink tag={Link} to={"/Placements"}>
<FontAwesomeIcon icon={faUserGraduate} className="mr-2" />
Placements
</NavLink>
</li>
<hr/>
<li>
<NavLink tag={Link} to={"/IndividualStudentEntry"}>
<FontAwesomeIcon icon={faChalkboardTeacher} className="mr-2" />
Individual student
</NavLink>
</li>
<hr/>
<li>
<NavLink tag={Link} to={"/allstudents"}>
<FontAwesomeIcon icon={faUserEdit} className="mr-2" />
Allstudents
</NavLink>
</li>
<hr/>
<li>
<NavLink tag={Link} to={"/settings"}>
<FontAwesomeIcon icon={faCog} className="mr-2"/>
Settings
</NavLink>
</li>
<hr/>
<li>
<NavLink tag={Link} onClick={ e=>{localStorage.clear();
window.location.href = '/login';}}>
<FontAwesomeIcon icon={faSignOutAlt} className="mr-2" />
Logout
</NavLink>
</li>
<hr/>
</Nav>
</div>
</div>
</div>
)
Example #17
| Source File: index.js From Website with Apache License 2.0 | 4 votes |
|
export default function Downloads() {
const [releases, setReleases] = useState([]);
useEffect(() => {
async function getReleases() {
const response = await fetch(
"https://api.github.com/repos/PGMDev/PGM/releases"
);
return setReleases(await response.json());
}
getReleases();
}, []);
return (
<Layout title="Downloads">
<div className={classnames("container", styles.downloads_container)}>
<h1 className={styles.downloads_title}>Downloads</h1>
{releases.length === 0 ? (
<div className={classnames("hero", styles.spinner_hero)}>
<div className={styles.lds_ripple}>
<div></div>
<div></div>
</div>
</div>
) : (
<div
className={classnames(
"hero",
styles.downloads_hero,
styles.appearing
)}
>
<div className="container row">
<div className="col">
<div className="row">
<img src="/img/shield.png" className={styles.pgm_logo} />
<div className={styles.pgm}>
<h1>PGM {releases[0].name}</h1>
<p>
<label>
{" "}
{format(
new Date(releases[0].published_at),
"LLLL do, yyyy"
)}{" "}
</label>
</p>
<a href={releases[0].html_url}>
Changelog <FontAwesomeIcon icon={faAngleRight} />
</a>
</div>
</div>
<div className={styles.description}>
<p>
Minecraft multiplayer game-server suite for managing PvP
matches across various gamemodes
</p>
</div>
</div>
<div className={classnames("col col--4", styles.col_border)}>
<h2>Download PGM</h2>
<p>
PvP Game Manager (PGM) is a plugin that manages running and
instancing multiple PvP maps across various gamemodes for
Minecraft multiplayer.
</p>
<a
className={classnames(
"button button--primary",
styles.download_button
)}
href={releases[0].assets[0].browser_download_url}
>
Download <FontAwesomeIcon icon={faArrowDown} />
</a>
</div>
<div className={classnames("col col--4", styles.col_margin_left)}>
<h2>Download SportPaper</h2>
<p>
SportPaper is a Minecraft server jar based on Paper 1.8 tuned
for maximum performance and high intensity PvP. It is
mandatory and should run alongside PGM.
</p>
<a
className={classnames(
"button button--primary",
styles.download_button
)}
href={releases[0].assets[1].browser_download_url}
>
Download <FontAwesomeIcon icon={faArrowDown} />
</a>
</div>
</div>
</div>
)}
<div className={styles.others}>
<h2 style={{ marginBottom: "-15px" }}>Other Resources</h2>
<div className="row">
<div className={classnames("col col--6", styles.column)}>
<div className={classnames("hero", styles.others_hero)}>
<div className="col">
<div className="row">
<div className="col col--6">
<div className="row">
<h1 className={styles.others_icon}>
<FontAwesomeIcon icon={faCalendarAlt} />
</h1>
<div className={styles.others_header}>
<h2>Events</h2>
<a href="https://github.com/PGMDev/Events/">
<label>GitHub</label>
</a>
</div>
</div>
</div>
<div className="col col--6">
<a
className={classnames(
"button button--primary",
styles.others_button
)}
href="https://github.com/PGMDev/Events/releases/latest"
>
Download <FontAwesomeIcon icon={faArrowDown} />
</a>
</div>
</div>
<div className={styles.others_description}>
<p>
Events is the official PGM plugin for managing PvP matches
in a competitive setting. Upon joining or cycling, all
team members are forced onto their respective teams.
</p>
</div>
</div>
</div>
</div>
<div className={classnames("col col--6", styles.column)}>
<div className={classnames("hero", styles.others_hero)}>
<div className="col">
<div className="row">
<div className="col col--6">
<div className="row">
<h1 className={styles.others_icon}>
<FontAwesomeIcon icon={faUsers} />
</h1>
<div className={styles.others_header}>
<h2>Community</h2>
<a href="https://github.com/PGMDev/Community/">
<label>GitHub</label>
</a>
</div>
</div>
</div>
<div className="col col--6">
<button
className={classnames(
"button disabled button--primary",
styles.others_button
)}
>
Coming Soon <FontAwesomeIcon icon={faArrowDown} />
</button>
</div>
</div>
<div className={styles.others_description}>
<p>
Community is a standalone plugin for managing PGM servers.
It includes various PGM features, such as punishments,
moderation, freezing and other aspects.
</p>
</div>
</div>
</div>
</div>
</div>
<hr style={{ marginTop: "40px", marginBottom: "10px" }} />
<div className="row">
<div className={classnames("col col--6", styles.column)}>
<div className={classnames("hero", styles.others_hero)}>
<div className="col">
<div className="row">
<div className="col col--6">
<div className="row">
<h1 className={styles.others_icon}>
<FontAwesomeIcon icon={faFolderOpen} />
</h1>
<div className={styles.others_header}>
<h2>ResourcePile</h2>
<a href="https://github.com/MCResourcePile">
<label>GitHub</label>
</a>
</div>
</div>
</div>
<div className="col col--6">
<a
className={classnames(
"button button--primary",
styles.others_button
)}
href="https://mcresourcepile.github.io"
>
Visit <FontAwesomeIcon icon={faFolderOpen} />
</a>
</div>
</div>
<div className={styles.others_description}>
<p>
ResourcePile is a community project which aims to provide
various collections of resources, such as maps or
statistics, for users with backgrounds in Overcast and
similar networks.
</p>
</div>
</div>
</div>
</div>
<div className={classnames("col col--6", styles.column)}>
<div className={classnames("hero", styles.others_hero)}>
<div className="col">
<div className="row">
<div className="col col--6">
<div className="row">
<h1 className={styles.others_icon}>
<FontAwesomeIcon icon={faCompass} />
</h1>
<div className={styles.others_header}>
<h2>PGM Tracker</h2>
<a href="https://pgm.fyi">
<label>Website</label>
</a>
</div>
</div>
</div>
<div className="col col--6">
<a
className={classnames(
"button button--primary",
styles.others_button
)}
href="https://pgm.fyi"
>
Visit <FontAwesomeIcon icon={faCompass} />
</a>
</div>
</div>
<div className={styles.others_description}>
<p>
PGM Tracker is a community tool made by{" "}
<a href="https://github.com/applenick">applenick</a> that
tracks public PGM servers. Take a look at it, play a
variety of Minecraft PvP maps and get involved with
development!
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</Layout>
);
}
