From 425166dbed52ce993cd5d127146ff00bef739dec Mon Sep 17 00:00:00 2001
From: Himanshu Aggarwal <aggarwah@mcmaster.ca>
Date: Sun, 20 Feb 2022 14:16:03 -0500
Subject: [PATCH] Add a tabs components
---
src/cryptometrics/components/tabs/Tab.js | 42 ++++++++++++++++++++++++
1 file changed, 42 insertions(+)
create mode 100644 src/cryptometrics/components/tabs/Tab.js
diff --git a/src/cryptometrics/components/tabs/Tab.js b/src/cryptometrics/components/tabs/Tab.js
new file mode 100644
index 0000000..5e80f27
--- /dev/null
+++ b/src/cryptometrics/components/tabs/Tab.js
@@ -0,0 +1,42 @@
+import classNames from "classnames";
+import React, { useState, useEffect } from "react";
+
+export function Tabs({ children }) {
+ const [tab, setTab] = useState("card-view");
+ useEffect(() => {
+ console.log(tab);
+ }, [tab]);
+
+ 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 }) {
+ return (
+ <button
+ className={classNames(
+ "h-10 py-2 px-6 mx-1 rounded-2xl text-white font-semibold hover:bg-dark-800",
+ {
+ "bg-dark-800": activeTab === id,
+ }
+ )}
+ onClick={() => onClick(id)}
+ >
+ {content}
+ </button>
+ );
+}
--
GitLab