Modulating frontend

frontend/src/components/MainLayout.tsx

@@ -1,19 +1,22 @@
 import React from 'react';
-import { Container, Space } from '@mantine/core';
+import { Container, Space, Tabs } from '@mantine/core';
 import Footer from './Footer';
 import Header from './Header';
 
 function MainLayout({ children }:{ children:any }) {
-  return <>
-      
-            <Header/>
-            <Space h="xl" />
-            <Container size="xl" style={{minHeight:"57.5vh"}}>
-                {children}
-            </Container>
-            <Space h="xl" />
-            <Footer />
-
+  return <>  
+      <Header/>
+      <Tabs grow variant="pills">
+        <Tabs.Tab label="Regex Prox"></Tabs.Tab>
+        <Tabs.Tab label="Port Hijacking"></Tabs.Tab>
+        <Tabs.Tab label="Netfilter regex"></Tabs.Tab>
+      </Tabs>
+      <Space h="xl" />
+      <Container size="md" style={{minHeight:"57.5vh"}}>
+          {children}
+      </Container>
+      <Space h="xl" />
+      <Footer />
   </>
 }