Merge pull request #65 from TaylorS15/taylor-working

Taylor working

frontend/.eslintrc.cjs

@@ -34,4 +34,10 @@ module.exports = {
       },
     },
   },
+  'prettier/prettier': [
+    'error',
+    {
+      endOfLine: 'auto',
+    },
+  ],
 }

frontend/package.json

@@ -41,6 +41,7 @@
     "lint-staged": "^13.1.1",
     "postcss": "^8.4.21",
     "prettier": "^2.8.4",
+    "prettier-plugin-tailwindcss": "^0.2.2",
     "tailwindcss": "^3.2.4",
     "typescript": "^4.9.5",
     "vite": "^4.1.0"

frontend/prettier.config.cjs

@@ -1,7 +1,7 @@
 module.exports = {
   trailingComma: 'all',
   tabWidth: 2,
-  semi: false,
+  semi: true,
   singleQuote: true,
   printWidth: 80,
 }

frontend/src/App.tsx

@@ -1,11 +1,34 @@
-import './App.css'
+import { useEffect, useState } from 'react';
+import Navigation from './components/Navigation/Navigation';
+import DocsGPT from './components/DocsGPT';
+import './App.css';
 
 function App() {
+  const [isMobile, setIsMobile] = useState(true);
+
+  const handleResize = () => {
+    if (window.innerWidth > 768 && isMobile) {
+      setIsMobile(false);
+    } else {
+      setIsMobile(true);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', handleResize);
+    handleResize();
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
   return (
-    <div className="flex justify-center h-screen items-center">
-      <p className="text-6xl">DocsGPT 🦖</p>
+    <div className={`${isMobile ? 'flex-col' : 'flex-row'} flex`}>
+      <Navigation isMobile={isMobile} />
+      <DocsGPT />
     </div>
-  )
+  );
 }
 
-export default App
+export default App;

frontend/src/components/DocsGPT.tsx

@@ -0,0 +1,3 @@
+export default function DocsGPT() {
+  return <div className="md:ml-72 lg:ml-96">Docs GPT Chat Placeholder</div>;
+}

frontend/src/components/Navigation/Navigation.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import Arrow1 from './imgs/arrow.svg';
+
+function MobileNavigation() {
+  return <div>Mobile Navigation</div>;
+}
+
+function DesktopNavigation() {
+  return (
+    <div className="fixed h-screen w-72 border-r-2 border-gray-100 bg-gray-50 lg:w-96">
+      <div className="h-16 border-b-2 border-gray-100">
+        <button className="float-right mr-4 mt-5 h-5 w-5">
+          <img src={Arrow1} alt="menu toggle" className="m-auto w-3" />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default function Navigation({ isMobile }: { isMobile: boolean }) {
+  if (isMobile) {
+    return <MobileNavigation />;
+  } else {
+    return <DesktopNavigation />;
+  }
+}

frontend/src/components/Navigation/imgs/arrow.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.41 10.59L2.83 6L7.41 1.41L6 0L0 6L6 12L7.41 10.59Z" fill="black" fill-opacity="0.54"/>
+</svg>

frontend/tailwind.config.cjs

@@ -1,11 +1,13 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      spacing: {
+        112: '28rem',
+        128: '32rem',
+      },
+    },
   },
   plugins: [],
 }