NYC -> SFO 2023-03-18

paulmand3l · Mar 19, 2023 · 015b9c4 · 015b9c4
1 parent 7034961
commit 015b9c4
Show file tree

Hide file tree

Showing 425 changed files with 6,936 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "delta-inflight",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/free-regular-svg-icons": "^6.3.0",
+    "@fortawesome/free-solid-svg-icons": "^6.3.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mui/icons-material": "^5.11.11",
+    "@mui/material": "^5.11.13",
+    "date-fns": "^2.29.3",
+    "lodash": "^4.17.21",
+    "match-sorter": "^6.3.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.9.0",
+    "recoil": "^0.7.7",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.15.3",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "^3.1.0",
+    "stylus": "^0.59.0",
+    "typescript": "^4.9.3",
+    "vite": "^4.2.0"
+  }
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,17 @@
+import { useState } from 'react'
+import { RecoilRoot } from 'recoil';
+import Layout from './Layout';
+
+function App() {
+  // global hooks here
+
+  return (
+    <Layout />
+  )
+}
+
+export default () => (
+  <RecoilRoot>
+    <App />
+  </RecoilRoot>
+);
diff --git a/src/Layout/Layout.module.styl b/src/Layout/Layout.module.styl
@@ -0,0 +1,4 @@
+.Layout
+  width 100%
+  height 100%
+  display flex
diff --git a/src/Layout/Layout.tsx b/src/Layout/Layout.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import RoutePortal from './RoutePortal';
+import styles from './Layout.module.styl';
+import Sidebar from './Sidebar';
+
+interface LayoutProps extends React.ComponentPropsWithoutRef<'div'> {
+  children?: React.ReactNode
+};
+
+const Layout = (props: LayoutProps) => {
+  const {children, ...rest} = props;
+  return (
+    <div className={styles.Layout} {...rest}>
+      <Sidebar />
+      <RoutePortal />
+    </div>
+  );
+};
+
+export default Layout;
diff --git a/src/Layout/RoutePortal/Header/Header.module.styl b/src/Layout/RoutePortal/Header/Header.module.styl
@@ -0,0 +1,24 @@
+.Header
+  position absolute
+  top 0px
+  left 0px
+  width 100%
+  display: flex
+  align-items: center
+  justify-content: space-between
+  color rgba(199, 199, 199, 0.649)
+  font-size: 16pt
+  font-weight: medium
+  padding 32px 80px
+  padding-bottom: 0;
+
+  .leftStuff
+    display flex
+    align-items: center
+    gap 12px
+
+  .flightTrackerLink
+    color: rgb(2, 100, 227)
+    font-weight: bold
+    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
+    cursor: pointer
diff --git a/src/Layout/RoutePortal/Header/Header.tsx b/src/Layout/RoutePortal/Header/Header.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import styles from './Header.module.styl';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import SettingsIcon from '@mui/icons-material/Settings';
+
+interface HeaderProps extends React.ComponentPropsWithoutRef<'div'> {
+};
+
+const Header = (props: HeaderProps) => {
+  const {...rest} = props;
+  return (
+    <div className={styles.Header} {...rest}>
+      <div className={styles.leftStuff}>
+        <AccessTimeIcon />
+        4h 31m Until Arrival
+        <div className={styles.flightTrackerLink}>
+          Flight Tracker
+        </div>
+      </div>
+
+      <SettingsIcon fontSize='large'/>
+    </div>
+  );
+};
+
+export default Header;
diff --git a/src/Layout/RoutePortal/Header/index.ts b/src/Layout/RoutePortal/Header/index.ts
@@ -0,0 +1 @@
+export { default } from './Header';
diff --git a/src/Layout/RoutePortal/RoutePortal.module.styl b/src/Layout/RoutePortal/RoutePortal.module.styl
@@ -0,0 +1,5 @@
+.RoutePortal
+  background-color: rgb(18, 53, 86);
+  flex: 1
+  position relative
+  overflow hidden
diff --git a/src/Layout/RoutePortal/RoutePortal.tsx b/src/Layout/RoutePortal/RoutePortal.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import styles from './RoutePortal.module.styl';
+import Header from './Header';
+import { useRecoilValue } from 'recoil';
+import { routeAtom } from '~/store';
+import TopPicks from '~/routes/TopPicks';
+import Movies from '~/routes/Movies';
+import Shows from '~/routes/Shows';
+import Music from '~/routes/Music';
+
+interface RoutePortalProps extends React.ComponentPropsWithoutRef<'div'> {
+};
+
+const getRouteComponent = (route: string): React.ComponentType => {
+  switch (route) {
+    case 'Top Picks': return TopPicks;
+    case 'Movies': return Movies;
+    case 'Series': return Shows;
+    case 'Spotify Audio': return Music;
+  }
+
+  return TopPicks;
+};
+
+const RoutePortal = (props: RoutePortalProps) => {
+  const currentRoute = useRecoilValue(routeAtom);
+
+  const RouteComponent = getRouteComponent(currentRoute);
+
+  const {children, ...rest} = props;
+  return (
+    <div className={styles.RoutePortal} {...rest}>
+      <Header />
+      <RouteComponent />
+    </div>
+  );
+};
+
+export default RoutePortal;
diff --git a/src/Layout/RoutePortal/index.ts b/src/Layout/RoutePortal/index.ts
@@ -0,0 +1 @@
+export { default } from './RoutePortal';
diff --git a/src/Layout/Sidebar/NavLink/NavLink.module.styl b/src/Layout/Sidebar/NavLink/NavLink.module.styl
@@ -0,0 +1,13 @@
+.NavLink
+  border-bottom 1px solid rgba(0, 0, 0, 0.5)
+  opacity: 0.6
+  display flex
+  align-items: center
+  padding 20px 0px 20px 50px
+  font-weight: bold
+  font-size: 16pt
+  cursor pointer
+
+  &.active
+    background-color: rgb(2, 12, 29);
+    color: rgb(2, 100, 227)
diff --git a/src/Layout/Sidebar/NavLink/NavLink.tsx b/src/Layout/Sidebar/NavLink/NavLink.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import styles from './NavLink.module.styl';
+import { linkTappedAtom, routeAtom, showMoreAtom } from '~/store';
+import { useRecoilState, useSetRecoilState } from 'recoil';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+
+interface NavLinkProps extends React.ComponentPropsWithoutRef<'div'> {
+  route: string;
+};
+
+const NavLink = (props: NavLinkProps) => {
+  const {route, ...rest} = props;
+  const [currentRoute, setCurrentRoute] = useRecoilState(routeAtom);
+  const [currentLink, setCurrentLink] = useRecoilState(linkTappedAtom);
+  const [showMore, setShowMore] = useRecoilState(showMoreAtom);
+
+  const handleClick = () => {
+    if (route === 'More') {
+      setShowMore(!showMore);
+    } else {
+      setCurrentRoute(route);
+    }
+
+    setCurrentLink(route);
+  }
+
+  return (
+    <div className={`${styles.NavLink} ${route === currentLink ? styles.active : ''}`} onClick={handleClick} {...rest}>
+      { route }
+      { route === 'More' ? showMore ? (
+        <KeyboardArrowUpIcon fontSize='large' />
+      ) : (
+        <KeyboardArrowDownIcon fontSize='large' />
+      ) : null }
+    </div>
+  );
+};
+
+export default NavLink;
diff --git a/src/Layout/Sidebar/NavLink/index.ts b/src/Layout/Sidebar/NavLink/index.ts
@@ -0,0 +1 @@
+export { default } from './NavLink';
diff --git a/src/Layout/Sidebar/Sidebar.module.styl b/src/Layout/Sidebar/Sidebar.module.styl
@@ -0,0 +1,25 @@
+.Sidebar
+  width 232px
+  padding-top: 120px
+  position: relative
+  flex none
+
+  .logo
+    width 100px
+    position: absolute
+    top -10px
+    left 99px
+
+  .search
+    position absolute
+    left: 50px
+    bottom: 50px
+    display: flex
+    align-items: center
+    gap 15px
+    font-size 16pt
+
+    .searchicon
+      font-size 22pt
+      display flex
+      align-items: center
diff --git a/src/Layout/Sidebar/Sidebar.tsx b/src/Layout/Sidebar/Sidebar.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import logo from '~/assets/deltalogo.png';
+import NavLink from './NavLink';
+import SearchIcon from '@mui/icons-material/Search';
+import styles from './Sidebar.module.styl';
+
+interface SidebarProps extends React.ComponentPropsWithoutRef<'div'> {
+};
+
+const Sidebar = (props: SidebarProps) => {
+  const {children, ...rest} = props;
+  return (
+    <div className={styles.Sidebar}>
+      <img className={styles.logo} src={logo} />
+      <div className={styles.navlinks}>
+        <NavLink route="Top Picks" />
+        <NavLink route="Movies" />
+        <NavLink route="Series" />
+        <NavLink route="Spotify Audio" />
+        <NavLink route="My Flight" />
+        <NavLink route="About Delta" />
+        <NavLink route="Food & Drink" />
+        <NavLink route="More" />
+      </div>
+      <div className={styles.search}>
+        Search
+        <span className={styles.searchicon}>
+          <SearchIcon fontSize='inherit'/>
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default Sidebar;
diff --git a/src/Layout/Sidebar/index.ts b/src/Layout/Sidebar/index.ts
@@ -0,0 +1 @@
+export { default } from './Sidebar';
diff --git a/src/Layout/index.ts b/src/Layout/index.ts
@@ -0,0 +1 @@
+export { default } from './Layout';
diff --git a/src/assets/deltalogo.png b/src/assets/deltalogo.png
diff --git a/src/assets/deltastudio.png b/src/assets/deltastudio.png