Move more non-shared components to shlink-web-component

shlink-web-component/utils/components/IconInput.scss

@@ -0,0 +1,26 @@
+@import '../../../src/utils/mixins/vertical-align';
+@import '../../../src/utils/base';
+
+.icon-input-container {
+  position: relative;
+}
+
+.icon-input-container__input {
+  padding-right: 35px !important;
+}
+
+.icon-input-container__input:not(:disabled) {
+  background-color: var(--primary-color) !important;
+}
+
+.card .icon-input-container__input:not(:disabled),
+.dropdown .icon-input-container__input:not(:disabled) {
+  background-color: var(--input-color) !important;
+}
+
+.icon-input-container__icon {
+  @include vertical-align();
+
+  right: .75rem;
+  cursor: pointer;
+}

shlink-web-component/utils/components/IconInput.tsx

@@ -0,0 +1,29 @@
+import type { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import type { FC } from 'react';
+import type { InputProps } from 'reactstrap';
+import { Input } from 'reactstrap';
+import { useElementRef } from '../../../src/utils/helpers/hooks';
+import './IconInput.scss';
+
+type IconInputProps = InputProps & {
+  icon: IconProp;
+};
+
+export const IconInput: FC<IconInputProps> = ({ icon, className, ...rest }) => {
+  const ref = useElementRef<HTMLInputElement>();
+  const classes = classNames('icon-input-container__input', className);
+
+  return (
+    <div className="icon-input-container">
+      <Input className={classes} innerRef={ref} {...rest} />
+      <FontAwesomeIcon
+        icon={icon}
+        fixedWidth
+        className="icon-input-container__icon"
+        onClick={() => ref.current?.focus()}
+      />
+    </div>
+  );
+};