Refactor: Ingestor types for remote resources in Upload Component

frontend/src/components/Input.tsx

@@ -7,6 +7,7 @@ const Input = ({
   value,
   isAutoFocused = false,
   placeholder,
+  label,
   maxLength,
   className,
   colorVariant = 'silver',
@@ -26,21 +27,30 @@ const Input = ({
     thick: 'border-2',
   };
   return (
-    <input
-      className={`h-[42px] w-full rounded-full px-3 py-1 outline-none dark:bg-transparent dark:text-white ${className} ${colorStyles[colorVariant]} ${borderStyles[borderVariant]}`}
-      type={type}
-      id={id}
-      name={name}
-      autoFocus={isAutoFocused}
-      placeholder={placeholder}
-      maxLength={maxLength}
-      value={value}
-      onChange={onChange}
-      onPaste={onPaste}
-      onKeyDown={onKeyDown}
-    >
-      {children}
-    </input>
+    <div className="relative">
+      <input
+        className={`h-[42px] w-full rounded-full px-3 py-1 outline-none dark:bg-transparent dark:text-white ${className} ${colorStyles[colorVariant]} ${borderStyles[borderVariant]}`}
+        type={type}
+        id={id}
+        name={name}
+        autoFocus={isAutoFocused}
+        placeholder={placeholder}
+        maxLength={maxLength}
+        value={value}
+        onChange={onChange}
+        onPaste={onPaste}
+        onKeyDown={onKeyDown}
+      >
+        {children}
+      </input>
+      {label && (
+        <div className="absolute -top-2 left-2">
+          <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
+            {label}
+          </span>
+        </div>
+      )}
+    </div>
   );
 };
 

frontend/src/components/ToggleSwitch.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+type ToggleSwitchProps = {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  className?: string;
+  label?: string;
+  disabled?: boolean;
+  activeColor?: string;
+  inactiveColor?: string;
+  id?: string;
+};
+
+const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
+  checked,
+  onChange,
+  className = '',
+  label,
+  disabled = false,
+  activeColor = 'bg-purple-30',
+  inactiveColor = 'bg-transparent',
+  id,
+}) => {
+  return (
+    <label
+      className={`cursor-pointer select-none justify-between flex flex-row items-center ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`}
+      htmlFor={id}
+    >
+      {label && (
+        <span className="mr-2 text-eerie-black dark:text-white">{label}</span>
+      )}
+      <div className="relative">
+        <input
+          type="checkbox"
+          checked={checked}
+          onChange={(e) => onChange(e.target.checked)}
+          className="sr-only"
+          disabled={disabled}
+          id={id}
+        />
+        <div
+          className={`box block h-8 w-14 rounded-full border border-purple-30 ${
+            checked
+              ? `${activeColor} dark:${activeColor}`
+              : `${inactiveColor} dark:${inactiveColor}`
+          }`}
+        ></div>
+        <div
+          className={`absolute left-1 top-1 flex h-6 w-6 items-center justify-center rounded-full transition ${
+            checked ? 'translate-x-full bg-silver' : 'bg-purple-30'
+          }`}
+        ></div>
+      </div>
+    </label>
+  );
+};
+
+export default ToggleSwitch;

frontend/src/components/types/index.ts

@@ -8,6 +8,7 @@ export type InputProps = {
   maxLength?: number;
   name?: string;
   placeholder?: string;
+  label?: string;
   className?: string;
   children?: React.ReactElement;
   onChange: (