CharacterCard Library

Esta librería provee una componente UI del tipo Card creada con React, Typescript, SASS y Vite para su reutilización

Correr el proyecto de forma local

• Clonar el repositorio
• Instalar las dependencias de forma local
  • npm run i
• Correr el servidor de desarrollo
  • npm run dev
• El proyecto tiene test unitarios de 1 componente, para ejectuarlo
  • npm run test
• La version para empaquetar la libreria se encuenta en la rama lib

Utilizar la librería como dependencia en un proyecto React

• La libería se encuentra publicada en npm
• Para utilizarla puede en un proyecto React ejecute el comando
  • npm i react-character-card
• La card tiene 3 variantes
  • small

     <Card size="s">
       <Card.Top size="s">
         <Card.FavChip position="right" />
         <Card.Media imgPath={img} alt="character image" />
       </Card.Top>
       <Card.Body size="s">
         <Card.Title>Morty Smith</Card.Title>
         <Card.Text>Humano</Card.Text>
       </Card.Body>
     </Card>

  • medium

        <Card size="m">
          <Card.Top size="m">
            <Card.FavChip position="left" />
            <Card.Media imgPath={img} alt="character image" />
          </Card.Top>
          <Card.Body size="m">
            <Card.Heading>
              <Card.Column>
                <Card.Title>Morty Smith</Card.Title>
                <Card.Text>Humano</Card.Text>
              </Card.Column>
              <Card.Column>
                <Card.Chip text="Vivo" status="active" />
              </Card.Column>
            </Card.Heading>
            <Card.Box>
              <Card.Column>
                <Card.Bold>Last known location</Card.Bold>
                <Card.Text>Story Train</Card.Text>
              </Card.Column>
              <Card.Column>
                <Card.Bold>First seen in</Card.Bold>
                <Card.Text>Never Ricking Morty</Card.Text>
              </Card.Column>
            </Card.Box>
          </Card.Body>
        </Card>

  • large

        <Card size="l">
          <Card.Top size="l">
            <Card.FavChip position="left" />
            <Card.Media imgPath={img} alt="character image" />
          </Card.Top>
          <Card.Body size="l">
            <Card.Heading>
              <Card.Column>
                <Card.Title>Morty Smith</Card.Title>
                <Card.Text>Humano</Card.Text>
              </Card.Column>
              <Card.Column>
                <Card.Chip text="Vivo" status="active" />
              </Card.Column>
            </Card.Heading>
            <Card.Box>
              <Card.Column>
                <Card.Bold>Last known location</Card.Bold>
                <Card.Text>Story Train</Card.Text>
              </Card.Column>
              <Card.Column>
                <Card.Bold>First seen in</Card.Bold>
                <Card.Text>Never Ricking Morty</Card.Text>
              </Card.Column>
            </Card.Box>
          </Card.Body>
        </Card>