From e860ebf61886229ef6b00ef052a0c8308fef19c2 Mon Sep 17 00:00:00 2001
From: Himanshu Aggarwal <aggarwah@mcmaster.ca>
Date: Fri, 18 Mar 2022 20:53:27 -0400
Subject: [PATCH] Make Input components modular
---
src/cryptometrics/components/inputs/Input.js | 4 +++-
src/cryptometrics/components/inputs/SearchInput.js | 9 ++++-----
2 files changed, 7 insertions(+), 6 deletions(-)
diff --git a/src/cryptometrics/components/inputs/Input.js b/src/cryptometrics/components/inputs/Input.js
index bd4361b..a079471 100644
--- a/src/cryptometrics/components/inputs/Input.js
+++ b/src/cryptometrics/components/inputs/Input.js
@@ -2,6 +2,7 @@ import classNames from "classnames";
import React from "react";
function Input({
+ className,
placeholder,
type,
onChange,
@@ -26,7 +27,8 @@ function Input({
"pr-8": symbolRight,
"pl-3": !symbolLeft,
"pl-8": symbolLeft,
- }
+ },
+ className
)}
placeholder={placeholder}
type={type ? type : "text"}
diff --git a/src/cryptometrics/components/inputs/SearchInput.js b/src/cryptometrics/components/inputs/SearchInput.js
index a4bdec5..09fc226 100644
--- a/src/cryptometrics/components/inputs/SearchInput.js
+++ b/src/cryptometrics/components/inputs/SearchInput.js
@@ -1,18 +1,17 @@
import React from "react";
import { SearchIcon } from "@heroicons/react/outline";
+import Input from "./Input";
function SearchInput({ onChange }) {
return (
<div className="relative">
- <input
+ <Input
className="w-52 h-12 text-base font-semibold outline-none dark:text-white px-3 pr-10 rounded-2xl bg-dark-700"
placeholder="Search"
type="text"
onChange={onChange}
- ></input>
- <button className="absolute top-0 right-3 bottom-0 w-6">
- <SearchIcon className="w-6 h-6 dark:text-white" />
- </button>
+ symbolRight={<SearchIcon className="w-6 h-6 dark:text-white" />}
+ ></Input>
</div>
);
}
--
GitLab