From 4273b5c8ca7f97baad3eed4e3d24f5221dd588ac Mon Sep 17 00:00:00 2001
From: Djeeberjr <djeeberjr@gmail.com>
Date: Mon, 15 Nov 2021 22:07:41 +0100
Subject: [PATCH] added menu bar

---
 src/components/App.tsx       |  2 ++
 src/components/CardGroup.tsx |  2 +-
 src/components/Deck.tsx      |  2 +-
 src/components/MenuBar.tsx   | 22 ++++++++++++++++++++++
 src/index.css                |  4 ++++
 5 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 src/components/MenuBar.tsx

diff --git a/src/components/App.tsx b/src/components/App.tsx
index c36406b..8a0d2f2 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import AllDecks from './AllDecks';
+import MenuBar from './MenuBar';
 
 function App() {
   // const [CTDeck,setCTDeck] = useState<Deck>(new Deck(
@@ -14,6 +15,7 @@ function App() {
 
   return (
     <div className="text-white">
+      <MenuBar />
       <AllDecks />
     </div>
   );
diff --git a/src/components/CardGroup.tsx b/src/components/CardGroup.tsx
index 6e67851..2e5a419 100644
--- a/src/components/CardGroup.tsx
+++ b/src/components/CardGroup.tsx
@@ -38,7 +38,7 @@ const CardGroupComp: React.FC<Props> = ({cardGroup,side,onChange,onRemove}) => {
 					/>
 				)}
 				<div
-					className="bg-gray-600 m-1 p-1 cursor-pointer my-auto"
+					className="bg-gray-600 my-auto button"
 					onClick={()=>onChange?.(
 						new CardGroup(
 							cardGroup.numInDeck,
diff --git a/src/components/Deck.tsx b/src/components/Deck.tsx
index 736015b..24a0766 100644
--- a/src/components/Deck.tsx
+++ b/src/components/Deck.tsx
@@ -42,7 +42,7 @@ const DeckComp: React.FC<Props> = ({deck,side,title,onChange}) => {
                         }}
                     />
                 )}
-                <div className="bg-gray-700 m-1 p-1 cursor-pointer my-auto" 
+                <div className="bg-gray-700 button my-auto" 
                     onClick={()=>onChange?.(
                         new Deck(
                             deck.numDefusers,
diff --git a/src/components/MenuBar.tsx b/src/components/MenuBar.tsx
new file mode 100644
index 0000000..47dd3d0
--- /dev/null
+++ b/src/components/MenuBar.tsx
@@ -0,0 +1,22 @@
+import React from "react"
+
+interface Props {
+    onExport?: ()=>void
+}
+
+const MenuBar: React.FC<Props> = ({onExport}) => {
+    return (
+        <div className="bg-gray-800 h-10 m-1 p-1 flex">
+            <div className="bg-gray-700 button" onClick={onExport}>
+                Export
+            </div>
+            <a href="https://developer.valvesoftware.com/wiki/CS:GO_Game_Mode_-_Retakes" target="_blank" rel='noreferrer'>
+                <div className="bg-gray-700 button">
+                    Help
+                </div>
+            </a>
+        </div>
+    )
+}
+
+export default MenuBar
diff --git a/src/index.css b/src/index.css
index 3d583cd..5e9f6c3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,3 +5,7 @@
 .min-h-card {
     min-height: 10rem;
 }
+
+.button {
+    @apply py-1 px-2 mx-2 hover:bg-gray-900 cursor-pointer
+}