Skip to content
This repository was archived by the owner on Mar 8, 2021. It is now read-only.

guildatech/components

Folders and files

NameName
Last commit message
Last commit date

Latest commit

95c2a88 · Aug 23, 2020

History

22 Commits
Mar 22, 2020
Aug 23, 2020
Mar 22, 2020
Mar 22, 2020
Mar 22, 2020
Mar 22, 2020
Mar 22, 2020
Mar 22, 2020
Mar 22, 2020
Mar 22, 2020
Aug 23, 2020
Aug 23, 2020
Mar 22, 2020

Repository files navigation

guildatech-components

Componentes react para o site da guildatech

Demo

Usage

import React, { Component } from 'react'

import { Button , Input, Section, Alert, Breadcrumb, GTEditor, Textarea, RenderHTML }from 'guildatech-components'

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      post_body: "<h5>Teste</h5> <br/> <p>paragraph</p> <hr/> <span>Okay?</span>"
    };
    this.handleChange = this.handleChange.bind(this);
  }
  componentDidMount() {
  
     this.setState({ post_body: "<h5>Teste</h5> <br/> <p>paragraph</p> <hr/> <span>Okay?</span>"});
    
  }
  handleChange(event) {
    let nam = event.target.name;
    let val = event.target.value;
    this.state[nam] = val;
    this.setState({ state: this.state });
  }
  render () {
    return (
      <div>
        <header>
          <h3>GuildaTech Components</h3>
        </header>
        <main>
          <article>
          <h4>Button</h4>
          <Button type="type" title="Button Example"></Button>            
          </article>

          <article>
          <h4>Input</h4>
          <Input
                  label="Usuário"
                  type="text"
                  id="username"
                  minLength="4"
                />
          </article>
          <article>
          <h4>Textarea</h4>
          <Textarea
                  label="Bio"
                  id="bio"
                />
          </article>

          <article>
            <h4>Section</h4>
            
          <Section></Section>
            
          </article>

          <article>
            <h4>Breadcrumb</h4>
            <Breadcrumb path="Docs" />
            <pre>
              <code>
              </code>
            </pre>
            
          </article>

          <article>
            <h4>Alert</h4>
            <Alert>Default</Alert>
            <br/>
            <Alert success>Success</Alert>
            <br/>
            <Alert danger>Danger</Alert>

            <br/>
            <Alert closable>closable</Alert>
            <br/>
            <Alert collapsible>collapsible</Alert>
            
            <br/>
            <Alert closable danger>closable</Alert>
            <br/>
            <Alert collapsible success>collapsible</Alert>
          </article>

          <article>
            <h4>Editor</h4>

            <GTEditor
                id="post_body"
                onChange={this.handleChange}
                value={this.state.post_body}
              />
          </article>

          <article>
            <h4>RenderHTML</h4>
                  <RenderHTML data={this.state.post_body} />
                </article>

        </main>
        <style jsx="true">{`
       header{
         height: 50px;
         background: var(--guildatech-color-primary)
       }
       h3 {
         margin: 0;
         padding:10px;
         color: white;
       }
       main {
        display: flex;
        align-itens: center;
        justify-content:center;
        flex-direction: column;
        padding: 50px
       }
       article {
         padding:5px;
         margin:5px;
         min-height: 100px;
         width: 80vw;
        border:1px solid var(--guildatech-color-primary)
       }
       article h4 {
         margin-top:5px;
         padding-left:10px;
         color:var(--guildatech-color-primary)
       }
        `}

        </style>
      </div>
    )
  }
}

License

MIT © GuildaTech

About

Biblioteca React de componentes para o site da guilda

Topics

Resources

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published