From a28be14e25b6a57b523e688bb1e6f8b33e21259b Mon Sep 17 00:00:00 2001
From: Himanshu Aggarwal <aggarwah@mcmaster.ca>
Date: Fri, 18 Mar 2022 21:44:15 -0400
Subject: [PATCH] Make Tabs component modular
---
src/cryptometrics/components/tabs/Tab.js | 27 ++++------------------
src/cryptometrics/components/tabs/Tabs.js | 25 ++++++++++++++++++++
src/cryptometrics/components/tabs/index.js | 4 ++++
src/cryptometrics/pages/index.js | 2 +-
4 files changed, 34 insertions(+), 24 deletions(-)
create mode 100644 src/cryptometrics/components/tabs/Tabs.js
create mode 100644 src/cryptometrics/components/tabs/index.js
diff --git a/src/cryptometrics/components/tabs/Tab.js b/src/cryptometrics/components/tabs/Tab.js
index 7463462..2b95982 100644
--- a/src/cryptometrics/components/tabs/Tab.js
+++ b/src/cryptometrics/components/tabs/Tab.js
@@ -1,28 +1,7 @@
import classNames from "classnames";
-import React, { useState } from "react";
+import React from "react";
-export function Tabs({ children }) {
- const [tab, setTab] = useState("card-view");
-
- return (
- <div>
- <div className="flex align-middle w-fit bg-dark-600 rounded-3xl py-2 px-2">
- {children.map((child) => {
- const { id } = child.props;
- return (
- <Tab key={id} {...child.props} activeTab={tab} onClick={setTab} />
- );
- })}
- </div>
- {children.map((child) => {
- if (child.props.id !== tab) return undefined;
- return child.props.children;
- })}
- </div>
- );
-}
-
-export function Tab({ id, content, activeTab, onClick }) {
+function Tab({ id, content, activeTab, onClick }) {
return (
<button
className={classNames(
@@ -37,3 +16,5 @@ export function Tab({ id, content, activeTab, onClick }) {
</button>
);
}
+
+export default Tab;
diff --git a/src/cryptometrics/components/tabs/Tabs.js b/src/cryptometrics/components/tabs/Tabs.js
new file mode 100644
index 0000000..6d4d74a
--- /dev/null
+++ b/src/cryptometrics/components/tabs/Tabs.js
@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+import Tab from "./Tab";
+
+function Tabs({ children }) {
+ const [tab, setTab] = useState("card-view");
+
+ return (
+ <div>
+ <div className="flex align-middle w-fit bg-dark-600 rounded-3xl py-2 px-2">
+ {children.map((child) => {
+ const { id } = child.props;
+ return (
+ <Tab key={id} {...child.props} activeTab={tab} onClick={setTab} />
+ );
+ })}
+ </div>
+ {children.map((child) => {
+ if (child.props.id !== tab) return undefined;
+ return child.props.children;
+ })}
+ </div>
+ );
+}
+
+export default Tabs;
diff --git a/src/cryptometrics/components/tabs/index.js b/src/cryptometrics/components/tabs/index.js
new file mode 100644
index 0000000..4c18d77
--- /dev/null
+++ b/src/cryptometrics/components/tabs/index.js
@@ -0,0 +1,4 @@
+import Tabs from "./Tabs";
+import Tab from "./Tab";
+
+export { Tab, Tabs };
diff --git a/src/cryptometrics/pages/index.js b/src/cryptometrics/pages/index.js
index b51d6a2..94c9839 100644
--- a/src/cryptometrics/pages/index.js
+++ b/src/cryptometrics/pages/index.js
@@ -10,7 +10,7 @@ import { useCryptoList } from "../queries";
import numeral from "numeral";
import Wrapper from "../components/content/Wrapper";
import Sidebar from "../components/sidebar/Sidebar";
-import { Tabs, Tab } from "../components/tabs/Tab";
+import { Tabs, Tab } from "../components/tabs";
import {
CollectionIcon,
PlusIcon,
--
GitLab