From 4d6d280fb9b4afdd6a572b10af5fce62f482eb84 Mon Sep 17 00:00:00 2001
From: Himanshu Aggarwal <aggarwah@mcmaster.ca>
Date: Fri, 18 Mar 2022 20:51:43 -0400
Subject: [PATCH] Make filters modular
---
.../components/filters/Filter.js | 26 +++++--------------
.../components/filters/Filters.js | 9 +++++++
src/cryptometrics/components/filters/index.js | 4 +++
src/cryptometrics/pages/index.js | 3 ++-
4 files changed, 21 insertions(+), 21 deletions(-)
create mode 100644 src/cryptometrics/components/filters/Filters.js
create mode 100644 src/cryptometrics/components/filters/index.js
diff --git a/src/cryptometrics/components/filters/Filter.js b/src/cryptometrics/components/filters/Filter.js
index 3e31d27..111e1b5 100644
--- a/src/cryptometrics/components/filters/Filter.js
+++ b/src/cryptometrics/components/filters/Filter.js
@@ -1,6 +1,7 @@
import React from "react";
+import Button from "../button/Button";
-export function Filter({
+function Filter({
subject,
condition,
value,
@@ -24,29 +25,14 @@ export function Filter({
</div>
{/* Button */}
- <button
+ <Button
onClick={onButtonClick}
- className="mr-2 p-2 bg-dark-600 hover:dark:bg-dark-800 rounded-r-lg justify-center items-center h-10 w-10 inline-flex font-thin text-white"
+ className="mr-2 p-2 bg-dark-600 hover:dark:bg-dark-800 rounded-r-lg rounded-l-none justify-center items-center h-10 w-10 inline-flex font-thin text-white"
>
<span>{buttonIcon}</span>
- </button>
+ </Button>
</div>
);
}
-export function FilterButton({ icon, onClick }) {
- return (
- <button
- className="mx-1 mt-2 font-sans font-normal bg-dark-600 rounded-lg dark:text-neutral-200 dark:hover:text-indigo-600 inline-flex h-10 w-10 justify-center items-center whitespace-nowrap"
- onClick={onClick}
- >
- {icon}
- </button>
- );
-}
-
-export function Filters({ children }) {
- return (
- <div className="flex flex-wrap justify-start items-center">{children}</div>
- );
-}
+export default Filter;
diff --git a/src/cryptometrics/components/filters/Filters.js b/src/cryptometrics/components/filters/Filters.js
new file mode 100644
index 0000000..b38f870
--- /dev/null
+++ b/src/cryptometrics/components/filters/Filters.js
@@ -0,0 +1,9 @@
+import React from "react";
+
+function Filters({ children }) {
+ return (
+ <div className="flex flex-wrap justify-start items-center">{children}</div>
+ );
+}
+
+export default Filters;
diff --git a/src/cryptometrics/components/filters/index.js b/src/cryptometrics/components/filters/index.js
new file mode 100644
index 0000000..e8e3c04
--- /dev/null
+++ b/src/cryptometrics/components/filters/index.js
@@ -0,0 +1,4 @@
+import Filter from "./Filter";
+import Filters from "./Filters";
+
+export { Filter, Filters };
diff --git a/src/cryptometrics/pages/index.js b/src/cryptometrics/pages/index.js
index 3627429..0a0f82d 100644
--- a/src/cryptometrics/pages/index.js
+++ b/src/cryptometrics/pages/index.js
@@ -18,7 +18,7 @@ import {
XIcon,
} from "@heroicons/react/outline";
import { useFilters, useOnClickOutside } from "../hooks";
-import { Filter, FilterButton, Filters } from "../components/filters/Filter";
+import { Filter, Filters } from "../components/filters";
import { FilterDropdown } from "../components/dropdown/FilterDropdown";
import { filterOptions } from "../constants";
import {
@@ -31,6 +31,7 @@ import Image from "next/image";
import CryptoRowLineChart from "../components/charts/CryptoRowLineChart";
import classNames from "classnames";
import Link from "next/link";
+import { FilterButton } from "../components/button";
export default function Home() {
const [filters, addFilter, removeFilter] = useFilters([]);
--
GitLab