diff --git a/src/app/api/website/NavMap/index.ts b/src/app/api/website/NavMap/index.ts deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/api/website/route.ts b/src/app/api/website/navigation-map/route.ts similarity index 81% rename from src/app/api/website/route.ts rename to src/app/api/website/navigation-map/route.ts index ffa255a..35b5e75 100644 --- a/src/app/api/website/route.ts +++ b/src/app/api/website/navigation-map/route.ts @@ -1,12 +1,11 @@ +import { NavMap } from "@datatypes/NavMap"; import { NextRequest, NextResponse } from "next/server"; -// I want to use this path to store the navmap of the website and in a get request, return the navmap - export async function GET(req: NextRequest) { - const navmap = [ + const navMap: NavMap[] = [ { title: 'Business', - videoUrl: '/media/videos/navMenu/business.webm', + videoUrl: '/videos/navmenu/business.webm', items: [ { title: 'About Us', @@ -28,7 +27,7 @@ export async function GET(req: NextRequest) { }, { title: 'Media Network', - videoUrl: '/media/videos/navMenu/media-network.webm', + videoUrl: '/videos/navmenu/media-network.webm', items: [ { title: 'Business and Brands', @@ -50,7 +49,7 @@ export async function GET(req: NextRequest) { }, { title: 'Education & Teaching', - videoUrl: '/media/videos/navMenu/education-and-teaching.webm', + videoUrl: '/videos/navmenu/education-and-teaching.webm', items: [ { title: 'Resources', @@ -68,7 +67,7 @@ export async function GET(req: NextRequest) { }, { title: 'Collaborators', - videoUrl: '/media/videos/navMenu/collaborators.webm', + videoUrl: '/videos/navmenu/collaborators.webm', items: [ { title: 'Explorers', @@ -82,7 +81,7 @@ export async function GET(req: NextRequest) { }, { title: 'Partners', - videoUrl: '/media/videos/navMenu/partners.webm', + videoUrl: '/videos/navmenu/partners.webm', items: [ { title: 'Corporate & Foundations', @@ -96,7 +95,7 @@ export async function GET(req: NextRequest) { }, { title: 'Commercial', - videoUrl: '/media/videos/navMenu/commercial.webm', + videoUrl: '/videos/navmenu/commercial.webm', items: [ { title: 'Advertise with Us', @@ -113,6 +112,6 @@ export async function GET(req: NextRequest) { ], }, ]; - - return NextResponse.json(navmap); + + return NextResponse.json(navMap); }; \ No newline at end of file diff --git a/src/components/navigation/NavMenu/Megamenu/index.tsx b/src/components/navigation/NavMenu/Megamenu/index.tsx index b19eb0d..19b5c60 100644 --- a/src/components/navigation/NavMenu/Megamenu/index.tsx +++ b/src/components/navigation/NavMenu/Megamenu/index.tsx @@ -1,15 +1,15 @@ import React, { Fragment } from 'react'; -import menuItems from './menuItems'; import { styled } from '@mui/material'; import NavGropus from './NavGroups'; import { MegamenuStateProvider } from '@helpers/MegamenuStateProvider'; +import { NavMap } from '@datatypes/NavMap'; +import { useNavMapContext } from '@helpers/NavMapProvider'; interface MegamenuSectionProps extends React.HTMLAttributes { - children: React.ReactNode; - numberOfItems?: number; + children?: React.ReactNode; }; -const MegamenuSection = styled('section')(({ theme, numberOfItems }) => ({ +const MegamenuSection = styled('section')(({ theme }) => ({ gridColumn: '1 / 25', gridRow: '3 / 19', zIndex: theme.Shadows.high.zIndex, @@ -47,10 +47,11 @@ const MegamenuSection = styled('section')(({ theme, number })); const Megamenu = () => { + const { data } = useNavMapContext(); return ( - {menuItems.map((item, index) => ( + {data?.map((item, index) => ( = ({ countDown = 1000, transitionTime = 1000, }) => { - const [data, setData] = React.useState(); - + const [data, setData] = React.useState({} as Darshan[]); + + const fetchData = React.useCallback(async () => { + const response = await fetch('/api/website/bharat-darshan'); + const data = await response.json(); + setData(data); + }, []); + React.useEffect(() => { - const fetchData = async () => { - const response = await fetch('/api/website/bharat-darshan'); - const data = await response.json(); - setData(data); - }; fetchData(); - }, []); + }, [fetchData]); - console.log(data); return (
Chatak
) diff --git a/src/containers/Footer/index.tsx b/src/containers/Footer/index.tsx index 073a632..f668951 100644 --- a/src/containers/Footer/index.tsx +++ b/src/containers/Footer/index.tsx @@ -7,7 +7,7 @@ const BlankTop = styled(Box)(({ theme }) => ({ height: theme.Heights.header.default, width: '50%', marginTop: theme.Spaces.xs, - borderBottom: '1.5px solid ' + theme.palette.secondary.dark, + borderBottom: '3px solid ' + theme.palette.secondary.dark, })); const FooterBox = styled(Box)(({ theme }) => ({ diff --git a/src/datatypes/NavMap.d.ts b/src/datatypes/NavMap.d.ts new file mode 100644 index 0000000..e6050cf --- /dev/null +++ b/src/datatypes/NavMap.d.ts @@ -0,0 +1,10 @@ +export type NavItem = { + title: string; + link: string; +}; + +export type NavMap = { + title: string; + videoUrl: string; + items: NavItem[]; +}; \ No newline at end of file diff --git a/src/helpers/NavMapProvider.tsx b/src/helpers/NavMapProvider.tsx new file mode 100644 index 0000000..e1803b3 --- /dev/null +++ b/src/helpers/NavMapProvider.tsx @@ -0,0 +1,37 @@ +import { NavMap } from '@datatypes/NavMap'; +import React from 'react'; + +interface NavMapContextValue { + data?: NavMap[]; + fetchData: () => Promise; +} + +export const NavMapContext = React.createContext({ + fetchData: async () => {}, +}); + +interface NavMapProviderProps { + children: React.ReactNode; +} + +export const NavMapProvider: React.FC = ({ children }) => { + const [data, setData] = React.useState(); + + const fetchData = React.useCallback(async () => { + const response = await fetch('/api/website/navigation-map'); + const data = await response.json(); + setData(data); + }, []); + + React.useEffect(() => { + fetchData(); + }, [fetchData]); + + return ( + + {children} + + ); +}; + +export const useNavMapContext = () => React.useContext(NavMapContext); \ No newline at end of file diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx index 9101dc3..c3894a9 100644 --- a/src/layouts/MainLayout.tsx +++ b/src/layouts/MainLayout.tsx @@ -5,6 +5,7 @@ import Navbar from '@components/navigation/NavBar'; import NavMenu from '@components/navigation/NavMenu'; import { styled } from '@mui/material'; import Footer from '@containers/Footer'; +import { NavMapProvider } from '@helpers/NavMapProvider'; const StyledMain = styled('main')(({ theme }) => ({ width: '100%', @@ -13,14 +14,16 @@ const StyledMain = styled('main')(({ theme }) => ({ const MainLayout: React.FC = ({ children, ...props }) => { return ( - - - - - {children} - -