Merge pull request #11 from oslabs-beta/ted-module

Ted module 2

Author: mdtagg

app/App.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import Splash from './components/Splash';
+import Splash from './components/Splash/Splash';
 import DashboardContainer from './containers/DashboardContainer';
 import './stylesheets/scrollBar.scss';
 

app/components/About/About.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import './style.scss';
+import './styles.scss';
 import TeamMembers from './TeamMembers';
 import PastContributors from './PastContributors';
 import { useStylingContext } from './StylingContext';

app/components/About/style.scss app/components/About/styles.scssapp/components/About/style.scss renamed to app/components/About/styles.scss

@@ -1,4 +1,4 @@
-@import '../../constants.scss';
+@import '../../stylesheets/constants.scss';
 
 .contact {
   display: flex;

app/components/Contact.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { DashboardContext } from '../../context/DashboardContext';
-import './FirstLaunch.scss'
+import './styles.scss'
 
 //  THIS FILE IS NOT DOING ANYTHING RIGHT NOW
 const FirstLaunch: React.FC = React.memo(() => {

app/components/Contact/style.scss app/components/Contact/styles.scssapp/components/Contact/style.scss renamed to app/components/Contact/styles.scss

@@ -0,0 +1,47 @@
+import React, { useContext, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ApplicationContext } from '../../context/ApplicationContext';
+import { DashboardContext } from '../../context/DashboardContext';
+import './styles.scss';
+import ServiceDropdown from './ServiceDropdown';
+import LiveToggle from './LiveToggle';
+
+interface HeaderProps {
+    app: any;  // Consider defining a more specific type if possible
+    service?: string;  // Marking as optional if not all usages of Header need the service
+    live?: boolean;  // Optional boolean for live status
+    setLive?: React.Dispatch<React.SetStateAction<boolean>>;  // Optional function to change live status
+  }
+  
+
+  const Header: React.FC<HeaderProps> = ({ app, service, live, setLive }) => {
+  const navigate = useNavigate();
+  const { servicesData } = useContext(ApplicationContext);
+  const { mode } = useContext(DashboardContext);
+  const [selectModal, setSelectModal] = useState(false);
+  const [selectedServices, setSelectedServices] = useState([]);
+  const toggleDropdown = () => {
+    setSelectModal(!selectModal);
+  };
+
+  const handleServices = () => {
+    const path = `/applications/${app}/${selectedServices.join(' ')}`;
+    navigate(path);
+  };
+
+  return (
+    <div className="microservice-header">
+      <h1 className="microserviceTitle">{app}</h1>
+      <ServiceDropdown
+        servicesData={servicesData}
+        selectedServices={selectedServices}
+        setSelectedServices={setSelectedServices}
+        isOpen={selectModal}
+        toggleDropdown={toggleDropdown}
+      />
+       <LiveToggle live={live} toggleLive={() => setLive && setLive(!live)} />
+    </div>
+  );
+};
+
+export default Header;