Componente de tarjeta ReactJS Chakra-UI

Chakra UI es una biblioteca de componentes moderna para React creada por Segun Adebayo para crear aplicaciones front-end. Proporciona accesibilidad, simplicidad y modularidad, lo que la convierte en una poderosa biblioteca con más de 50 componentes. Chakra UI viene con documentación concisa y escrutable que facilita la creación de un componente accesible y acelera el proceso de creación. En el momento de escribir este artículo, el repositorio de GitHub de Chakra-UI tiene 19.400 estrellas y se ha bifurcado 1.600 veces. Si eres fanático de los emoticonos y el sistema de estilo, adoptar Chakra es una obviedad, la biblioteca se construye utilizando esas tecnologías como base. En este artículo, aprenderemos cómo crear un componente de tarjeta usando Chakra-UI.

Enfoque: dado que la interfaz de usuario de Chakra no tiene un componente de tarjeta existente, utilizaremos sus componentes flexibles y abstractos para crear la tarjeta completa. 

En el archivo App.js, importe los componentes Box, Image, Stack, Badge, Flex, Spacer y Text .

• Box: Es el componente más abstracto, representa un elemento div por defecto. Puede crear fácilmente estilos receptivos y pasar estilos a través de accesorios.
• Imagen: el componente de imagen se usa para mostrar imágenes, así como para diseñar y agregar estilos receptivos,
• Apilar: es un componente de diseño que se utiliza para apilar elementos y aplicar un espacio entre ellos.
• Flex y espaciador: se utiliza para crear un diseño receptivo donde los elementos secundarios ocupan el 100% del ancho manteniendo el mismo espacio entre ellos.
• Texto: se utiliza para representar texto y párrafos dentro de una interfaz.

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

  cd foldername

• Paso 3: después de crear la aplicación ReactJS, instale los módulos de interfaz de usuario de Chakra con el siguiente comando:

  npm i @chakra-ui/react @emotion/react@^11 
      @emotion/styled@^11 framer-motion@^4

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

A continuación se muestra la implementación del enfoque anterior:

Ejemplo:

import React from "react";
import { Box, Image, Badge, Text, Stack, 
    useColorMode, Button, Flex, Spacer } 
    from "@chakra-ui/react";
  
function App() {
  
  // Hook to toggle dark mode
  const { colorMode, toggleColorMode} = useColorMode();
    
  return (
    <div className="app">
      <Button onClick={toggleColorMode} mt={5}>
        Toggle { colorMode === "light" ? "Dark" : "Light"}
      </Button>
      <Box w="300px" rounded="20px" 
           overflow="hidden" bg={ colorMode === "dark" ? "gray
      .700": "gray.200"} mt={10}>
        <Image src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210727094649/img1.jpg"
               alt="Card Image" boxSize="300px">
        </Image>
        <Box p={5}>
          <Stack align="center">
            <Badge variant="solid" colorScheme="green" 
              rounded="full" px={2}>
            GeeksForGeeks
            </Badge>
          </Stack>
          <Stack align="center">
            <Text as="h2" fontWeight="normal" my={2} >
              A Computer Science Portal for Geeks
            </Text>
            <Text fontWeight="light">
              A platform for students to study CSE concepts.
            </Text>
          </Stack>
          <Flex>  
            <Spacer />
            <Button variant="solid" 
              colorScheme="green" size="sm">
                Learn More
            </Button>
          </Flex>
        </Box>
      </Box>
    </div>
  );
}
  
export default App;

Para que la interfaz de usuario de Chakra funcione, debe configurar ChakraProvider en la raíz de su aplicación.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ChakraProvider, ColorModeScript } from "@chakra-ui/react";
  
ReactDOM.render(
  <React.StrictMode>
    <ChakraProvider>
      <ColorModeScript initialColorMode="light"></ColorModeScript>
      <App />
    </ChakraProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Paso para ejecutar la aplicación:
 ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto.

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida.

Referencia: https://chakra-ui.com/docs/getting-started