feat: 🚧 adding initial header structure

adding initial header structure
Seafety · Aug 8, 2024 · 5dda3ce · 5dda3ce
1 parent a6d8389
commit 5dda3ce
Show file tree

Hide file tree

Showing 9 changed files with 276 additions and 25 deletions.
diff --git a/package.json b/package.json
@@ -11,10 +11,12 @@
   },
   "dependencies": {
     "axios": "^1.7.3",
+    "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router": "^6.26.0",
-    "react-router-dom": "^6.26.0"
+    "react-router-dom": "^6.26.0",
+    "vite-plugin-svgr": "^4.2.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.8.0",

diff --git a/src/Components/Atoms/Logo/index.jsx b/src/Components/Atoms/Logo/index.jsx
@@ -1,7 +1,11 @@
 import React from "react";
-import { ReactComponent as SofttekPreviewLogo } from "../../../Assets/Logo.svg";
+import SofttekPreviewLogo from "../../../Assets/Logo.svg";
 const Logo = () => {
-  return <SofttekPreviewLogo />;
+  return (
+    <>
+      <img src={SofttekPreviewLogo} alt="" />
+    </>
+  );
 };
 
 export default Logo;
diff --git a/src/Components/Atoms/Menu/index.jsx b/src/Components/Atoms/Menu/index.jsx
@@ -1,7 +1,7 @@
 import React from "react";
-import { ReactComponent as BugerMenu } from "../../../Assets/menu.svg";
+import BugerMenu from "../../../Assets/menu.svg";
 const Menu = () => {
-  return <BugerMenu />;
+  return <img src={BugerMenu} alt="" />;
 };
 
 export default Menu;
diff --git a/src/Components/Header/Index.jsx b/src/Components/Header/Index.jsx
diff --git a/src/Components/Organisms/Header/Index.jsx b/src/Components/Organisms/Header/Index.jsx
@@ -0,0 +1,29 @@
+// Header.jsx
+import React from "react";
+import Logo from "../../Atoms/Logo";
+import { Link } from "react-router-dom";
+import Menu from "../../Atoms/Menu";
+
+const HeaderComponent = () => {
+  return (
+    <header>
+      <Logo />
+      <nav>
+        <ul>
+          <li>
+            <Link to="/">DashBoard</Link>
+          </li>
+          <li>
+            <Link to="/Contratos">Contratos</Link>
+          </li>
+          <li>
+            <Link to="/Times">Times</Link>
+          </li>
+        </ul>
+      </nav>
+      <Menu />
+    </header>
+  );
+};
+
+export default HeaderComponent;
diff --git a/src/Components/Templates/HomeTemplate/index.jsx b/src/Components/Templates/HomeTemplate/index.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Header from "../../Organisms/Header/Index";
+
+function HomeTemplate({ children }) {
+  return (
+    <>
+      <Header />
+      {children}
+    </>
+  );
+}
+
+HomeTemplate.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default HomeTemplate;
diff --git a/src/Pages/Home/index.jsx b/src/Pages/Home/index.jsx
@@ -1,9 +1,10 @@
 import React from "react";
 import { Link, Outlet } from "react-router-dom";
+import HomeTemplate from "../../Components/Templates/HomeTemplate";
 
 const Home = () => {
   return (
-    <body>
+    <HomeTemplate>
       <nav>
         <li>
           <Link to="/realtime">Real-Time</Link>
@@ -13,7 +14,7 @@ const Home = () => {
         </li>
       </nav>
       <Outlet />
-    </body>
+    </HomeTemplate>
   );
 };
 export default Home;
diff --git a/vite.config.js b/vite.config.js
@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import svgr from "vite-plugin-svgr";
 
-// https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
-})
+  plugins: [react(), svgr()],
+});