Card#

import { component, render } from 'sigx';
import { Card, Button, Text } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Card class="w-80">
            <Card.Body>
                <Card.Title>Card Title</Card.Title>
                <Text as="p">This is a basic card with some content.</Text>
                <Card.Actions>
                    <Button variant="primary">Action</Button>
                </Card.Actions>
            </Card.Body>
        </Card>
    );
});

render(<Demo />, "#sandbox");

import { component, render } from 'sigx';
import { Card, Button, Text } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Card class="w-80">
            <Card.Image 
                src="https://picsum.photos/400/200" 
                alt="Random image"
                class="w-full h-48 object-cover"
            />
            <Card.Body>
                <Card.Title>Photo Card</Card.Title>
                <Text as="p">A card with an image at the top.</Text>
                <Card.Actions>
                    <Button variant="primary" size="sm">View</Button>
                </Card.Actions>
            </Card.Body>
        </Card>
    );
});

render(<Demo />, "#sandbox");

import { component, render } from 'sigx';
import { Card, Text } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Card bordered class="w-80">
            <Card.Body>
                <Card.Title>Bordered Card</Card.Title>
                <Text as="p">This card has a visible border.</Text>
            </Card.Body>
        </Card>
    );
});

render(<Demo />, "#sandbox");

import { component, render } from 'sigx';
import { Card, Text } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Card variant="compact" class="w-80">
            <Card.Body>
                <Card.Title>Compact Card</Card.Title>
                <Text as="p">Less padding for compact layouts.</Text>
            </Card.Body>
        </Card>
    );
});

render(<Demo />, "#sandbox");

import { component, render } from 'sigx';
import { Card, Button, Col, Row, Text } from '@sigx/daisyui';

const Demo = component(() => {
    const items = [
        { title: 'Project Alpha', desc: 'A cutting-edge web application' },
        { title: 'Project Beta', desc: 'Mobile-first design system' },
        { title: 'Project Gamma', desc: 'Backend API service' },
    ];
    
    return () => (
        <Row gap="4" wrap>
            {items.map(item => (
                <Card bordered class="w-72">
                    <Card.Body>
                        <Col gap="3">
                            <Card.Title>{item.title}</Card.Title>
                            <Text color="muted">{item.desc}</Text>
                            <Card.Actions>
                                <Button size="sm">Details</Button>
                            </Card.Actions>
                        </Col>
                    </Card.Body>
                </Card>
            ))}
        </Row>
    );
});

render(<Demo />, "#sandbox");