@fortawesome/free-solid-svg-icons#faSquare TypeScript Examples

constructor(faIconLibrary: FaIconLibrary) {
    faIconLibrary.addIcons(
      faGithub,
      faMediumM,
      faPlus,
      faEdit,
      faTrash,
      faTimes,
      faCaretUp,
      faCaretDown,
      faExclamationTriangle,
      faFilter,
      faTasks,
      faCheck,
      faSquare,
      faLanguage,
      faPaintBrush,
      faLightbulb,
      faWindowMaximize,
      faStream,
      faBook
    );
  }

export function EnemyEditor({ bsProps = { xs: 12, md: 6 } }: { bsProps?: object }) {
  const { data, character: { enemyOverride }, characterDispatch } = useContext(DataContext)
  const defaultVal = 10

  const eLvl = enemyOverride.enemyLevel ?? data.get(input.lvl).value
  const eDefRed = enemyOverride.enemyDefIgn_ ?? 0
  const eDefIgn = enemyOverride.enemyDefRed_ ?? 0
  return <Grid container spacing={1}>
    <Grid item {...bsProps}>
      <Button fullWidth sx={{ height: "100%" }} size="small" component="a" color="warning" href="https://genshin-impact.fandom.com/wiki/Resistance#Base_Enemy_Resistances" target="_blank" rel="noreferrer">
        To get the specific resistance values of enemies, please visit the wiki.
      </Button>
    </Grid>
    <Grid item {...bsProps}>
      <StatInput
        sx={{ bgcolor: t => t.palette.contentLight.main, width: "100%" }}
        name={<b>{KeyMap.get("enemyLevel")}</b>}
        value={eLvl}
        placeholder={KeyMap.getStr("enemyLevel")}
        defaultValue={data.get(input.lvl).value}
        onValueChange={value => characterDispatch({ type: "enemyOverride", statKey: "enemyLevel", value })}
        onReset={() => characterDispatch({ type: "enemyOverride", statKey: "enemyLevel", value: undefined })}
      />
    </Grid>
    {allElementsWithPhy.map(eleKey => {
      const statKey = `${eleKey}_enemyRes_`
      const val = enemyOverride[statKey]
      const elementImmunity = val === Number.MAX_VALUE
      return <Grid item key={eleKey} {...bsProps}>
        <StatInput
          sx={{ bgcolor: t => t.palette.contentLight.main, width: "100%" }}
          name={<ColorText color={eleKey}><b>{KeyMap.get(statKey)}</b></ColorText>}
          value={val ? (elementImmunity ? Infinity : val) : 10}
          placeholder={elementImmunity ? "Immune " : KeyMap.getStr(statKey)}
          defaultValue={defaultVal}
          onValueChange={value => characterDispatch({ type: "enemyOverride", statKey, value })}
          disabled={elementImmunity}
          percent
        >
          <Button color={eleKey} onClick={() => characterDispatch({ type: "enemyOverride", statKey, value: elementImmunity ? defaultVal : Number.MAX_VALUE })} >
            <FontAwesomeIcon icon={elementImmunity ? faCheckSquare : faSquare} className="fa-fw" /> Immunity
          </Button>
        </StatInput>
      </Grid>
    })}
    <Grid item {...bsProps}>
      <StatInput
        sx={{ bgcolor: t => t.palette.contentLight.main, width: "100%" }}
        name={<b>{KeyMap.get("enemyDefIgn_")}</b>}
        value={eDefRed}
        placeholder={KeyMap.getStr("enemyDefIgn_")}
        defaultValue={0}
        onValueChange={value => characterDispatch({ type: "enemyOverride", statKey: "enemyDefIgn_", value })}
        percent
      />
    </Grid>
    <Grid item {...bsProps}>
      <StatInput
        sx={{ bgcolor: t => t.palette.contentLight.main, width: "100%" }}
        name={<b>{KeyMap.get("enemyDefRed_")}</b>}
        value={eDefIgn}
        placeholder={KeyMap.getStr("enemyDefRed_")}
        defaultValue={0}
        onValueChange={value => characterDispatch({ type: "enemyOverride", statKey: "enemyDefRed_", value })}
        percent
      />
    </Grid>
    <Grid item xs={12}>
      <small>Note: Genshin Impact halves resistance shred values below 0%. For the sake of calculations enter the RAW value and GO will do the rest. (e.g. 10% - 20% = -10%)</small>
    </Grid>
  </Grid>
}

ComponentFoldConfig = [
  {
    type: TYPES.SHAPE,
    children: [
      {
        name: COMPONENT_TYPES.SHAPE.RECT,
        icon: faSquare
      },
      {
        name: COMPONENT_TYPES.SHAPE.CIRCLE,
        icon: faCircle
      }
    ]
  },
  {
    type: TYPES.WIDGET,
    children: [
      {
        name: COMPONENT_TYPES.WIDGET.PC_WIDGET,
        icon: faWindowMaximize
      },
      {
        name: COMPONENT_TYPES.WIDGET.MOBILE_WIDGET,
        icon: faMobile
      }
    ]
  },
  {
    type: '',
    children: []
  },
  {
    type: TYPES.BUTTON,
    children: [
      {
        name: COMPONENT_TYPES.BUTTON.CUSTOM_BUTTON,
        icon: faCube
      }
    ]
  },
  {
    type: TYPES.INPUT,
    children: [
      {
        name: COMPONENT_TYPES.INPUT.CUSTOM_INPUT,
        icon: faEdit
      }
    ]
  },
  {
    type: TYPES.TEXT,
    children: [
      {
        name: COMPONENT_TYPES.TEXT.LABEL,
        icon: faPen
      },
      {
        name: COMPONENT_TYPES.TEXT.CUSTOM_TEXT,
        icon: faTag
      }
    ]
  },
  {
    type: TYPES.IMAGE,
    children: [
      {
        name: COMPONENT_TYPES.IMAGE.CUSTOM_IMAGE,
        icon: faImage
      }
    ]
  }
]

RoomPage = () => {
  const [numParticipants, setNumParticipants] = useState(0);
  const [displayOptions, setDisplayOptions] = useState<DisplayOptions>({
    stageLayout: 'grid',
    showStats: false,
  });
  const navigate = useNavigate();
  const query = new URLSearchParams(useLocation().search);
  const url = query.get('url');
  const token = query.get('token');
  const recorder = query.get('recorder');

  if (!url || !token) {
    return <div>url and token are required</div>;
  }

  const onLeave = () => {
    navigate('/');
  };

  const updateParticipantSize = (room: Room) => {
    setNumParticipants(room.participants.size + 1);
  };

  const onParticipantDisconnected = (room: Room) => {
    updateParticipantSize(room);

    /* Special rule for recorder */
    if (recorder && parseInt(recorder, 10) === 1 && room.participants.size === 0) {
      console.log('END_RECORDING');
    }
  };

  const updateOptions = (options: DisplayOptions) => {
    setDisplayOptions({
      ...displayOptions,
      ...options,
    });
  };

  return (
    <DisplayContext.Provider value={displayOptions}>
      <div className="roomContainer">
        <div className="topBar">
          <h2>LiveKit Video</h2>
          <div className="right">
            <div>
              <input
                id="showStats"
                type="checkbox"
                onChange={(e) => updateOptions({ showStats: e.target.checked })}
              />
              <label htmlFor="showStats">Show Stats</label>
            </div>
            <div>
              <button
                className="iconButton"
                disabled={displayOptions.stageLayout === 'grid'}
                onClick={() => {
                  updateOptions({ stageLayout: 'grid' });
                }}
              >
                <FontAwesomeIcon height={32} icon={faThLarge} />
              </button>
              <button
                className="iconButton"
                disabled={displayOptions.stageLayout === 'speaker'}
                onClick={() => {
                  updateOptions({ stageLayout: 'speaker' });
                }}
              >
                <FontAwesomeIcon height={32} icon={faSquare} />
              </button>
            </div>
            <div className="participantCount">
              <FontAwesomeIcon icon={faUserFriends} />
              <span>{numParticipants}</span>
            </div>
          </div>
        </div>
        <LiveKitRoom
          url={url}
          token={token}
          onConnected={(room) => {
            setLogLevel('debug');
            onConnected(room, query);
            room.on(RoomEvent.ParticipantConnected, () => updateParticipantSize(room));
            room.on(RoomEvent.ParticipantDisconnected, () => onParticipantDisconnected(room));
            updateParticipantSize(room);
          }}
          roomOptions={{
            adaptiveStream: isSet(query, 'adaptiveStream'),
            dynacast: isSet(query, 'dynacast'),
            videoCaptureDefaults: {
              resolution: VideoPresets.h720.resolution,
            },
          }}
          onLeave={onLeave}
        />
      </div>
    </DisplayContext.Provider>
  );
}