Phone#

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

const Demo = component(() => {
    return () => (
        <MockupPhone>
            <div class="grid place-content-center h-full bg-base-100">Hi.</div>
        </MockupPhone>
    );
});

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

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

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

    return () => (
        <Mockup.Phone class="border-primary">
            <div class="flex flex-col h-full w-full bg-base-100">
                <Navbar
                    background="primary"
                    slots={{ start: () => <span class="px-2 font-semibold">Counter</span> }}
                />
                <div class="grid place-content-center grow gap-4 text-center">
                    <span class="text-5xl font-bold">{state.count}</span>
                    <Button variant="primary" onClick={() => state.count++}>Tap</Button>
                </div>
                <Menu horizontal class="justify-around bg-base-200">
                    <Menu.Item active>Home</Menu.Item>
                    <Menu.Item>Stats</Menu.Item>
                    <Menu.Item>Settings</Menu.Item>
                </Menu>
            </div>
        </Mockup.Phone>
    );
});

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