This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@dimescheduler/ds-website-layout

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;
}