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

// Description: add icons to be used in the app as needed
// Some are solid and some are from regular svg (hollow icons)
library.add(
  faSearch,
  faSearchPlus,
  faHome,
  faSpinner,
  faExclamationTriangle,
  faTrash,
  faTrashAlt,
  faEdit,
  faUser,
  faUserEdit,
  faUserPlus,
  faUserTimes,
  faUserMinus,
  faKey,
  faCheck,
  faCheckCircle,
  faCalendarDay,
  faClock,
  faCalendarAlt,
  farUser,
  faFileAlt
);

render() {
    return(
      <div className="filterCardDiv">
        <form className="filterCardForm">
          <input type="checkbox" checked={this.props.restriction.isEnable} onChange={this.handleEnableChange}></input>
          <label>Attribute Name</label>
          {this.getAttributeNameSelectBlock()}
          <label>Operator</label>
          {this.getOperatorSelectBlock()}
          <label>Value</label>
          {this.getInputBlock()}
        </form>
        <button className="filterCardDeleteButton" type="button" onClick={() => this.props.deleteFilterCard(this.props.index)}><FontAwesomeIcon className="trashCard icon" icon={faTrashAlt} /></button>
      </div>
    )
  }

/**
   * Handle button rednering with disable feature for Insert Update or Delete based on the table type and return the buttons accordingly
   */
  getTableActionButtons() {
    let disableInsert: boolean = false;
    let disableUpdate: boolean = false;
    let disableDelete: boolean = false;

    if (this.props.selectedTableType === TableType.COMPUTED || this.props.selectedTableType === TableType.IMPORTED) {
      disableInsert = true;
      disableUpdate = true;
    }
    else if (this.props.selectedTableType === TableType.PART) {
      disableInsert = true;
      disableUpdate = true;
      disableDelete = true;
    }
    else if (this.checkIfTableHasNonNullableBlobs()) {
      disableUpdate = true;
    }

    return(
      <div className="content-controllers">
        <button onClick={() => this.setCurrentTableActionMenu(TableActionType.FILTER)} className={this.state.currentSelectedTableActionMenu === TableActionType.FILTER && !this.state.hideTableActionMenu ? 'selectedButton' : ''}><FontAwesomeIcon className="menuIcon filter" icon={faFilter} /><span>Filter</span></button>
        <button onClick={() => this.setCurrentTableActionMenu(TableActionType.INSERT)} className={this.state.currentSelectedTableActionMenu === TableActionType.INSERT && !this.state.hideTableActionMenu ? 'selectedButton' : ''} disabled={disableInsert}><FontAwesomeIcon className="menuIcon insert" icon={faPlusCircle} /><span>Insert</span></button>
        <button onClick={() => this.setCurrentTableActionMenu(TableActionType.UPDATE)} className={this.state.currentSelectedTableActionMenu === TableActionType.UPDATE && !this.state.hideTableActionMenu ? 'selectedButton' : ''} disabled={disableUpdate}><FontAwesomeIcon className="menuIcon update" icon={faEdit} /><span>Update</span></button>
        <button onClick={() => this.setCurrentTableActionMenu(TableActionType.DELETE)} className={this.state.currentSelectedTableActionMenu === TableActionType.DELETE && !this.state.hideTableActionMenu ? 'selectedButton' : ''} disabled={disableDelete}><FontAwesomeIcon className="menuIcon delete" icon={faTrashAlt} /><span>Delete</span></button>
      </div>
    )
  }

export default function SelectedSlideControl({
    slide,
    onDelete,
    onUpdateShouldRender,
    onUpdateShouldRenderWithCommonExcalidrawElements,
}: Props) {
    return (
        <div className="SelectedSlideControl">
            <div>
                <IconCheckbox
                    title="Skip"
                    checked={slide.shouldRender}
                    onChange={onUpdateShouldRender}
                    checkedIcon={faEye}
                    uncheckedIcon={faEyeSlash}
                />
                <IconCheckbox
                    title="Include common elements"
                    checked={slide.shouldRenderWithCommonExcalidrawElements}
                    onChange={onUpdateShouldRenderWithCommonExcalidrawElements}
                    checkedIcon={faShapes}
                    uncheckedIcon={faCircle}
                />
            </div>
            <div>
                <IconButton
                    title="Delete slide"
                    icon={faTrashAlt}
                    onClick={() =>
                        window.confirm("Delete the selected slide?") &&
                        onDelete()
                    }
                />
            </div>
        </div>
    );
}

export function StatFilterItem({ statKey, statKeys = [], value = 0, close, setFilter, disabled = false }: {
  statKey?: string, statKeys: string[], value?: number, close?: () => void, setFilter: (statKey: string, value?: number) => void, disabled?: boolean
}) {
  const isFloat = KeyMap.unit(statKey) === "%"
  const onChange = useCallback(s => statKey && setFilter(statKey, s), [setFilter, statKey])
  return <ButtonGroup sx={{ width: "100%" }}>
    <DropdownButton
      title={statKey ? KeyMap.get(statKey) : "New Stat"}
      disabled={disabled}
      color={statKey ? "success" : "secondary"}
    >
      {statKeys.map(sKey => <MenuItem key={sKey} onClick={() => { close?.(); setFilter(sKey, value) }}>{KeyMap.get(sKey)}</MenuItem>)}
    </DropdownButton>
    <CustomNumberInputButtonGroupWrapper sx={{ flexBasis: 30, flexGrow: 1 }}>
      <CustomNumberInput
        disabled={!statKey}
        float={isFloat}
        value={value}
        placeholder="Min Value"
        onChange={onChange}
        sx={{ px: 2 }}
      />
    </CustomNumberInputButtonGroupWrapper>
    {!!close && <Button color="error" onClick={close} disabled={disabled}><FontAwesomeIcon icon={faTrashAlt} /></Button>}
  </ButtonGroup>
}

VerticesParams: FunctionComponent<Props> = ({ params }) => {
	const { editor: { vertexSelection } } = useStore();

	return (
		<div>
			{params.vertices
				.map((vertex, i) => ({ vertex, i }))
				.filter(({ vertex }) => vertexSelection.has(vertex.id))
				.map(({ vertex, i }) => (
					<DangerButton key={vertex.id} onClick={() => vertex.remove()}>
						<FontAwesomeIcon icon={faTrashAlt}/>
						&#32;
						Delete vertex #{i + 1} ({vertex.x},&nbsp;{vertex.y})
					</DangerButton>
				))}
		</div>
	);
}

RemoveButton: React.FC<RemoveButtonProps> = (props) => {
    const className = "btn btn-danger " + (props.size ? ` btn-${props.size}` : "");
    const disabledMessage = props.disabled && DisabledMessage;
    return (
        <button onClick={() => props.onRemove()} disabled={props.disabled} className={className} aria-label={props.screenReaderLabel}>
            <FontAwesomeIcon icon={faTrashAlt} />
            {props.children}
            {disabledMessage}
        </button>
    );
}

faTrashAlt = faTrashAlt;

EditComment = (props: {
  instruction: Instruction;
  onChange: Function;
  onDelete: Function;
  dismiss: Function;
}) => {
  const [text, setText] = useState(props.instruction.text);
  const [showInput, setShowInput] = useState(false);

  function save() {
    props.onChange(props.instruction.id, {
      id: props.instruction.id,
      text: text,
      lenth: props.instruction.length,
      time: props.instruction.time,
    });
  }
  return (
    <div className={styles.container}>
      <div className={styles.box}>
        <textarea
          name="comment"
          value={text}
          placeholder="Enter message"
          className={styles.textArea}
          onChange={(e) => setText(e.target.value)}
          onBlur={() => setShowInput(!showInput)}
        />
        <div className={styles.cta}>
          <button
            className={styles.btnPrimary}
            type="button"
            onClick={() => save()}
          >
            Save
          </button>
          <button
            className={styles.btnSecondary}            
            type="button"
            onClick={() => props.dismiss()}
          >
            Dismiss
          </button>
          <button            
            className={styles.btnIcon}
            type="button"
            onClick={() => props.onDelete(props.instruction.id)}
          >
            <FontAwesomeIcon
              icon={faTrashAlt}
              className="delete"
            />
          </button>
        </div>
      </div>
    </div>
  );
}

deleteIcon = faTrashAlt as IconProp;

export default function DownloadCard() {
  const { database, setDatabase } = useContext(DatabaseContext)
  const { t } = useTranslation(["settings"]);
  const numChar = database._getCharKeys().length
  const numArt = database._getArts().length
  const numWeapon = database._getWeapons().length
  const downloadValid = Boolean(numChar || numArt)
  const deleteDB = useCallback(() => {
    database.storage.clear()
    setDatabase(new ArtCharDatabase(database.storage))
  }, [database, setDatabase])
  const copyToClipboard = useCallback(
    () => navigator.clipboard.writeText(JSON.stringify(exportGOOD(database.storage)))
      .then(() => alert("Copied database to clipboard."))
      .catch(console.error),
    [database],
  )
  const download = useCallback(
    () => {
      const date = new Date()
      const dateStr = date.toISOString().split(".")[0].replace("T", "_").replaceAll(":", "-")
      const JSONStr = JSON.stringify(exportGOOD(database.storage))
      const filename = `go-data_${dateStr}.json`
      const contentType = "application/json;charset=utf-8"
      const a = document.createElement('a');
      a.download = filename
      a.href = `data:${contentType},${encodeURIComponent(JSONStr)}`
      a.target = "_blank"
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    },
    [database],
  )


  return <CardLight>
    <CardContent sx={{ py: 1 }}>
      <Typography variant="subtitle1">
        <Trans t={t} i18nKey="downloadCard.databaseDownload" />
      </Typography>
    </CardContent>
    <Divider />
    <CardContent>
      <Grid container mb={2} spacing={2}>
        <Grid item xs={6} md={4}><Typography><Trans t={t} i18nKey="count.chars" /> {numChar}</Typography></Grid>
        <Grid item xs={6} md={4}><Typography><Trans t={t} i18nKey="count.arts" /> {numArt}</Typography></Grid>
        <Grid item xs={6} md={4}><Typography><Trans t={t} i18nKey="count.weapons" /> {numWeapon}</Typography></Grid>
      </Grid>
    </CardContent>
    <Divider />
    <CardContent sx={{ py: 1 }}>
      <Grid container spacing={2}>
        <Grid item><Button disabled={!downloadValid} onClick={download} startIcon={<Download />}><Trans t={t} i18nKey="downloadCard.button.download" /></Button></Grid>
        <Grid item flexGrow={1} ><Button disabled={!downloadValid} color="info" onClick={copyToClipboard} startIcon={<FontAwesomeIcon icon={faClipboard} />}><Trans t={t} i18nKey="downloadCard.button.copy" /></Button></Grid>
        <Grid item><Button disabled={!downloadValid} color="error" onClick={deleteDB} startIcon={<FontAwesomeIcon icon={faTrashAlt} />}><Trans t={t} i18nKey="downloadCard.button.delete" /></Button></Grid>
      </Grid>
    </CardContent>
  </CardLight>
}

ParamsBox: FunctionComponent = () => {
	const { editor: { selection } } = useStore();

	if (selection.size === 0) return null;

	if (selection.size > 1) {
		return (
			<Box title={`${selection.size} entities selected`}/>
		);
	}

	const selectedEntity = Array.from(selection.values())[0];

	function onDelete(): void {
		selectedEntity.remove();
	}

	return (
		<Box title={selectedEntity.displayName}>
			{Hoppi.is(selectedEntity) && (
				<HoppiParam hoppi={selectedEntity}/>
			)}
			{Text.is(selectedEntity) && (
				<TextParam params={selectedEntity.params}/>
			)}
			{('params' in selectedEntity) && ('setRadius' in selectedEntity.params) && ('radius' in selectedEntity.params) && (
				<RadiusParam params={selectedEntity.params}/>
			)}
			{('params' in selectedEntity) && ('setIsStatic' in selectedEntity.params) && ('isStatic' in selectedEntity.params) && (
				<StaticParam params={selectedEntity.params}/>
			)}
			{('params' in selectedEntity) && ('setFillColor' in selectedEntity.params) && ('fillColor' in selectedEntity.params) && (
				<FillColorParam params={selectedEntity.params}/>
			)}
			{('params' in selectedEntity) && ('setOpacity' in selectedEntity.params) && ('opacity' in selectedEntity.params) && (
				<OpacityParam params={selectedEntity.params}/>
			)}
			{('params' in selectedEntity) && ('setAngle' in selectedEntity.params) && ('angle' in selectedEntity.params) && (
				<AngleParam params={selectedEntity.params}/>
			)}
			{('params' in selectedEntity) && ('destination' in selectedEntity.params) && (
				<DestinationParam params={selectedEntity.params}/>
			)}
			{('params' in selectedEntity) && ('setRightFacing' in selectedEntity.params) && ('rightFacing' in selectedEntity.params) && (
				<TextureMirroringParam params={selectedEntity.params}/>
			)}
			{Entity.is(selectedEntity) && (
				<ZOrderParam entity={selectedEntity}/>
			)}
			{('params' in selectedEntity) && VerticesParamsM.is(selectedEntity.params) && (
				<VerticesParam params={selectedEntity.params}/>
			)}
			<DangerButton onClick={onDelete}>
				<FontAwesomeIcon icon={faTrashAlt}/>
				&#32;
				Delete entity
			</DangerButton>
		</Box>
	);
}

export default function ArtifactCard({ artifactId, artifactObj, onClick, onDelete, mainStatAssumptionLevel = 0, effFilter = allSubstatFilter, probabilityFilter, disableEditSetSlot = false, editor = false, canExclude = false, canEquip = false, extraButtons }: Data): JSX.Element | null {
  const { t } = useTranslation(["artifact", "ui"]);
  const { database } = useContext(DatabaseContext)
  const databaseArtifact = useArtifact(artifactId)
  const sheet = usePromise(ArtifactSheet.get((artifactObj ?? databaseArtifact)?.setKey), [artifactObj, databaseArtifact])
  const equipOnChar = (charKey: CharacterKey | "") => database.setArtLocation(artifactId!, charKey)
  const editable = !artifactObj
  const [showEditor, setshowEditor] = useState(false)
  const onHideEditor = useCallback(() => setshowEditor(false), [setshowEditor])
  const onShowEditor = useCallback(() => editable && setshowEditor(true), [editable, setshowEditor])

  const wrapperFunc = useCallback(children => <CardActionArea onClick={() => artifactId && onClick?.(artifactId)} sx={{ flexGrow: 1, display: "flex", flexDirection: "column" }} >{children}</CardActionArea>, [onClick, artifactId],)
  const falseWrapperFunc = useCallback(children => <Box sx={{ flexGrow: 1, display: "flex", flexDirection: "column" }} >{children}</Box>, [])

  const art = artifactObj ?? databaseArtifact
  if (!art) return null

  const { id, lock, slotKey, rarity, level, mainStatKey, substats, exclude, location = "" } = art
  const mainStatLevel = Math.max(Math.min(mainStatAssumptionLevel, rarity * 4), level)
  const mainStatUnit = KeyMap.unit(mainStatKey)
  const levelVariant = "roll" + (Math.floor(Math.max(level, 0) / 4) + 1)
  const { currentEfficiency, maxEfficiency } = Artifact.getArtifactEfficiency(art, effFilter)
  const artifactValid = maxEfficiency !== 0
  const slotName = sheet?.getSlotName(slotKey) || "Unknown Piece Name"
  const slotDesc = sheet?.getSlotDesc(slotKey)
  const slotDescTooltip = slotDesc && <InfoTooltip title={<Box>
    <Typography variant='h6'>{slotName}</Typography>
    <Typography>{slotDesc}</Typography>
  </Box>} />
  const setEffects = sheet?.setEffects
  const setDescTooltip = sheet && setEffects && <InfoTooltip title={
    <span>
      {Object.keys(setEffects).map(setNumKey => <span key={setNumKey}>
        <Typography variant="h6"><SqBadge color="success">{t(`artifact:setEffectNum`, { setNum: setNumKey })}</SqBadge></Typography>
        <Typography>{sheet.setEffectDesc(setNumKey as any)}</Typography>
      </span>)}
    </span>
  } />
  return <Suspense fallback={<Skeleton variant="rectangular" sx={{ width: "100%", height: "100%", minHeight: 350 }} />}>
    {editor && <Suspense fallback={false}>
      <ArtifactEditor
        artifactIdToEdit={showEditor ? artifactId : ""}
        cancelEdit={onHideEditor}
        disableEditSetSlot={disableEditSetSlot}
      />
    </Suspense>}
    <CardLight sx={{ height: "100%", display: "flex", flexDirection: "column" }}>
      <ConditionalWrapper condition={!!onClick} wrapper={wrapperFunc} falseWrapper={falseWrapperFunc}>
        <Box className={`grad-${rarity}star`} sx={{ position: "relative", width: "100%" }}>
          {!onClick && <IconButton color="primary" disabled={!editable} onClick={() => database.updateArt({ lock: !lock }, id)} sx={{ position: "absolute", right: 0, bottom: 0, zIndex: 2 }}>
            {lock ? <Lock /> : <LockOpen />}
          </IconButton>}
          <Box sx={{ pt: 2, px: 2, position: "relative", zIndex: 1 }}>
            {/* header */}
            <Box component="div" sx={{ display: "flex", alignItems: "center", gap: 1, mb: 1 }}>
              <Chip size="small" label={<strong>{` +${level}`}</strong>} color={levelVariant as any} />
              <Typography component="span" noWrap sx={{ backgroundColor: "rgba(100,100,100,0.35)", borderRadius: "1em", px: 1 }}><strong>{slotName}</strong></Typography>
              <Box flexGrow={1} sx={{ textAlign: "right" }}>
                {slotDescTooltip}
              </Box>
            </Box>
            <Typography color="text.secondary" variant="body2">
              <SlotNameWithIcon slotKey={slotKey} />
            </Typography>
            <Typography variant="h6" color={`${KeyMap.getVariant(mainStatKey)}.main`}>
              <span>{StatIcon[mainStatKey]} {KeyMap.get(mainStatKey)}</span>
            </Typography>
            <Typography variant="h5">
              <strong>
                <ColorText color={mainStatLevel !== level ? "warning" : undefined}>{cacheValueString(Artifact.mainStatValue(mainStatKey, rarity, mainStatLevel) ?? 0, KeyMap.unit(mainStatKey))}{mainStatUnit}</ColorText>
              </strong>
            </Typography>
            <Stars stars={rarity} colored />
            {/* {process.env.NODE_ENV === "development" && <Typography color="common.black">{id || `""`} </Typography>} */}
          </Box>
          <Box sx={{ height: "100%", position: "absolute", right: 0, top: 0 }}>
            <Box
              component="img"
              src={sheet?.slotIcons[slotKey] ?? ""}
              width="auto"
              height="100%"
              sx={{ float: "right" }}
            />
          </Box>
        </Box>
        <CardContent sx={{ flexGrow: 1, display: "flex", flexDirection: "column", pt: 1, pb: 0, width: "100%" }}>
          {substats.map((stat: ICachedSubstat) => <SubstatDisplay key={stat.key} stat={stat} effFilter={effFilter} rarity={rarity} />)}
          <Box sx={{ display: "flex", my: 1 }}>
            <Typography color="text.secondary" component="span" variant="caption" sx={{ flexGrow: 1 }}>{t`artifact:editor.curSubEff`}</Typography>
            <PercentBadge value={currentEfficiency} max={900} valid={artifactValid} />
          </Box>
          {currentEfficiency !== maxEfficiency && <Box sx={{ display: "flex", mb: 1 }}>
            <Typography color="text.secondary" component="span" variant="caption" sx={{ flexGrow: 1 }}>{t`artifact:editor.maxSubEff`}</Typography>
            <PercentBadge value={maxEfficiency} max={900} valid={artifactValid} />
          </Box>}
          <Box flexGrow={1} />
          {probabilityFilter && <strong>Probability: {(probability(art, probabilityFilter) * 100).toFixed(2)}%</strong>}
          <Typography color="success.main">{sheet?.name ?? "Artifact Set"} {setDescTooltip}</Typography>
        </CardContent>
      </ConditionalWrapper>
      <Box sx={{ p: 1, display: "flex", gap: 1, justifyContent: "space-between", alignItems: "center" }}>
        {editable && canEquip
          ? <CharacterAutocomplete sx={{ flexGrow: 1 }} size="small" showDefault
            defaultIcon={<BusinessCenter />} defaultText={t("ui:inventory")}
            value={location} onChange={equipOnChar} />
          : <LocationName location={location} />}
        {editable && <ButtonGroup sx={{ height: "100%" }}>
          {editor && <Tooltip title={<Typography>{t`artifact:edit`}</Typography>} placement="top" arrow>
            <Button color="info" size="small" onClick={onShowEditor} >
              <FontAwesomeIcon icon={faEdit} className="fa-fw" />
            </Button>
          </Tooltip>}
          {canExclude && <Tooltip title={<Typography>{t`artifact:excludeArtifactTip`}</Typography>} placement="top" arrow>
            <Button onClick={() => database.updateArt({ exclude: !exclude }, id)} color={exclude ? "error" : "success"} size="small" >
              <FontAwesomeIcon icon={exclude ? faBan : faChartLine} className="fa-fw" />
            </Button>
          </Tooltip>}
          {!!onDelete && <Button color="error" size="small" onClick={() => onDelete(id)} disabled={lock}>
            <FontAwesomeIcon icon={faTrashAlt} className="fa-fw" />
          </Button>}
          {extraButtons}
        </ButtonGroup>}
      </Box>
    </CardLight >
  </Suspense>
}

export default function WeaponCard({ weaponId, onClick, onEdit, onDelete, canEquip = false, extraButtons }: WeaponCardProps) {
  const { t } = useTranslation(["page_weapon", "ui"]);
  const { database } = useContext(DatabaseContext)
  const databaseWeapon = useWeapon(weaponId)
  const weapon = databaseWeapon
  const weaponSheet = usePromise(weapon?.key ? WeaponSheet.get(weapon.key) : undefined, [weapon?.key])

  const filter = useCallback(
    (cs: CharacterSheet) => cs.weaponTypeKey === weaponSheet?.weaponType,
    [weaponSheet],
  )

  const wrapperFunc = useCallback(children => <CardActionArea onClick={() => onClick?.(weaponId)} >{children}</CardActionArea>, [onClick, weaponId],)
  const falseWrapperFunc = useCallback(children => <Box >{children}</Box>, [])

  const equipOnChar = useCallback((charKey: CharacterKey | "") => database.setWeaponLocation(weaponId, charKey), [database, weaponId],)

  const UIData = useMemo(() => weaponSheet && weapon && computeUIData([weaponSheet.data, dataObjForWeapon(weapon)]), [weaponSheet, weapon])

  if (!weapon || !weaponSheet || !UIData) return null;
  const { level, ascension, refinement, id, location = "", lock } = weapon
  const weaponTypeKey = UIData.get(input.weapon.type).value!
  const stats = [input.weapon.main, input.weapon.sub, input.weapon.sub2].map(x => UIData.get(x))
  const img = ascension < 2 ? weaponSheet?.img : weaponSheet?.imgAwaken

  return <Suspense fallback={<Skeleton variant="rectangular" sx={{ width: "100%", height: "100%", minHeight: 300 }} />}>
    <CardLight sx={{ height: "100%", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
      <ConditionalWrapper condition={!!onClick} wrapper={wrapperFunc} falseWrapper={falseWrapperFunc}>
        <Box className={`grad-${weaponSheet.rarity}star`} sx={{ position: "relative", pt: 2, px: 2, }}>
          {!onClick && <IconButton color="primary" onClick={() => database.updateWeapon({ lock: !lock }, id)} sx={{ position: "absolute", right: 0, bottom: 0, zIndex: 2 }}>
            {lock ? <Lock /> : <LockOpen />}
          </IconButton>}
          <Box sx={{ position: "relative", zIndex: 1 }}>
            <Box component="div" sx={{ display: "flex", alignItems: "center", gap: 1, mb: 1 }}>
              <ImgIcon sx={{ fontSize: "1.5em" }} src={Assets.weaponTypes?.[weaponTypeKey]} />
              <Typography noWrap sx={{ textAlign: "center", backgroundColor: "rgba(100,100,100,0.35)", borderRadius: "1em", px: 1 }}><strong>{weaponSheet.name}</strong></Typography>
            </Box>
            <Typography component="span" variant="h5">Lv. {level}</Typography>
            <Typography component="span" variant="h5" color="text.secondary">/{ascensionMaxLevel[ascension]}</Typography>
            <Typography variant="h6">Refinement <strong>{refinement}</strong></Typography>
            <Typography><Stars stars={weaponSheet.rarity} colored /></Typography>
          </Box>
          <Box sx={{ height: "100%", position: "absolute", right: 0, top: 0 }}>
            <Box
              component="img"
              src={img ?? ""}
              width="auto"
              height="100%"
              sx={{ float: "right" }}
            />
          </Box>
        </Box>
        <CardContent>
          {stats.map(node => {
            if (!node.info.key) return null
            const displayVal = valueString(node.value, node.unit, !node.unit ? 0 : undefined)
            return <Box key={node.info.key} sx={{ display: "flex" }}>
              <Typography flexGrow={1}>{StatIcon[node.info.key!]} {KeyMap.get(node.info.key)}</Typography>
              <Typography>{displayVal}</Typography>
            </Box>
          })}
        </CardContent>
      </ConditionalWrapper>
      <Box sx={{ p: 1, display: "flex", gap: 1, justifyContent: "space-between", alignItems: "center" }}>
        {canEquip
          ? <CharacterAutocomplete size="small" sx={{ flexGrow: 1 }}
            showDefault defaultIcon={<BusinessCenter />} defaultText={t("inventory")}
            value={location} onChange={equipOnChar} filter={filter} />
          : <LocationName location={location} />}
        <ButtonGroup>
          {!!onEdit && <Tooltip title={<Typography>{t`page_weapon:edit`}</Typography>} placement="top" arrow>
            <Button color="info" onClick={() => onEdit(id)} >
              <FontAwesomeIcon icon={faEdit} className="fa-fw" />
            </Button>
          </Tooltip>}
          {!!onDelete && <Button color="error" onClick={() => onDelete(id)} disabled={!!location || lock} >
            <FontAwesomeIcon icon={faTrashAlt} className="fa-fw" />
          </Button>}
          {extraButtons}
        </ButtonGroup>
      </Box>
    </CardLight>
  </Suspense>
}

ParamsBox: FunctionComponent<Props> = ({ params }) => {
	const selectRef = useRef(null);
	const { undoManager } = useStore();

	const onChangeText = (ev: ChangeEvent<HTMLTextAreaElement>, code: string): void => {
		params.setCopy(code, ev.target.value);
	};

	function onTextFocus(): void {
		undoManager.startGroup();
	}
	function onTextBlur(): void {
		undoManager.stopGroup();
	}

	const onAddLanguage = (): void => {
		if (selectRef.current === null) return;

		// why is typescript being dumb?
		// @ts-expect-error
		params.setCopy(selectRef.current.value, '');
	};

	const onRemoveLanguage = (code: string): void => {
		if (selectRef.current === null) return;

		params.removeLang(code);
	};

	const unusedLanguages = Object.entries(params.copy)
		.filter(([, copy]) => copy === undefined)
		.map(([code]) => code);

	const onChangeAlign = (ev: ChangeEvent<HTMLSelectElement>): void => {
		params.setAlign(ev.target.value as Align);
	};

	return (
		<Fragment>
			<LanguageList>
				{Object.entries(params.copy)
					.filter(([, copy]) => copy !== undefined)
					.map(([code, copy]) => (
						<LanguageRow key={code}>
							<div>
								<LangLabel htmlFor={`text-param-${code}`}>{languages.getNativeName(code)}:</LangLabel>
								{code !== 'en' && (
									<DangerButton
										onClick={(): void => onRemoveLanguage(code)}
										title="Remove language"
									>
										<FontAwesomeIcon icon={faTrashAlt}/>
									</DangerButton>
								)}
							</div>
							<textarea
								id={`text-param-${code}`}
								rows={3}
								cols={40}
								wrap="off"
								value={copy}
								onChange={(ev): void => onChangeText(ev, code)}
								onFocus={onTextFocus}
								onBlur={onTextBlur}
								minLength={1}
							/>
						</LanguageRow>
					))}
			</LanguageList>
			<div>
				<select ref={selectRef} defaultValue="es">
					{unusedLanguages.map((code) => (
						<option key={code} value={code}>{languages.getNativeName(code)}</option>
					))}
				</select>
				<button onClick={onAddLanguage}>
					<FontAwesomeIcon icon={faLanguage}/>
					&#32;
					Add language
				</button>
			</div>
			<label>
				<FontAwesomeIcon icon={faAlignLeft}/>
				&#32;
				align:
				&#32;
				<select value={params.align} onChange={onChangeAlign}>
					{Object.values(Align).map((align) => (
						<option key={align} value={align}>{align}</option>
					))}
				</select>
			</label>
		</Fragment>
	);
}