react-icons/fa#FaTimes JavaScript Examples

Icon = ({ name }) => {
    switch (name) {
        case "circle":
            return <FaRegCircle className="icons" />;
        case "cross":
            return <FaTimes className="icons" />;
        default:
            return <FaPen className="icons" />;
    }
}

Task = ({ task, delTask, toggleReminder }) => {
  return (
    <div
      className={`task ${task.reminder ? "reminder" : ""}`}
      onDoubleClick={() => toggleReminder(task.id)}
    >
      <h3>
        {task.text}{" "}
        <FaTimes
          onClick={() => delTask(task.id)}
          style={{ color: "red", cursor: "pointer" }}
        />{" "}
      </h3>
      <p>{task.day}</p>
    </div>
  );
}

Details = ({ click, card }) => {
  return (
    <div className={classes.outer} onClick={click}>
      <div className={classes.container}>
        <FaTimes className={classes.closeBtn} />
        <img
          alt="logo"
          className={classes.event_logo}
          src={card.imageUrl}
        ></img>
        <h1 style={{ textAlign: "center" }} className={classes.event_name}>
          {card.title}
        </h1>

        <div className={classes.list}>
          <ul>
            <li>
              Imagine Cup is an annual competition sponsored and hosted by
              Microsoft Corp. which brings together student developers worldwide
              to help resolve some of the world's toughest challenges.
            </li>
            <li>Registration + Submission Deadline : Now – January 2021</li>
            <li>World Finals : March 2021</li>
            <li>
              Why you should enter ? The 19th annual Imagine Cup is more than
              just a competition for students—you can work with friends (and
              make new ones!), network with professionals, gain new skills, make
              a difference in the world, and have the chance to win great
              prizes.
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
}

ShowPost = ({ post, close }) => {
  return (
    <div className={classes.ShowPost}>
      <div className={classes.backdrop} onClick={close}></div>
      <div className={classes.post}>
        <FaTimes className={classes.closeBtn} onClick={close} />
        <div className={classes.image}>
          <img src={post.photoUrl} alt="post" />
        </div>
        <div className={classes.detail}>
          <div className={classes.user}>
            <img
              height="40"
              width="40"
              src="https://avatars2.githubusercontent.com/u/52067783?s=460&u=212f06bdac348e4ac59204857029ed7d27a2466b&v=4"
              alt="dp"
            />
            <span>{post.user}</span>
          </div>
          <div className={classes.comments}>Comments</div>
          <div className={classes.actions}>
            <div className="left">
              <BsHeart className="heart" />
              <BsChat className="comment" style={{ margin: "0 0.3rem" }} />
              <FaRegPaperPlane className="send" />
            </div>
            <FaRegBookmark className="bookmark" />
          </div>
          <p style={{ marginLeft: "1rem" }}> {post.likes} Likes </p>
          <div className={classes.addComment}>
            <input type="text" placeholder="Add comment" />
            <button>send</button>
          </div>
        </div>
      </div>
    </div>
  );
}

Sidebar = ({ isOpen, toggleSidebar }) => {
  return (
    <aside className={`sidebar ${isOpen ? "show-sidebar" : ""}`}>
      <button
        aria-label="Close Button"
        className="close-btn"
        onClick={toggleSidebar}
      >
        <FaTimes />
      </button>
      <div className="side-container">
        <Links
          aria-label="Sidebar Links"
          styleClass={`${isOpen ? "sidebar-links" : ""}`}
        />
        <SocialLinks
          aria-label="Social Links"
          styleClass={`${isOpen ? "sidebar-icons" : ""}`}
        />
      </div>
    </aside>
  );
}

Sidebar = ({ isOpen, toggleSidebar }) => {
  return (
    <aside className={`sidebar ${isOpen ? "show-sidebar" : ""} `}>
      <button className="close-btn" onClick={toggleSidebar}>
        <FaTimes />
      </button>
      <div className="side-container">
        <Links styleClass={`${isOpen ? "sidebar-links" : ""}`} />
        <SocialLinks styleClass={`${isOpen ? "sidebar-icons" : ""}`} />
      </div>
    </aside>
  )
}

render() {
    if (!this.state.visible) return null;

    const bare = this.props.bare;

    const mods = {
      fullscreen: !!this.props.fullscreen,
      bare: this.props.bare,
      visible: this.props.visible || this.state.visible,
    };

    const mixes = [
      this.transitionClass,
      this.props.className,
    ];

    const modalContent = (
      <Block name="modal" ref={this.modalRef} mod={mods} mix={mixes} onClick={this.onClickOutside}>
        <Elem name="wrapper">
          <Elem name="content" style={this.props.style}>
            {!bare && (
              <Modal.Header>
                <Elem name="title">{this.state.title}</Elem>
                {this.props.allowClose !== false  && (
                  <Elem tag={Button} name="close" type="text" icon={<Icon size="18" color="#0099FF" icon={FaTimes}/>}/>
                )}
              </Modal.Header>
            )}
            <Elem name="body" mod={{ bare }}>
              {this.body}
            </Elem>
            {this.state.footer && (
              <Modal.Footer>
                {this.state.footer}
              </Modal.Footer>
            )}
          </Elem>
        </Elem>
      </Block>
    );

    return createPortal(modalContent, document.body);
  }

function Overlay({ children, isOpen, setIsOpen }) {
  function closeOnEscapeKey(event) {
    if (event.keyCode === 27 && isOpen) {
      setIsOpen(false)
    }
  }

  useEffect(() => {
    window.addEventListener("keydown", closeOnEscapeKey)
    return () => {
      window.removeEventListener("keydown", closeOnEscapeKey)
    }
  })

  useEffect(() => {
    document
      .querySelectorAll("body, html")
      .forEach(e => e.classList[isOpen ? "add" : "remove"]("overflow-hidden"))
  }, [isOpen])

  return (
    <motion.div
      animate={isOpen ? "open" : "closed"}
      className="fixed z-50 block bg-gray-900 text-white"
      initial="closed"
      variants={backgroundVariants}
    >
      <div className="flex flex-col h-full max-h-full">
        <div className="fixed top-0 right-0 mt-4 mr-4">
          <motion.button
            initial="closed"
            animate={isOpen ? "open" : "closed"}
            variants={closeButtonVariants}
            className="text-white focus:outline-none select-none highlight-none"
            onClick={() => setIsOpen(false)}
          >
            <FaTimes className="h-8 w-auto fill-current" />
          </motion.button>
        </div>
        <motion.div
          className="flex flex-grow overflow-hidden"
          animate={isOpen ? "open" : "closed"}
          variants={childrenVariants}
        >
          {children}
        </motion.div>
      </div>
    </motion.div>
  )
}

render() {
    return (
      <div style={styles.mainContainer}>
        <div style={styles.actionContainer}>
          <FaPlus
            onClick={() => {
              this.props.addRow(this.props.noteBarNoteIndex);
            }}
          />
        </div>
        <div style={styles.actionContainer}>
          <FaMinus
            onClick={() => {
              this.props.removeRow(this.props.noteBarNoteIndex);
            }}
          />
        </div>
        <div style={styles.actionContainer}>
          <FaPaste
            onClick={() => {
              this.props.pasteSelection(this.props.noteBarNoteIndex);
              this.props.hideNoteBar();
            }}
          />
        </div>
        <div style={styles.actionContainer}>
          <FaStopwatch
            onClick={() => {
              this.props.noteTempoChange();
              this.props.hideNoteBar();
            }}
          />
        </div>
        <div style={styles.actionContainer}>
          <FaPlay
            onClick={() => {
              this.props.playFromNote(this.props.noteBarNoteIndex);
              this.props.hideNoteBar();
            }}
            color="blue"
          />
        </div>
        <div style={styles.actionContainer}>
          <FaTimes
            onClick={() => {
              this.props.hideNoteBar();
            }}
          />
        </div>
      </div>
    );
  }

render() {
    return (
      <div style={styles.container}>
        <div style={styles.tineContainer}>
          <div style={{ marginRight: 3 }}>
            <input
              onChange={(e) => {
                this.setState({ newNoteLeft: e.target.value });
              }}
              value={this.state.newNoteLeft}
              style={{ width: 40, height: 40 }}
            />
            <div
              onClick={() => {
                this.props.addNote(this.state.newNoteLeft, true);
              }}
            >
              <FaPlus style={{ cursor: "pointer" }} />
            </div>
          </div>
          {this.props.notes.map((note, index) => (
            <div
              style={{
                ...styles.tine,
                flex: this.props.notes.length,
                height:
                  150 +
                  Math.ceil(this.props.notes.length / 2) -
                  1 -
                  Math.abs(Math.ceil(this.props.notes.length / 2) - 1 - index) *
                    10,
              }}
            >
              <div style={{ flex: 1 }}>
                <FaTimes
                  style={{ cursor: "pointer" }}
                  onClick={() => {
                    this.props.removeNote(note);
                  }}
                  color="black"
                />
              </div>
              <div style={{ height: 10, marginBottom: 20 }}>{note}</div>
            </div>
          ))}
          <div style={{ marginLeft: 3 }}>
            <input
              onChange={(e) => {
                this.setState({ newNoteRight: e.target.value });
              }}
              value={this.state.newNoteRight}
              style={{ width: 40, height: 40 }}
            />
            <div
              onClick={() => {
                this.props.addNote(this.state.newNoteRight, false);
              }}
            >
              <FaPlus style={{ cursor: "pointer" }} />
            </div>
          </div>
        </div>
      </div>
    );
  }

ICON_COMPONENTS = {
    mug: <GiCoffeeMug className="vertical-align" />,
    circle: <GrStatusGoodSmall className="small-icon" />,
    octocat: <FaGithubAlt className="vertical-align" />,
    times: <FaTimes className="vertical-align" />,
    home: <FaHome className="vertical-align" />,
}

CloseIcon = styled(FaTimes)`
  color: #fff;
  transition: all 0.3s ease-in-out;
  &:hover {
    color: rgb(5, 5, 170);
  }
`

CloseIcon = styled(FaTimes)`
  font-size: 2rem;
  color: #fff;
  position: absolute;
  right: 2rem;
  top: 2rem;
  cursor: pointer;
`

DisplayStory = (props) => {
  /**
   * Fetch stories from redux store
   */

  const userId = +props.match.params.id;
  const userIndex = dummyStories.findIndex((story) => story.userId === userId);
  const user = dummyStories[userIndex];
  const [currentUser, setCurrentUser] = useState(user);
  const [index, setIndex] = useState(userIndex);
  console.log("re-render");
  const gotoNextUser = () => {
    setCurrentUser(dummyStories[index + 1]);
    setIndex((prevIndex) => prevIndex + 1);
    dummyStories[index + 1]
      ? props.history.push(
          `/story/${dummyStories[index + 1].author}/${
            dummyStories[index + 1].userId
          }`
        )
      : props.history.push("/dashboard");
  };

  return (
    <Fragment>
      {currentUser ? (
        <div className={classes.DisplayStory}>
          <Link to="/dashboard" className={classes.CloseBtn}>
            <FaTimes />
          </Link>
          <div className={classes.StoryContainer}>
            <Stories
              stories={currentUser.stories}
              height={"100%"}
              onAllStoriesEnd={gotoNextUser}
              currentIndex={0}
            />
          </div>
        </div>
      ) : (
        <Redirect to="/dashboard" />
      )}
    </Fragment>
  );
}

render() {
    const { inventory, currentItem, editingIndex } = this.state
    console.log('currentItem: ', currentItem)
    return (
      <div>
        <h2>Inventory</h2>
        {
          inventory.map((item, index) => {
            const isEditing = editingIndex === index
            if (isEditing) {
              return (
                <div className="border-b py-10" key={item.id}>
                  <div className="flex items-center">
                    <Link to={slugify(item.name)}>
                      <Image className="w-32 m-0" src={item.image} alt={item.name} />
                    </Link>
                    <input
                      onChange={(e) => this.onChange(e, index)}
                      className="ml-8 shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                      value={currentItem.name}
                      placeholder="Item name"
                      name="name"
                    />
                    <div className="flex flex-1 justify-end items-center">
                      <p className="m-0 text-sm mr-2">In stock:</p>
                      <input
                        onChange={this.onChange}
                        className="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                        value={currentItem.currentInventory}
                        name="currentInventory"
                        placeholder="Item inventory"
                      />
                      <input
                        onChange={this.onChange}
                        className="ml-16 shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                        value={currentItem.price}
                        name="price"
                        placeholder="Item price"
                      />
                    </div>
                    <div role="button" onClick={() => this.saveItem(index)} className="m-0 ml-10 text-gray-900 text-s cursor-pointer">
                      <p className="text-sm ml-10 m-0">Save</p>
                    </div>
                  </div>
                </div>
              )
            }
            return (
              <div className="border-b py-10" key={item.id}>
                <div className="flex items-center">
                  <Link to={slugify(item.name)}>
                    <Image className="w-32 m-0" src={item.image} alt={item.name} />
                  </Link>
                  <Link to={slugify(item.name)}>
                    <p className="m-0 pl-10 text-gray-600 text-sm">
                      {item.name}
                    </p>
                  </Link>
                  <div className="flex flex-1 justify-end">
                    <p className="m-0 pl-10 text-gray-900 tracking-tighter text-sm">In stock: {item.currentInventory}</p>
                    <p className="m-0 pl-20 text-gray-900 tracking-tighter font-semibold">
                      {DENOMINATION + item.price}
                    </p>
                  </div>
                  <div className="flex items-center m-0 ml-10 text-gray-900 text-s cursor-pointer">
                    <FaTimes onClick={() => this.deleteItem(index)} />
                    <p role="button" onClick={() => this.editItem(item, index)} className="text-sm ml-10 m-0">Edit</p>
                  </div>
                </div>
              </div>
            )
          })
        }
      </div>
    )
  }

Cart = ({ context }) => {
  const { numberOfItemsInCart, cart, removeFromCart, total } = context
  const cartEmpty = numberOfItemsInCart === Number(0)
  return (
    <>
      <CartLink />
      <div className="flex flex-col items-center pb-10">
        <div className="
          flex flex-col w-full
          c_large:w-c_large
        ">
          <div className="pt-10 pb-8">
            <h1 className="text-5xl font-light">Your Cart</h1>
          </div>

          {
            cartEmpty ? (
              <h3>No items in cart.</h3>
            ) : (
              <div className="flex flex-col">
                <div className="">
                  {
                    cart.map((item) => {
                      return (
                        <div className="border-b py-10" key={item.id}>
                          <div className="flex items-center">
                            <Link to={slugify(item.name)}>
                              <Image className="w-32 m-0" src={item.image} alt={item.name} />
                            </Link>
                            <Link to={slugify(item.name)}>
                              <p className="m-0 pl-10 text-gray-600 text-sm">
                                {item.name}
                              </p>
                            </Link>
                            <div className="flex flex-1 justify-end">
                              <p className="m-0 pl-10 text-gray-900 tracking-tighter font-semibold">
                                {DENOMINATION + item.price}
                              </p>
                            </div>
                            <div role="button" onClick={() => removeFromCart(item)} className="m-0 ml-10 text-gray-900 text-s cursor-pointer">
                              <FaTimes />
                            </div>
                          </div>
                        </div>
                      )
                    })
                  }
                </div>  
            </div>
            )
          }
          <div className="flex flex-1 justify-end py-8">
            <p className="text-sm pr-10">Total</p>
            <p className="font-semibold tracking-tighter">{DENOMINATION + total}</p>
          </div>
          {!cartEmpty && (
            <Link to="/checkout" className="flex flex-1 justify-end">
              <div className="cursor-pointer flex">
                <p className="text-gray-600 text-sm mr-2">Proceed to check out</p>
                <FaLongArrowAltRight className="text-gray-600 mt-1" />
              </div>
            </Link>
          )}
        </div>
      </div>
    </>
  )
}

export function Dialog({
  isVisible,
  body,
  onClose,
  title,
  noPadding,
  backgroundColor,
  positionTop,
  style,
}) {
  if (!isVisible) {
    return null;
  }

  const styles = {
    header: {
      backgroundColor: primary45,
      color: '#FFF',
      padding: 8,
      fontSize: 14,
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
    },
    body: {
      padding: noPadding ? 0 : 14,
      backgroundColor: backgroundColor ? backgroundColor : '#FFF',
    },
    xIcon: {
      cursor: 'pointer',
    },
  };

  return (
    <Modal onClose={onClose} isVisible={isVisible} positionTop={positionTop} style={style}>
      <div style={styles.container}>
        <div style={styles.header}>
          <div>{title}</div>
          <FaTimes
            color={'#FFF'}
            size={16}
            style={styles.xIcon}
            className={'dialogClose'}
            onClick={onClose}
          />
        </div>
        <div style={styles.body}>{body}</div>
      </div>
    </Modal>
  );
}

function RowLibMes({libMensual, index, handlerInputChange, handleClickDeleteLibMes}) {
    return (<tr>
        <td>{
            index + 1
        }</td>
        <td> {
            libMensual.anio
        }</td>
        <td>
            <CButtonGroup>
                <CButton color="info" size="sm"> {
                    libMensual.mes
                }</CButton>
                <CButton color="danger"
                    onClick={
                        () => handleClickDeleteLibMes(libMensual)
                }>
                    <FaTimes/>
                </CButton>
            </CButtonGroup>

        </td>
        <td>
            <CPopover header="Diezmos semanales" content="Todo">
                <input type="number" min={0} className="form-control"
                    onChange={
                        (e) => handlerInputChange(e, libMensual, 'diezmos')
                    }
                    value={
                        libMensual.diezmos
                    }/>
            </CPopover>
        </td>
        <td>
            <CPopover header="Ofrendas semanales" content="Todo">
                <input type="number" min={0} className="form-control"
                    onChange={
                        (e) => handlerInputChange(e, libMensual, 'ofrendas')
                    }
                    value={
                        libMensual.ofrendas
                    }/>
            </CPopover>
        </td>
        <td>
            <CPopover header="Ofrendas especiales semanales" content="Todo">
                <input type="number" min={0} className="form-control"
                    onChange={
                        (e) => handlerInputChange(e, libMensual, 'especiales')
                    }
                    value={
                        libMensual.especiales
                    }/>
            </CPopover>
        </td>
    </tr>)
}

render() {
    return (
      <div style={styles.container}>
        <div style={styles.modal}>
          <div style={styles.closeContainer}>
            <FaTimes
              onClick={() => {
                this.props.hide();
              }}
            />
          </div>
          <div
            style={{
              flex: 1,
              padding: 10,
              display: "flex",
              flexDirection: "column",
            }}
          >
            <div style={{ fontSize: 35, fontWeight: "bold" }}>New Song</div>
            <div style={styles.parameters}>
              <div style={styles.input}>
                <div style={{ width: 100 }}>Title</div>
                <input
                  placeholder="Untitled"
                  style={{ flex: 1 }}
                  onChange={(e) => {
                    this.setState({ title: e.target.value });
                  }}
                ></input>
              </div>
              <div style={styles.input}>
                <div style={{ width: 100 }}>Tempo</div>
                <input
                  placeholder="145"
                  style={{ width: "20%" }}
                  onChange={(e) => {
                    this.setState({ tempo: e.target.value });
                  }}
                  type="number"
                  min="0"
                  max="500"
                ></input>
              </div>
              <div style={styles.kalimbaChooser}>
                <KalimbaChooser
                  notes={this.state.notes}
                  removeNote={(note) => {
                    this.removeNote(note);
                  }}
                  addNote={(note, left) => {
                    this.addNote(note, left);
                  }}
                />
              </div>
            </div>
          </div>
          <div style={styles.bottomButtons}>
            <div style={styles.errorMessage}>
              {this.state.errorMessages.map((msg) => (
                <div>{msg}</div>
              ))}
            </div>
            <div style={{ display: "flex" }}>
              <div
                style={{ ...styles.button, backgroundColor: "#60a1fc" }}
                onClick={() => {
                  if (!this.checkInputs()) {
                    return;
                  }
                  this.props.openNewSongFromParameters({ ...this.state });
                  this.props.onCreate();
                }}
              >
                Create
              </div>
              <div
                style={{ ...styles.button, backgroundColor: "lightgrey" }}
                onClick={() => {
                  this.props.hide();
                }}
              >
                Cancel
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

export function LeftPanel({
  setCurrentRightPanel,
  currentRightPanel,
  isDownload,
}) {
  const isSmallScreen = useIsSmallScreen();
  const [isMobileOpen, setIsMobileOpen] = useState(false);

  const styles = {
    container: {
      position: 'relative',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'space-between',
      backgroundColor: primary45,
      color: '#FFF',
      padding: `${isSmallScreen ? 8 : 20}px 10px 0px 10px`,
      minWidth: 200,
      fontFamily: 'Open Sans',
      paddingBottom: 0,
    },
    logo: {
      display: 'inline-block',
      fontFamily: 'MuseoModerno',
      color: '#FFF',
      fontSize: 24,
      fontWeight: 400,
      marginBottom: isSmallScreen && !isMobileOpen ? 8 : 20,
      textAlign: 'center',
      justifyContent: 'center',
      alignItems: 'center',
      userSelect: 'none',
      cursor: 'pointer',
      lineHeight: '24px',
    },
    settingsBlock: {
      bottom: 0,
      width: '100%',
    },
    mobilePadding: {
      paddingBottom: 6,
    },
    menuIcon: {
      position: 'absolute',
      top: isSmallScreen ? 16 : 25,
      left: 14,
    },
    logoContainer: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    },
    footer: {
      textAlign: 'center',
      marginBottom: 8,
      fontSize: 13,
      lineHeight: '14px',
      fontFamily: 'Open Sans',
    },
    iconGithub: {
      cursor: 'pointer',
    },
    githubTxt: {
      fontSize: 10,
      userSelect: 'none',
    },
    icon: {
      position: 'relative',
      top: 6,
      width: 30,
    },
    logoTitle: {
      display: 'inline-flex',
    },
  };

  let iconComponent = FaBars;
  if (isMobileOpen) {
    iconComponent = FaTimes;
  }

  const IconComponent = iconComponent;

  return (
    <div style={styles.container}>
      {isSmallScreen ? (
        <IconComponent
          color={'#FFF'}
          size={24}
          style={styles.menuIcon}
          onClick={() => {
            setIsMobileOpen(!isMobileOpen);
          }}
        />
      ) : null}
      <div>
        <div style={styles.logoContainer}>
          <div
            style={styles.logo}
            onClick={() => {
              document.location = `${
                window.location.origin + window.location.pathname
              }`;
            }}>
            <img src={logo} style={styles.icon} />
            <div style={styles.logoTitle}>Sailplane</div>
          </div>
        </div>
        {(isMobileOpen || !isSmallScreen) && !isDownload ? (
          <>
            <PanelItem
              title={'Files'}
              iconComponent={FaFolderOpen}
              selected={currentRightPanel === 'files'}
              onClick={() => {
                setIsMobileOpen(false);
                setCurrentRightPanel('files');
              }}
            />
            <PanelItem
              title={'Drives'}
              iconComponent={FaServer}
              selected={currentRightPanel === 'instances'}
              onClick={() => {
                setIsMobileOpen(false);
                setCurrentRightPanel('instances');
              }}
            />
            <PanelItem
              title={'Contacts'}
              iconComponent={FaAddressBook}
              selected={currentRightPanel === 'contacts'}
              onClick={() => {
                setIsMobileOpen(false);
                setCurrentRightPanel('contacts');
              }}
            />

            {/*<div style={styles.settingsBlock}>*/}
            {/*  <PanelItem*/}
            {/*    title={'Settings'}*/}
            {/*    selected={currentRightPanel === 'settings'}*/}
            {/*    onClick={() => setCurrentRightPanel('settings')}*/}
            {/*    iconComponent={FaCog}*/}
            {/*  />*/}
            {/*</div>*/}
          </>
        ) : (
          <div style={styles.mobilePadding} />
        )}
        {isDownload ? (
          <>
            <div style={styles.settingsBlock}>
              <PanelItem
                title={'Home'}
                onClick={() =>
                  (document.location =
                    'https://cypsela.github.io/sailplane-web/#/')
                }
                iconComponent={FaHome}
              />
            </div>
            <div style={styles.settingsBlock}>
              <PanelItem
                title={'Downloads'}
                onClick={() => {}}
                iconComponent={FaDownload}
                selected={true}
              />
            </div>
          </>
        ) : null}
      </div>
      {!isSmallScreen ? (
        <div style={styles.footer}>
          <a
            href={'https://github.com/cypsela/sailplane-web'}
            target={'_blank'}
            rel={'noopener'}>
            <FaGithub color={primary15} size={20} style={styles.iconGithub} />
          </a>
          <div style={styles.githubTxt}>Source</div>
        </div>
      ) : null}
    </div>
  );
}

Cart = ({ context }) => {
  const {
    numberOfItemsInCart, cart, removeFromCart, total, setItemQuantity
  } = context
  const cartEmpty = numberOfItemsInCart === Number(0)

  function increment(item) {
    item.quantity = item.quantity + 1
    setItemQuantity(item)
  }

  function decrement(item) {
    if (item.quantity === 1) return
    item.quantity = item.quantity - 1
    setItemQuantity(item)
  }

  return (
    <>
      <CartLink />
      <div className="flex flex-col items-center pb-10">
        <div className="
          flex flex-col w-full
          c_large:w-c_large
        ">
          <div className="pt-10 pb-8">
            <h1 className="text-5xl font-light">Your Cart</h1>
          </div>

          {
            cartEmpty ? (
              <h3>No items in cart.</h3>
            ) : (
              <div className="flex flex-col">
                <div className="">
                  {
                    cart.map((item) => {
                      return (
                        <div className="border-b py-10" key={item.id}>

                          { /* Responsive - Desktop */}
                          <div className="flex items-center hidden md:flex">
                            <Link to={slugify(item.name)}>
                              <Image className="w-32 m-0" src={item.image} alt={item.name} />
                            </Link>
                            <Link to={slugify(item.name)}>
                              <p className="
                              m-0 pl-10 text-gray-600 text-sm w-56
                              ">
                                {item.name}
                              </p>
                            </Link>
                            <div className="ml-4">
                              <QuantityPicker
                                numberOfitems={item.quantity}
                                increment={() => increment(item)}
                                decrement={() => decrement(item)}
                              />
                            </div>
                            <div className="flex flex-1 justify-end">
                              <p className="m-0 pl-10 text-gray-900 tracking-tighter font-semibold">
                                {DENOMINATION + item.price}
                              </p>
                            </div>
                            <div role="button" onClick={() => removeFromCart(item)} className="
                            m-0 ml-10 text-gray-900 text-s cursor-pointer
                            ">
                              <FaTimes />
                            </div>
                          </div>

                          { /* Responsive - Mobile */}
                          <div className="flex items-center flex md:hidden">
                            <Link to={slugify(item.name)}>
                              <Image className="w-32 m-0" src={item.image} alt={item.name} />
                            </Link>
                            <div>
                              <Link to={slugify(item.name)}>
                                <p className="
                                m-0 pl-6 text-gray-600 text-base
                                ">
                                  {item.name}
                                </p>
                              </Link>
                              <div className="ml-6 mt-4 mb-2">
                                <QuantityPicker
                                  hideQuantityLabel
                                  numberOfitems={item.quantity}
                                  increment={() => increment(item)}
                                  decrement={() => decrement(item)}
                                />
                              </div>
                              <div className="flex flex-1">
                                <p className="text-lg m-0 pl-6 pt-4 text-gray-900 tracking-tighter font-semibold">
                                  {DENOMINATION + item.price}
                                </p>
                              </div>
                            </div>
                            <div role="button" onClick={() => removeFromCart(item)} className="
                            m-0 ml-10 text-gray-900 text-s cursor-pointer mr-2
                            ">
                              <FaTimes />
                            </div>
                          </div>
                        </div>
                      )
                    })
                  }
                </div>  
            </div>
            )
          }
          <div className="flex flex-1 justify-end py-8">
            <p className="text-sm pr-10">Total</p>
            <p className="font-semibold tracking-tighter">{DENOMINATION + total}</p>
          </div>
          {!cartEmpty && (
            <Link to="/checkout" className="flex flex-1 justify-end">
              <div className="cursor-pointer flex">
                <p className="text-gray-600 text-sm mr-2">Proceed to check out</p>
                <FaLongArrowAltRight className="text-gray-600 mt-1" />
              </div>
            </Link>
          )}
        </div>
      </div>
    </>
  )
}

LayoutModal = ({ children, closeTo, navigation = {} }) => {
  const { current = -1, items = [] } = navigation
  const previous = items[current - 1] ? items[current - 1] : null
  const next = items[current + 1] ? items[current + 1] : null

  const closeModal = () => {
    navigate(closeTo, { state: { noScroll: true } })
  }

  const goPrevious = () => {
    if (!previous) {
      return
    }
    navigate(previous, {
      state: { navigation: { current: current - 1, items }, modal: true },
    })
  }

  const goNext = () => {
    if (!next) {
      return
    }
    navigate(next, {
      state: { navigation: { current: current + 1, items }, modal: true },
    })
  }

  const keyboardNavigation = (event) => {
    switch (event.keyCode) {
      case 37:
        goPrevious()
        break
      case 39:
        goNext()
        break
      case 27:
        closeModal()
        break
      default:
    }
  }

  useEffect(() => {
    window.addEventListener("keydown", keyboardNavigation)
    return () => {
      window.removeEventListener("keydown", keyboardNavigation)
    }
  })

  return (
    <div className="flex relative h-screen">
      <div className="flex flex-wrap items-end md:items-center justify-center mx-auto w-full max-w-screen-xl">
        <div className="order-3 md:order-first pb-2 w-8 mx-2 md:mx-4">
          {previous && (
            <Link
              asModal
              className="inline-block w-10 h-10 px-2 text-white dark:text-blue-300 hover:text-blue-400 dark:hover:text-blue-200"
              state={{ navigation: { current: current - 1, items } }}
              to={previous}
            >
              <FaAngleLeft className="w-full h-full fill-current transition-colors duration-200" />
            </Link>
          )}
        </div>
        <div className="w-full mt-12 md:mt-0 mx-3 md:mx-0 md:flex-1 bg-white dark:bg-gray-900 shadow-lg rounded-md overflow-hidden">
          {children}
        </div>
        <div className="order-last pb-2 w-8 mx-2 md:mx-4">
          {next && (
            <Link
              asModal
              className="inline-block w-10 h-10 px-2 text-white dark:text-blue-300 hover:text-blue-400 dark:hover:text-blue-200"
              state={{ navigation: { current: current + 1, items } }}
              to={next}
            >
              <FaAngleRight className="w-full h-full fill-current transition-colors duration-200" />
            </Link>
          )}
        </div>
      </div>
      <button
        className="absolute top-0 right-0 m-3 lg:m-6 focus:outline-none"
        onClick={closeModal}
      >
        <FaTimes className="w-8 h-8 fill-current text-white dark:text-blue-300 hover:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" />
      </button>
    </div>
  )
}