Wanhenri / Projeto-ERP

0 stars 0 forks source link

card component for blog about tools #23

Closed Wanhenri closed 4 years ago

Wanhenri commented 4 years ago

Using the card component to create a blog about the tools used in the project.

Wanhenri commented 4 years ago

Using map() to pass the parameters of the json file created inside the assent directory.

      <BlogContainer>
      {jobs.map((job) =>  
        <Card key={job.id} style={{ maxWidth: 470 }}>
          <Strong>{job.titleCard}</Strong>
          <InfoBlogWrapper>
            <DateBlog>
              <FaCalendarAlt size={26} style={{ paddingRight: "10px" }} />
              {job.dateblog}
            </DateBlog>
            <DateBlog>
              <FaComments size={26} style={{ paddingRight: "10px" }} />
              {job.coment}
            </DateBlog>
          </InfoBlogWrapper>
          <Title content={job.title} />
          <Subtitle content={job.subtitle} />
          <Text >
          {job.text.join('\n')}
          </Text>
        </Card> 
        )}            
      </BlogContainer>

json file

[
    {
        "id":1,
        "titleCard":"Pipenv",
        "dateblog":"Julho 15, 2020",
        "coment":"Comentários",
        "title":"Desenvolvendo ambientes",
        "subtitle":"teste",
        "text":[ 
        "Realizando um teste simples",
        "com a união de frases diversas", 
        "para a concatenação das mesmas", 
        "fim"
        ]

    },
    {
        "id":2,
        "titleCard":"flask_sqlalchemy",
        "dateblog":"Julho 16, 2020",
        "coment":"Comentários",
        "title":"Criação de banco de dados",
        "subtitle":"teste",
        "text":[ 
            "bora testar",
            "escrevendo babozeiras", 
            "teste3", 
            "fim"
            ]

    },
    {
        "id":3,
        "titleCard":"Flask",
        "dateblog":"Julho 17, 2020",
        "coment":"Comentários",
        "title":"Criação de um backend",
        "subtitle":"teste",
        "text":[ 
            "Lorem Ipsum is simply dummy text of the printing and typesetting",
            "industry. Lorem Ipsum has been the industry's standard dummy text", 
            "since the 1500s, when an unknown printer took a galley of type and", 
            "scrambled it to make a type specimen book. It has survived not"
            ]
    }
]
Wanhenri commented 4 years ago

I had a big problem creating a text file inside the json file. the solution:

        "text":[ 
            "bora testar",
            "escrevendo babozeiras", 
            "teste3", 
            "fim"
            ]

I used join()

job.text.join('\n')

font: https://www.gun.io/blog/multi-line-strings-in-json

Wanhenri commented 4 years ago

finished