Cartão (Card)

Cards são superfícies que exibem conteúdo e ações sobre um único tema. Devem ser fáceis de escanear para informações relevantes e acionáveis. Cards podem ser usados para uma grande variedade de propósitos, incluindo exibir informações, como ações clicáveis ou como elementos interativos da interface.

Uso

Importe o Card de @firecms/ui e envolva o conteúdo que deseja exibir no card. Você também pode tornar o card clicável fornecendo um manipulador onClick.

Card básico

Representa o uso básico de um card para exibir conteúdo.

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

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

Card clicável

Mostra um card que tem um evento onClick, fazendo-o se comportar de forma semelhante a um botão.

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

Demonstra como classes ou estilos adicionais podem ser aplicados ao card para uma aparência 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>
    );
}