add shared-components

pennlabs · Feb 10, 2024 · e7f37a6 · e7f37a6
1 parent 375e9d0
commit e7f37a6
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 60 deletions.
diff --git a/frontend/degree-plan/components/NavBar/Nav.tsx b/frontend/degree-plan/components/NavBar/Nav.tsx
@@ -1,15 +1,30 @@
 import React from 'react';
-import { NavBar } from '../../styles/NavStyles';
 import Logo from './Logo';
-import { user } from '../../data/user';
+import { type User } from '../../types'
+import AccountIndicator from "pcx-shared-components/src/accounts/AccountIndicator";
+import { useRouter } from "next/router";
+import styled from "@emotion/styled"
 
-const Nav = () => {
-  const nameString = `${user.firstName} ${user.lastName}`
+const NavBarWrapper = styled.div`
+  width: 100%;
+  padding: 0 1rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
+  display: flex;
+  justify-content: space-between;
+`;
+
+const Nav = ({ user }: { user: User }) => {
+  const router = useRouter();
   return (
-    <div className="d-flex justify-content-between" style={NavBar}>
+    <NavBarWrapper>
       <Logo/>
-      <div style={{color: '#000000', fontSize: '23px'}} className='mt-3 me-4'>{nameString}</div>
-    </div>)
+      <AccountIndicator
+      leftAligned={false}
+      user={user}
+      pathname={router.pathname}
+      />
+    </NavBarWrapper>)
 }
 
 export default Nav;
diff --git a/frontend/degree-plan/next.config.js b/frontend/degree-plan/next.config.js
@@ -1,5 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  transpilePackages: ['pcx-shared-components'],
   reactStrictMode: true,
   compiler: {
     styledComponents: {
@@ -9,13 +10,4 @@ const nextConfig = {
   },
 }
 
-module.exports = {...nextConfig,
-  // async rewrites() {
-  //   return [
-  //     {
-  //       source: '/api/*',
-  //       destination: 'http://localhost:5000/api/*'
-  //     },
-  //   ]
-  // }
-}
+module.exports = nextConfig
diff --git a/frontend/degree-plan/package.json b/frontend/degree-plan/package.json
@@ -18,7 +18,6 @@
     "@types/react": "18",
     "@types/react-dom": "18",
     "axios": "^1.6.2",
-    "babel-plugin-styled-components": "^2.1.4",
     "bootstrap": "^5.2.3",
     "eslint": "8.34.0",
     "eslint-config-next": "13.2.1",
@@ -27,14 +26,15 @@
     "lodash": "^4.17.21",
     "lodash.clonedeep": "^4.5.0",
     "next": "13.2.1",
-    "react": "18",
+    "react": "^18.2.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "18",
+    "react-dom": "^18.2.0",
     "react-fuzzy": "^1.3.0",
     "react-resizable": "^3.0.5",
     "react-toastify": "^9.1.1",
-    "typescript": "4.9.5"
+    "typescript": "4.9.5",
+    "pcx-shared-components": "0.1.0"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.191"

diff --git a/frontend/degree-plan/styles/NavStyles.ts b/frontend/degree-plan/styles/NavStyles.ts
@@ -1,11 +1,3 @@
-export const NavBar = {
-    width: '100%',
-    padding: '0 1rem',
-    borderBottom: '1px solid rgba(0, 0, 0, 0.1)',
-    // backgroundColor: '#FFFFFF',
-    boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.15)'
-  };
-
 export const fourYearButtonOff = { width: 120, border: 'rgba(0, 0, 0, 0)' }
 export const navButtonOff = { width: 120, border: '1px solid rgba(0, 0, 0, 0.1)' };
 export const navButtonOn = { width: 120};
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -191,13 +191,6 @@
   dependencies:
     "@babel/types" "^7.10.1"
 
-"@babel/helper-annotate-as-pure@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882"
-  integrity sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==
-  dependencies:
-    "@babel/types" "^7.22.5"
-
 "@babel/helper-builder-binary-assignment-operator-visitor@^7.10.1":
   version "7.10.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.10.3.tgz#4e9012d6701bef0030348d7f9c808209bd3e8687"
@@ -329,7 +322,7 @@
   dependencies:
     "@babel/types" "^7.10.3"
 
-"@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.22.5":
+"@babel/helper-module-imports@^7.16.7":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0"
   integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==
@@ -361,11 +354,6 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.3.tgz#aac45cccf8bc1873b99a85f34bceef3beb5d3244"
   integrity sha512-j/+j8NAWUTxOtx4LKHybpSClxHoq6I91DQ/mKgAXn5oNUPIUiGppjPIX3TDtJWPrdfP9Kfl7e4fgVMiQR9VE/g==
 
-"@babel/helper-plugin-utils@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz#dd7ee3735e8a313b9f7b05a773d892e88e6d7295"
-  integrity sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==
-
 "@babel/helper-regex@^7.10.1":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.10.1.tgz#021cf1a7ba99822f993222a001cc3fec83255b96"
@@ -674,13 +662,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.1"
 
-"@babel/plugin-syntax-jsx@^7.22.5":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.23.3.tgz#8f2e4f8a9b5f9aa16067e142c1ac9cd9f810f473"
-  integrity sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-
 "@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
@@ -5080,17 +5061,6 @@ babel-plugin-named-asset-import@^0.3.6:
     babel-plugin-syntax-jsx "^6.18.0"
     lodash "^4.17.11"
 
-babel-plugin-styled-components@^2.1.4:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz#9a1f37c7f32ef927b4b008b529feb4a2c82b1092"
-  integrity sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.22.5"
-    "@babel/helper-module-imports" "^7.22.5"
-    "@babel/plugin-syntax-jsx" "^7.22.5"
-    lodash "^4.17.21"
-    picomatch "^2.3.1"
-
 [email protected], babel-plugin-syntax-jsx@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"