Link#

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

const Demo = component(() => {
    return () => (
        <Text>
            Read the <Link href="/daisyui/docs/getting-started/">getting started guide</Link> first.
        </Text>
    );
});

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

import { component, render } from 'sigx';
import { Link, Row } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Row gap="4" wrap>
            <Link href="#">Default</Link>
            <Link href="#" color="primary">Primary</Link>
            <Link href="#" color="secondary">Secondary</Link>
            <Link href="#" color="accent">Accent</Link>
            <Link href="#" color="neutral">Neutral</Link>
            <Link href="#" color="info">Info</Link>
            <Link href="#" color="success">Success</Link>
            <Link href="#" color="warning">Warning</Link>
            <Link href="#" color="error">Error</Link>
        </Row>
    );
});

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

import { component, render } from 'sigx';
import { Link, Row } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Row gap="4">
            <Link href="#" hover>Hover me</Link>
            <Link href="#" hover color="primary">Hover me too</Link>
        </Row>
    );
});

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

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

const Demo = component(({ signal }) => {
    const state = signal({ clicks: 0 });

    return () => (
        <Card>
            <Card.Body class="space-y-2">
                <Link
                    href="#"
                    color="primary"
                    hover
                    onClick={(e) => { e.preventDefault(); state.clicks++; }}
                >
                    Count a click
                </Link>
                <Text size="sm" class="opacity-70">Clicked {state.clicks} times</Text>
            </Card.Body>
        </Card>
    );
});

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