Feat/76 Use UI toolkit components for 'jump to block' (#147)

* frontend-monorepo-76 Use UI toolkit components for 'jump to block'

* frontend-monorepo-76 Use UI toolkit components for 'go to party'

* Added reusable component for 'jump to block' and 'go to party'

apps/explorer/src/app/components/jump-to-block/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Routes } from '../../routes/router-config';
+import { JumpTo } from '../jump-to';
 
 export const JumpToBlock = () => {
   const navigate = useNavigate();
@@ -20,25 +21,13 @@ export const JumpToBlock = () => {
   };
 
   return (
-    <form onSubmit={handleSubmit}>
+    <JumpTo
-      <label
+      label="Jump to block"
-        htmlFor="block-input"
+      placeholder="Block number"
-        className="block uppercase text-h5 font-bold"
+      inputId="block-input"
-      >
+      inputType="number"
-        Jump to block
+      inputName="blockNumber"
-      </label>
+      submitHandler={handleSubmit}
-      <input
+    />
-        id="block-input"
-        type="number"
-        name="blockNumber"
-        placeholder="Block number"
-        className="bg-white-25 border-white border px-8 py-4 placeholder-white-60"
-      />
-      <input
-        className="border-white border px-28 py-4 cursor-pointer"
-        type="submit"
-        value="Go"
-      />
-    </form>
   );
 };

apps/explorer/src/app/components/jump-to/index.tsx

@@ -0,0 +1,43 @@
+import { HTMLInputTypeAttribute, SyntheticEvent } from 'react';
+import { Input, Button } from '@vegaprotocol/ui-toolkit';
+
+interface JumpToProps {
+  label: string;
+  placeholder: string;
+  inputId: string;
+  inputType: HTMLInputTypeAttribute;
+  inputName: string;
+  submitHandler: (arg0: SyntheticEvent) => void;
+}
+
+export const JumpTo = ({
+  label,
+  placeholder,
+  inputId,
+  inputType,
+  inputName,
+  submitHandler,
+}: JumpToProps) => {
+  return (
+    <form onSubmit={submitHandler}>
+      <label
+        htmlFor={inputId}
+        className="block uppercase text-h5 font-bold mb-4"
+      >
+        {label}
+      </label>
+      <div className="flex">
+        <Input
+          id={inputId}
+          type={inputType}
+          name={inputName}
+          placeholder={placeholder}
+          className="max-w-[200px]"
+        />
+        <Button variant="secondary" type="submit">
+          Go
+        </Button>
+      </div>
+    </form>
+  );
+};

apps/explorer/src/app/routes/parties/home/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { RouteTitle } from '../../../components/route-title';
+import { JumpTo } from '../../../components/jump-to';
 
 import { useNavigate } from 'react-router-dom';
 import { Routes } from '../../router-config';
@@ -21,25 +22,14 @@ export const JumpToParty = () => {
     }
   };
   return (
-    <form onSubmit={handleSubmit}>
+    <JumpTo
-      <label
+      label="Go to party"
-        htmlFor="block-input"
+      placeholder="Party id"
-        className="block uppercase text-h5 font-bold"
+      inputId="party-input"
-      >
+      inputType="text"
-        Go to party
+      inputName="partyId"
-      </label>
+      submitHandler={handleSubmit}
-      <input
+    />
-        id="block-input"
-        name="partyId"
-        placeholder="Party id"
-        className="bg-white-25 border-white border px-8 py-4 placeholder-white-60"
-      />
-      <input
-        className="border-white border px-28 py-4 cursor-pointer"
-        type="submit"
-        value="Go"
-      />
-    </form>
   );
 };
 

libs/ui-toolkit/src/components/input/input.tsx

@@ -60,7 +60,7 @@ export const inputStyle = ({
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
   ({ prependIconName, appendIconName, className, ...props }, ref) => {
-    className = `${className} h-28`;
+    className = `h-28 ${className}`;
     if (prependIconName) {
       className += ' pl-28';
     }