https://github.com/alvaromartincrespo/component-catalog
https://github.com/alvaromartincrespo/component-catalog
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/alvaromartincrespo/component-catalog
- Owner: AlvaroMartinCrespo
- Created: 2024-10-21T14:43:28.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-10-31T16:20:43.000Z (8 months ago)
- Last Synced: 2025-01-21T04:41:46.635Z (5 months ago)
- Language: JavaScript
- Size: 332 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Catálogo de Componentes
Este proyecto es un catálogo de componentes reutilizables en React, que incluye diversos elementos de interfaz de usuario como botones, modales y contenedores. Cada componente está diseñado para ser flexible y fácil de personalizar.
## Contenido
- [Instalación](#instalación)
- [Componentes](#componentes)
- [Botón Personalizado](#botón-personalizado)
- [Modal](#modal)
- [Contenedor Responsive](#contenedor-responsive)
- [Image](#images)
- [Text](#texts)
- [Toast](#toasts)
- [Accordion](#Accordion)
- [Loader](#loader)
- [Carrousel](#carrousel)
- [Input](#inputs)
- [Uso](#uso)
## Instalación
Para instalar este proyecto, sigue estos pasos:
1. Clona el repositorio:
```bash
git clone https://github.com/AlvaroMartinCrespo/catalago-componentes.git
cd catalogo-componentes
```
2. Instalación de dependencias:
```bash
npm install
```
3. Iniciar la aplicación:
```bash
npm run dev
```
## Componentes
### Botón Personalizado
Un botón reutilizable con diferentes variantes y tamaños.
#### Props
- **label**: Texto del botón (por defecto: "Click Me").
- **variant**: Estilo del botón (`primary`, `secondary`, `success`, `error`).
- **size**: Tamaño del botón (`small`, `medium`, `large`).
- **onClick**: Función que se ejecuta al hacer clic.
#### Ejemplo de Uso
```jsx
import CustomButton from './customButton';
alert('Button clicked!')}
/>
```
### Modal
Un modal que se puede abrir y cerrar con contenido personalizado.
#### Props
- **isOpen**: Booleano que determina si el modal está visible.
- **onClose**: Función para cerrar el modal.
- **title**: Título del modal (por defecto: "Modal Title").
- **children**: Contenido que se mostrará dentro del modal.
#### Ejemplo de Uso
```jsx
import React, { useState } from 'react';
import Modal from './modal';
function App() {
const [isModalOpen, setIsModalOpen] = useState(false);
const openModal = () => setIsModalOpen(true);
const closeModal = () => setIsModalOpen(false);
return (
Open Modal
This is the content inside the modal!
);
}
```
### Contenedor Responsive
Un contenedor flexible que se adapta a diferentes tamaños de pantalla.
#### Props
- **children**: Contenido que se mostrará dentro del contenedor.
#### Ejemplo de Uso
```jsx
import Container from './container';
function App() {
return (
Your content goes here!
);
}
```
### Texts
Un componente de texto simple y responsive para React que permite la personalización del tamaño, color, grosor de fuente y alineación.
#### Props
- **size**: Tamaño del texto (ejemplo: "1rem").
- **color**: Color del texto (ejemplo: "darkblue").
- **weight**: Grosor de la fuente (ejemplo: "bold").
- **align**: Alineación del texto (ejemplo: "center").
#### Ejemplo de Uso
```jsx
import Text from './Text';
function App() {
return (
Texto responsive que se adapta al tamaño de pantalla.
);
}
```
### Inputs
Un componente de entrada simple y responsive para React que permite la personalización del tipo, tamaño, color y estilos adicionales.
#### Props
- **type**: Especifica el tipo de entrada (ejemplo: "text", "email", "password").
- **placeholder**: Texto que se muestra cuando el campo está vacío.
- **color**: Color del borde del input.
- **Value**: Texto ya definido.
#### Ejemplo de Uso
```jsx
import Input from './Input';
function App() {
return (
);
}
```
### Cards
Este componente Card ofrece un diseño limpio y moderno que es responsive y puede adaptarse a diferentes estilos.
#### Props
- **Image**: URL de la imagen que se mostrará en la parte superior de la card (opcional).
- **title**: Título de la card.
- **description**: Descripción o texto adicional de la card.
- **actions**: Elementos adicionales (botones o enlaces) para mostrar en la parte inferior de la card (opcional).
#### Ejemplo de Uso
```jsx
import Card from './Card';
function App() {
return (
Acción 1
Acción 2
>
}
/>
);
}
export default App;
```
### Loader
Este Loader es flexible y adaptable a pantallas pequeñas, y sus colores y tamaños se pueden personalizar fácilmente para distintos escenarios en la interfaz de usuario.
#### Props
- **size**: Controla el tamaño del loader.
- **color**: Define el color de la parte visible del loader.
#### Ejemplo de Uso
```jsx
import Loader from './Loader';
function App() {
return (
{/* Loader verde, tamaño grande */}
{/* Loader rojo, tamaño mediano */}
{/* Loader amarillo, tamaño pequeño */}
);
}
export default App
```
### Accordion
Este Accordion permite personalizar el color del encabezado y el borde, haciéndolo más adaptable a diferentes esquemas de color en la interfaz.
#### Props
- **title**: El título del encabezado del acordeón
- **children**: Contenido del acordeón que se muestra al expandirse
- **isOpen**: Determina si el acordeón está expandido al montarse
- **color**: El color principal para el encabezado y el borde
#### Ejemplo de Uso
```jsx
import Accordion from './Accordion';
function App() {
return (
Este es el contenido adicional que se despliega al hacer clic.
Este acordeón está abierto por defecto. Puedes cerrarlo o abrirlo haciendo clic en el encabezado.
);
}
```
### Image
#### Props
- **src**: La URL de la imagen.
- **alt**: Texto alternativo con un valor predeterminado.
- **width height**: Dimensiones personalizables para adaptar la imagen
- **borderRadius**: Curvatura de las esquinas de la imagen
- **objectFit**: Permite definir el ajuste de la imagen (cover, contain, fill, none, scale-down).
#### Ejemplo de Uso
```jsx
import Image from './Image';
function App() {
return (
);
}
export default App;
```
## Uso
Para usar cualquiera de los componentes, simplemente impórtalos en tu archivo y agrégales las propiedades necesarias según lo que necesites.