Merge pull request #13 from KUIT-Space/feat#7-header-bar

Feat#7 header bar
KUIT-Space · Jul 10, 2024 · 306765c · 306765c
2 parents aa9563c + e55d026
commit 306765c
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 5 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,12 @@
 {
   "editor.codeActionsOnSave": {
-  "source.fixAll": true,
-},
-"editor.formatOnSave": true,
+    "source.fixAll": "always",
+  },
+  "editor.formatOnSave": true,
+  "editor.tabSize": 2,
+
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
 }
diff --git a/src/components/TopBarText.tsx b/src/components/TopBarText.tsx
@@ -0,0 +1,80 @@
+import { FC } from "react";
+import logo from "@/assets/logo_space.svg";
+import back from "@/assets/icon_back.svg";
+import * as sty from "@/styles/TopBarText.styled";
+import { useNavigate } from "react-router-dom";
+
+export enum LeftEnum {
+	Logo = "logo",
+	Back = "back",
+	None = "none",
+}
+
+interface topbarProps {
+	left: LeftEnum;
+	center: string;
+	right: string;
+}
+
+const TopBarText: FC<topbarProps> = ({ left, center, right }) => {
+	const navigate = useNavigate();
+	switch (left) {
+		case "logo":
+			return (
+				<div>
+					<sty.StyledTopBarDiv>
+						<sty.StyledLeftDiv
+							onClick={() => {
+								navigate("/");
+							}}
+						>
+							<img src={logo}></img>
+						</sty.StyledLeftDiv>
+						<sty.StyledCenterDiv>
+							<sty.StyledCenterP>{center}</sty.StyledCenterP>
+						</sty.StyledCenterDiv>
+						<sty.StyledRightDiv>
+							<sty.StyledRightP>{right}</sty.StyledRightP>
+						</sty.StyledRightDiv>
+					</sty.StyledTopBarDiv>
+				</div>
+			);
+
+		case "back":
+			return (
+				<div>
+					<sty.StyledTopBarDiv>
+						<sty.StyledLeftDiv
+							onClick={() => {
+								navigate(-1);
+							}}
+						>
+							<img src={back}></img>
+						</sty.StyledLeftDiv>
+						<sty.StyledCenterDiv>
+							<sty.StyledCenterP>{center}</sty.StyledCenterP>
+						</sty.StyledCenterDiv>
+						<sty.StyledRightDiv>
+							<sty.StyledRightP>{right}</sty.StyledRightP>
+						</sty.StyledRightDiv>
+					</sty.StyledTopBarDiv>
+				</div>
+			);
+
+		case "none":
+			return (
+				<div>
+					<sty.StyledTopBarDiv>
+						<sty.StyledLeftDiv></sty.StyledLeftDiv>
+						<sty.StyledCenterDiv>
+							<sty.StyledCenterP>{center}</sty.StyledCenterP>
+						</sty.StyledCenterDiv>
+						<sty.StyledRightDiv>
+							<sty.StyledRightP>{right}</sty.StyledRightP>
+						</sty.StyledRightDiv>
+					</sty.StyledTopBarDiv>
+				</div>
+			);
+	}
+};
+export default TopBarText;
diff --git a/src/styles/GlobalStyles.tsx b/src/styles/GlobalStyles.tsx
@@ -2,6 +2,6 @@ import { createGlobalStyle } from "styled-components";
 
 const GlobalStyle = createGlobalStyle`
 
-`
+`;
 
-export default GlobalStyle;
+export default GlobalStyle;
diff --git a/src/styles/TopBarText.styled.ts b/src/styles/TopBarText.styled.ts
@@ -0,0 +1,37 @@
+import styled from "styled-components";
+
+export const StyledTopBarDiv = styled.div`
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+`;
+
+export const StyledLeftDiv = styled.div`
+	${(props) => props.onClick && "cursor: pointer;"}
+
+	img {
+		width: 120px;
+	}
+`;
+
+export const StyledCenterDiv = styled.div`
+	width: 160px;
+	text-align: center;
+`;
+
+export const StyledRightDiv = styled.div`
+	width: 160px;
+`;
+
+export const StyledCenterP = styled.p`
+	font-family: "Freesentation M";
+	font-size: 20px;
+	color: white;
+`;
+
+export const StyledRightP = styled.p`
+	font-family: "Freesentation M";
+	font-size: 16px;
+	color: white;
+	margin-right: 22px;
+`;