Improved server form

src/utils/FormGroupContainer.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { v4 as uuid } from 'uuid';
+import { InputType } from 'reactstrap/lib/Input';
+
+interface FormGroupContainer {
+  value: string;
+  onChange: (newValue: string) => void;
+  id?: string;
+  type?: InputType;
+  required?: boolean;
+}
+
+export const FormGroupContainer: FC<FormGroupContainer> = (
+  { children, value, onChange, id = uuid(), type = 'text', required = true },
+) => (
+  <div className="form-group">
+    <label htmlFor={id} className="create-server__label">
+      {children}:
+    </label>
+    <input
+      className="form-control"
+      type={type}
+      id={id}
+      value={value}
+      required={required}
+      onChange={(e) => onChange(e.target.value)}
+    />
+  </div>
+);

src/utils/HorizontalFormGroup.tsx

@@ -1,31 +0,0 @@
-import { FC } from 'react';
-import { v4 as uuid } from 'uuid';
-import { InputType } from 'reactstrap/lib/Input';
-
-interface HorizontalFormGroupProps {
-  value: string;
-  onChange: (newValue: string) => void;
-  id?: string;
-  type?: InputType;
-  required?: boolean;
-}
-
-export const HorizontalFormGroup: FC<HorizontalFormGroupProps> = (
-  { children, value, onChange, id = uuid(), type = 'text', required = true },
-) => (
-  <div className="form-group row">
-    <label htmlFor={id} className="col-lg-1 col-md-2 col-form-label create-server__label">
-      {children}:
-    </label>
-    <div className="col-lg-11 col-md-10">
-      <input
-        className="form-control"
-        type={type}
-        id={id}
-        value={value}
-        required={required}
-        onChange={(e) => onChange(e.target.value)}
-      />
-    </div>
-  </div>
-);

src/utils/SimpleCard.tsx

@@ -1,8 +1,9 @@
 import { CardProps } from 'reactstrap/lib/Card';
 import { Card, CardBody, CardHeader } from 'reactstrap';
+import { ReactNode } from 'react';
 
-interface SimpleCardProps extends CardProps {
-  title?: string;
+interface SimpleCardProps extends Omit<CardProps, 'title'> {
+  title?: ReactNode;
 }
 
 export const SimpleCard = ({ title, children, ...rest }: SimpleCardProps) => (