jam-cloud/jam-ui/src/components/jamtracks/JKJamTracksLandingTemplateP...

58 lines
2.0 KiB
JavaScript

import React, {useContext} from "react";
import { BrowserRouter as Router, ReactDOM } from "react-router-dom";
import JKJamTracksLandingBody from "./JKJamTracksLandingBody";
import AppContext from "../../context/Context";
import {useResponsive} from "@farfetch/react-context-responsive";
import {Navbar} from "reactstrap";
import {topNavbarBreakpoint} from "../../config";
import Logo from "../navbar/Logo";
import {BrowserQueryProvider} from "../../context/BrowserQuery";
import Footer from "../footer/JKFooter";
const TemplatePage = ({ id, plan_code, slug, artist, song, location}) => {
console.log('TemplatePage', id, plan_code, slug, artist, song, location);
const {
isFluid,
isTopNav,
} = useContext(AppContext);
const { greaterThan } = useResponsive();
const paddingClass = greaterThan.sm ? "px-6" : "px-1";
return (
<Router location={location} context={{}}>
<div className={isFluid ? 'container-fluid' : 'container'}>
<div className="content">
<Navbar
light
color="white"
className={`navbar-glass fs--1 font-weight-semi-bold row navbar-top sticky-kit mb-3 py-3 ${paddingClass}`}
expand={isTopNav && topNavbarBreakpoint}
>
<Logo at="navbar-top" id="topLogo" width={240}/>
</Navbar>
<div className={`pt-3 row ${paddingClass}`}>
<BrowserQueryProvider>
<JKJamTracksLandingBody id={id} plan_code={plan_code} slug={slug} song={song} artist={artist}
provided_jam_track={null}/>
</BrowserQueryProvider>
</div>
{/* <div className='px-6 row'> */}
<Footer/>
{/* </div> */}
</div>
</div>
</Router>
);
};
export default TemplatePage;