From 273fc53c9edc28cde2384c2c1af9dfb5943c99f2 Mon Sep 17 00:00:00 2001
From: malmen237 <linda.malm@eyevinn.se>
Date: Thu, 18 Apr 2024 08:34:43 +0200
Subject: [PATCH] feat: added nav-button as a separate component, added styling

---
 src/components/landing-page/landing-page.tsx  | 11 ++-------
 .../manage-production-button.tsx              | 24 +++++++++++++++++++
 2 files changed, 26 insertions(+), 9 deletions(-)
 create mode 100644 src/components/manage-productions/manage-production-button.tsx

diff --git a/src/components/landing-page/landing-page.tsx b/src/components/landing-page/landing-page.tsx
index 0d120c3b..87767e2b 100644
--- a/src/components/landing-page/landing-page.tsx
+++ b/src/components/landing-page/landing-page.tsx
@@ -1,16 +1,14 @@
-import { useNavigate } from "react-router-dom";
 import { JoinProduction } from "./join-production.tsx";
 import { CreateProduction } from "./create-production.tsx";
 import { ProductionsList } from "./productions-list.tsx";
 import { useNavigateToProduction } from "./use-navigate-to-production.ts";
 import { DisplayContainer, FlexContainer } from "../generic-components.ts";
 import { useGlobalState } from "../../global-state/context-provider.tsx";
-import { ActionButton } from "./form-elements.tsx";
 import { isMobile } from "../../bowser.ts";
+import { ManageProductionButton } from "../manage-productions/manage-production-button.tsx";
 
 export const LandingPage = () => {
   const [{ joinProductionOptions }] = useGlobalState();
-  const navigate = useNavigate();
 
   useNavigateToProduction(joinProductionOptions);
 
@@ -27,12 +25,7 @@ export const LandingPage = () => {
         )}
       </FlexContainer>
       <ProductionsList />
-      <ActionButton
-        type="button"
-        onClick={() => navigate("/manage-productions")}
-      >
-        Manage Productions
-      </ActionButton>
+      <ManageProductionButton />
     </>
   );
 };
diff --git a/src/components/manage-productions/manage-production-button.tsx b/src/components/manage-productions/manage-production-button.tsx
new file mode 100644
index 00000000..9d819d4d
--- /dev/null
+++ b/src/components/manage-productions/manage-production-button.tsx
@@ -0,0 +1,24 @@
+import { useNavigate } from "react-router-dom";
+import styled from "@emotion/styled";
+import { ActionButton } from "../landing-page/form-elements";
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: end;
+  padding: 2rem;
+`;
+
+export const ManageProductionButton = () => {
+  const navigate = useNavigate();
+
+  return (
+    <ButtonWrapper>
+      <ActionButton
+        type="button"
+        onClick={() => navigate("/manage-productions")}
+      >
+        Manage Productions
+      </ActionButton>
+    </ButtonWrapper>
+  );
+};