added show/noShow div

Author: ragad-mohammed

src/app/components/Actions/Clickable.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Clickable = (): JSX.Element  => {
+    return (
+        <div>
+        <p> this is the clickable component </p>
+        </div>
+    );
+}
+
+export default Clickable; 

src/app/components/Actions/ClickableLink.tsx

@@ -0,0 +1,36 @@
+import React, {useState} from 'react';
+
+const ClickableLink = (): JSX.Element  => {
+    //initialize showInfo to false
+    const [showInfo, setShowInfo] = useState(false);
+
+    const toggleInfo = () => {
+        //invert the value of showInfo 
+        setShowInfo(!showInfo);
+      };
+    
+
+    return (
+        <div>
+            <span
+            style={{ color: 'blue', cursor: 'pointer' }}
+            onClick={toggleInfo}
+            >
+               ThemeProvider
+            </span>
+            {/* displayed onClick 
+            logical And operator: if showInfo is true --> thes result on the righthand side is evaluated and returned 
+            */}
+            {showInfo && (
+        <div>
+            <h1>ThemeContext</h1>
+          <p>
+           theme: 'dark', toggleTheme: f(), colors: primary: bdjsbdjsbj
+          </p>
+        </div>
+      )}
+        </div>
+    );
+}
+
+export default ClickableLink; 

src/app/containers/ActionContainer.tsx

@@ -9,7 +9,7 @@ import RouteDescription from '../components/Actions/RouteDescription';
 import DropDown from '../components/Actions/DropDown';
 import { ActionContainerProps, CurrentTab, MainState, Obj, RootState } from '../FrontendTypes';
 import { Button, Switch } from '@mui/material';
-
+import ClickableLink from '../components/Actions/ClickableLink';
 /*
   This file renders the 'ActionContainer'. The action container is the leftmost column in the application. It includes the button that shrinks and expands the action container, a dropdown to select the active site, a clear button, the current selected Route, and a list of selectable snapshots with timestamps.
 */
@@ -224,7 +224,9 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
           </a>
           <SwitchAppDropdown />
           {/* add new component here for dropdown menu for useStae/ useReducer- ragad */}
+          
          <DropDown />
+          <ClickableLink /> 
           <div className='action-component exclude'>
             <Button
               className='clear-button'