fix: refactor files

feat: refactor more files

feat: uppercase component folder 1/2

feat: uppercase component folder 2/2

front/components/UI/Elements/Menu.tsx

@@ -0,0 +1,115 @@
+import React from "react";
+import styled from "styled-components";
+import { HeaderProfileBox } from "../../Security/HeaderProfileBox";
+import learnhouseIcon from "public/learnhouse_icon.png";
+import learnhouseLogo from "public/learnhouse_logo.png";
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+export const Menu = () => {
+  const router = useRouter();
+  const { orgslug } = router.query;
+
+  return (
+    <GlobalHeader>
+      <LogoArea>
+        <Logo>
+          <Image width={25} height={25} src={learnhouseIcon} alt="" />
+          <Link href={"/"}>
+            <a>
+              <Image width={108} height={28} src={learnhouseLogo} alt="" />
+            </a>
+          </Link>
+        </Logo>
+        <div id="accounts"></div>
+      </LogoArea>
+      <SearchArea>
+        <Search>
+          <SearchInput placeholder="find something" type="text" />
+        </Search>
+      </SearchArea>
+      <MenuArea>
+        <ul>
+          <li>
+            <Link href={"/org/" + orgslug + "/courses"}>
+              <a>Courses</a>
+            </Link>
+          </li>
+          <li>Collections</li>
+          <li>Activity</li>
+          <li>More</li>
+        </ul>
+      </MenuArea>
+      <HeaderProfileBox></HeaderProfileBox>
+    </GlobalHeader>
+  );
+};
+
+const GlobalHeader = styled.div`
+  display: flex;
+  height: 60px;
+  background: #ffffff;
+  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.03);
+`;
+
+const LogoArea = styled.div`
+  display: flex;
+  place-items: stretch;
+`;
+
+const Logo = styled.div`
+  display: flex;
+  place-items: center;
+  padding-left: 20px;
+  a {
+    margin: 0;
+    padding-left: 10px;
+    padding-top: 2px;
+  }
+`;
+
+const SearchArea = styled.div`
+  display: flex;
+  place-items: stretch;
+  flex-grow: 2;
+`;
+
+const Search = styled.div`
+  display: flex;
+  place-items: center;
+  padding-left: 20px;
+  width: auto;
+`;
+
+const SearchInput = styled.input`
+  box-shadow: inset 5px 6px 16px rgba(0, 0, 0, 0.01);
+  background: rgb(244 242 242 / 35%);
+  border-radius: 6px;
+  height: 50%;
+  border: none;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  padding-left: 10px;
+  color: #52525220;
+`;
+
+const MenuArea = styled.div`
+  display: flex;
+  place-items: stretch;
+  flex-grow: 1;
+
+  ul {
+    display: flex;
+    place-items: center;
+    list-style: none;
+    padding-left: 20px;
+
+    li {
+      padding-right: 20px;
+      font-size: 16px;
+      font-weight: 500;
+      color: #525252;
+    }
+  }
+`;

front/components/UI/Elements/Styles/Title.tsx

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const Title = styled.h1`
+  font-size: 1.5em;
+  padding-left: 20px;
+  font-weight: 500;
+`;