Jrts-web-jrts NPM

jrts-web-jrts

React components for jrts website

Install

npm install --save jrts-web-jrts

Usage

import React, { Component } from 'react'

import {NetlifyContactForm, Logo, SlideColRight, SlideColLeft, PostDetail, Logo , DisplayPosts} from 'jrts-web-jrts'

class Example extends Component {
  render () {
    return (
      <PostDetail client={sanityClient} {...props} />
      <DisplayPosts query={query} styling={{color: "var(--third-color)"}} url="/post/" client={props.sanityClient} />
      <SlideColRight md="6" lg="4">
        <div className={classes.HeadingAndText}>
            <h2>Responsive Design</h2>
            <p>
                We all know what a good website looks like. It’s simple, classy, easy-to-use, and modern. JRTS uses the latest front-end frameworks and builds responsive sites that look good on mobile and desktop.
            </p>
        </div>
      </SlideColRight>
      <SlideColLeft md="6" lg="5">
          <div style={{textAlign: "center"}}>
              <img className={classes.StackImg} src={Stack1} alt="" />
              <img className={classes.StackImg} src={Stack2} alt="" />
          </div>
      </SlideColLeft>
        <ButtonLinkOpaque
          btnSize="lg"
          text="Button"
         />
        <SideDrawer show={this.state.showSideDrawer}>
          <ul>
            <li><button onClick={() => this.onChangeSideDrawer()}>Close side drawer</button></li>
            <li>Two</li>
            <li>Three</li>
          </ul>
        </SideDrawer>
        <Backdrop show={this.state.showSideDrawer} clicked={() => this.onChangeSideDrawer()} />
        <BgImgOpaque 
          backgroundStyling={{ background: "black", opacity:"0.3"}}
          imageStyling={{
                height: "50vh",
                width: "100%",
                backgroundImage: `url(https://cdn.sanity.io/images/zlybple6/production/e7571c01c4fb17c6867b37c041cf240872ac64e3-840x630.jpg)`
            }}
        >
          <h1>BgImgOpaque</h1>
        </BgImgOpaque>
        <button onClick={() => this.onChangeSideDrawer()}>Side Drawer</button>
        <Modal show={this.state.showModal} modalClosed={this.onChangeModal}>
          <h1>Modal content</h1>
        </Modal>
        <button onClick={() => this.onChangeModal()}>Modal</button>
      <Logo logo={logoPic} />
      <BasicContentPreview
        title='BasicContentPreview'
        mainImgUrl="https://cdn.sanity.io/images/zlybple6/production/e7571c01c4fb17c6867b37c041cf240872ac64e3-840x630.jpg"
        styling={{margin: "30px", boxShadow: "5px 0 22px black"}}
      />
      <Hours styling={{textAlign: "center"}} hoursAndDay={hoursPerDay} title="Hours" />
      <NetlifyContactForm
        titleStyling={{fontSize: "2.5rem", textAlign: "center", color: "var(--first-color)"}}
        formStyling={{width: "100%", maxWidth: "500px"}}
        title="Get In Touch!"
        url="/"
        errorMessage="Something went wrong.."
        successMessage="Thanks! You will hear back soon!"
        textareaLabel="Message"
        textareaPlaceholder="What are you curious about?"
        buttonStyling={{border: "none", color: "white", backgroundColor: "var(--first-color)"}}
      />
    )
  }
}