VisulCard Components

VisulCard Components é uma lib focada em componentes desenvolvidos utilizando react e chakra-ui para facilitar a construtução de cartões de visita online.

Uso/Exemplos

Redes Sociais

import { RedesSociais } from 'visulcard-components'
import { Box, Center } from '@chakra-ui/react';
import react from './assets/react.svg'

function App() {
  const itens = [
    {
      link: "https://www.instagram.com/visulcard/",
      icon: react,
      titulo: "instagram",
      descricao: "@visulCard",
      boxSize: "50px",
      color: "#FFFFFF"
    },
    {
      link: "https://www.instagram.com/visulcard/",
      icon: react,
      titulo: "instagram",
      descricao: "@visulCard",
      boxSize: "50px",
      color: "#FFFFFF"
    },
    {
      link: "https://www.instagram.com/visulcard/",
      icon: react,
      titulo: "instagram",
      descricao: "@visulCard",
      boxSize: "50px",
      color: "#FFFFFF"
    }
  ]
  return (
    <>
      <Box w={"full"} h={"100vh"} bgGradient={"linear-gradient(180deg, #000000 0%, #A14DFF 100%)"}>
        <Center>
          <Box w={"100%"} maxW={'800px'} >
            <RedesSociais
              itens={itens}
              colorBg={"#A14DFF"}
              borderRadius={"15px"}
              colorTitulo={"#FFFFFF"}
            />
          </Box>
        </Center>
      </Box>

    </>
  )
}

export default App

Este componente recebe um array de itens com as seguintes propriedades:

itensRedesSociais {
    link: string,
    icon: any,
    titulo: string,
    descricao: string,
    boxSize: string,
    color: string
}

###Retorno do componente visual