Browser#

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

const Demo = component(() => {
    return () => (
        <MockupBrowser url="https://sigx.dev">
            <div class="grid place-content-center h-40 bg-base-200">Hello!</div>
        </MockupBrowser>
    );
});

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

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

const Demo = component(() => {
    return () => (
        <Mockup.Browser class="bg-base-300">
            <div class="grid place-content-center h-40">Content</div>
        </Mockup.Browser>
    );
});

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

import { component, render } from 'sigx';
import { MockupBrowser, Navbar, Button } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <MockupBrowser url="https://sigx.dev/daisyui/">
            <Navbar
                background="base-200"
                slots={{
                    start: () => <span class="px-2 font-semibold">sigx</span>,
                    end: () => <Button size="sm" variant="primary">Get started</Button>,
                }}
            />
            <div class="grid place-content-center h-40 bg-base-100">
                <p class="text-2xl font-bold">Components, in a browser frame</p>
            </div>
        </MockupBrowser>
    );
});

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