Website Master Layout
The master kit for Dime.Scheduler websites.
Usage
footer-data.js
:
const footerCol1 = [
{ title: "Dime.Scheduler", link: "https://dimescheduler.com" },
{ title: "Media kit", link: "https://dimescheduler.com" },
{ title: "Company", link: "https://dimescheduler.com" },
{ title: "Support", link: "https://dimescheduler.com" },
{ title: "Documentation", link: "https://dimescheduler.com" },
];
const footerCol2 = [
{ title: "Privacy policy", link: "https://www.linkedin.com/company/dimesoftware" },
{ title: "Cookie policy", link: "https://www.youtube.com/channel/UCYD4LGox7SJLL7r8gmjulNA" }
];
export {
footerCol1,
footerCol2
};
footer.js
:
import React, { Component, Suspense } from 'react';
import { footerCol1 as col1, footerCol2 as col2 } from 'footer-data';
class Layout extends Component {
render() {
return (
<React.Fragment>
<Suspense fallback={Loader()}>
{/* Header component */}
{/* Body */}
{this.props.children}
{/* Footer */}
<Footer isLight={true} col1={col1} col2={col2} />
</Suspense>
</React.Fragment>
);
}
}
export default Layout;
Getting started
- Clone this repo to your local computer through
git clone
. - Set the current directory to the cloned repository and then run
yarn install && yarn run build
To make this component available to other projects on your local computer, run yarn link
.
- Then go to the project where you want to use this package and run
yarn link "ds-website-layout"
.
Finally, to fix the multiple copies of React bug that shows up with linked React packages:
- navigate to the root of the
ds-website-layout
package - run
yarn link "../path/to/your/project"
You can now import ds-website-layout
as a normal package installed from npm like so:
import Dummy from 'ds-website-layout'
...
Available props
className: string (optional)
To customize this component, pass in a class name to the className
prop and style that class name in your custom CSS.
// your-component.js
import Dummy from 'ds-website-layout'
...
<Dummy className="dummy" />
...
// your-component.css
.dummy {
color: white;
background-color: purple;
}