fix: refactor files

feat: refactor more files feat: uppercase component folder 1/2 feat: uppercase component folder 2/2
2025-12-19 04:19:25 +00:00 · 2022-12-02 22:23:52 +01:00 · 2022-12-02 22:23:52 +01:00 · d361e68dc0
commit d361e68dc0
parent a371394670
31 changed files with 101 additions and 117 deletions
--- a/front/components/UI/Elements/Menu.tsx
+++ b/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;
+    }
+  }
+`;
--- a/front/components/UI/Elements/Styles/Title.tsx
+++ b/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;
+`;
--- a/front/components/UI/Header.tsx
+++ b/front/components/UI/Header.tsx
@ -0,0 +1,13 @@
+import React from "react";
+import Link from 'next/link'
+import styled from "styled-components";
+
+
+export const Header = () => {
+  return (
+    <div>
+    </div>
+  );
+};
+
+
--- a/front/components/UI/Layout.tsx
+++ b/front/components/UI/Layout.tsx
@ -0,0 +1,72 @@
+import React from "react";
+import Head from "next/head";
+import styled from "styled-components";
+import AuthProvider from "../Security/AuthProvider";
+import { motion } from "framer-motion";
+import { Menu } from "./Elements/Menu";
+
+const Layout = (props: any) => {
+  const variants = {
+    hidden: { opacity: 0, x: 0, y: 0 },
+    enter: { opacity: 1, x: 0, y: 0 },
+    exit: { opacity: 0, x: 0, y: 0 },
+  };
+
+  return (
+    <div>
+      <AuthProvider>
+        <Head>
+          <title>{props.title}</title>
+          <meta name="description" content={props.description} />
+          <link rel="icon" href="/favicon.ico" />
+        </Head>
+        <PreAlphaLabel>🚧 Pre-Alpha</PreAlphaLabel>
+        <Menu></Menu>
+        <motion.main
+          variants={variants} // Pass the variant object into Framer Motion
+          initial="hidden" // Set the initial state to variants.hidden
+          animate="enter" // Animated state to variants.enter
+          exit="exit" // Exit state (used later) to variants.exit
+          transition={{ type: "linear" }} // Set the transition to linear
+          className=""
+        >
+          <Main className="min-h-screen">{props.children}</Main>
+        </motion.main>
+        <Footer>
+          <p>LearnHouse © 2021 - {new Date().getFullYear()} - All rights reserved</p>
+        </Footer>
+      </AuthProvider>
+    </div>
+  );
+};
+
+const Main = styled.main`
+  min-height: 100vh;
+`;
+
+const Footer = styled.footer`
+  display: flex;
+  justify-content: center;
+  margin: 20px;
+  font-size: 16px;
+
+  img {
+    width: 20px;
+    opacity: 0.4;
+    display: inline;
+  }
+`;
+
+export const PreAlphaLabel = styled.div`
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  padding: 9px;
+  background-color: #080501;
+  color: white;
+  font-size: 19px;
+  font-weight: bold;
+  border-radius: 5px 0 0 0px;
+`;
+
+export default Layout;