@fortawesome/free-solid-svg-icons#faUsers JavaScript Examples

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;
    }
  }

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>
  )
}

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>
  )
}

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])}
    </>
  );
}

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',
  },
]

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);
});

OrganizationHeadcount = ({ text, compact, ...props }) => (
  <Tag {...props}>
    <FontAwesomeIcon icon={faUsers} className="mr-2" />
    {text}
  </Tag>
)

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>
)

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');
});

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');
});

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');
});

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>
    </>
  );
}

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>
  )
}

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>&nbsp;GitHub</span>
            </a>
        </div>
    );
}

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>&nbsp;GitHub</span>
            </a>
        </div>
    );
}

SideBar = ({ isOpen, toggle }) => (
  <div className={classNames("sidebar", { "is-open": isOpen })}>
    <div>
      <div className="sidebar-header">
        <span color="info" onClick={toggle} style={{ color: "#fff" }}>
          &times;
        </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>
)

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>
  );
}