Tarjeta (Card)

Las tarjetas (cards) son superficies que muestran contenido y acciones sobre un solo tema. Deben ser fáciles de escanear en busca de información relevante y procesable. Las tarjetas se pueden usar para una amplia variedad de propósitos, que incluyen mostrar información, como acciones en las que se puede hacer clic o como elementos interactivos de la interfaz de usuario (UI).

Uso

Importa el Card de @firecms/ui y envuelve el contenido que deseas mostrar en la tarjeta. También puedes hacer que se pueda hacer clic en la tarjeta proporcionando un controlador onClick.

Tarjeta básica

Representa el uso básico de una tarjeta para mostrar contenido.

import React from "react";
import { Card } from "@firecms/ui";

export default function CardBasicDemo() {
    return (
        <Card className={"p-4"}>
            Content within a basic card.
        </Card>
    );
}

Tarjeta clicable

Muestra una tarjeta que tiene un evento onClick, lo que hace que se comporte de manera similar a un botón.

import React from "react";
import { Card } from "@firecms/ui";

export default function CardClickableDemo() {
    const handleClick = () => {
        console.log("Card clicked!");
    };

    return (
        <Card className={"p-4"} onClick={handleClick}>
            Clickable card content.
        </Card>
    );
}

Estilo personalizado

Demuestra cómo se pueden aplicar clases o estilos adicionales a la tarjeta para una apariencia personalizada.

import React from "react";
import { Card } from "@firecms/ui";

export default function CardCustomStyleDemo() {
    const styles = {
        padding: '20px',
        color: "red",
        backgroundColor: '#f9f9f9',
        borderRadius: '8px',
        boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
    };

    return (
        <Card style={styles}>
            Card with custom styling.
        </Card>
    );
}