import { component$ } from '@builder.io/qwik'
import type { DocumentHead } from '@builder.io/qwik-city'

export default component$(() => {
    return (
        <>
            <h1>Welcome to BotWhatsapp Docs Starter</h1>

            <ul>
                <li>This homepage uses a layout without a menu.</li>
                <li>
                    <span>The </span>
                    <a href="/docs">Documentation</a>
                    <span>
                        {' '}
                        pages use multiple nested layouts, one of them providing
                        a left menu.
                    </span>
                </li>
                <li>
                    Check out the <code>src/routes</code> directory to get
                    started.
                </li>
                <li>
                    Add integrations with <code>npm run qwik add</code>.
                </li>
                <li>
                    More info about development in <code>README.md</code>
                </li>
                <li>
                    <a href="/docs">Qwik City</a>
                    <span> is the meta-framework for Qwik</span>
                </li>
            </ul>

            <h2>Commands</h2>

            <table class="commands">
                <tr>
                    <td>
                        <code>npm run dev</code>
                    </td>
                    <td>Start the dev server and watch for changes.</td>
                </tr>
                <tr>
                    <td>
                        <code>npm run preview</code>
                    </td>
                    <td>Production build and start preview server.</td>
                </tr>
                <tr>
                    <td>
                        <code>npm run build</code>
                    </td>
                    <td>Production build.</td>
                </tr>
                <tr>
                    <td>
                        <code>npm run qwik add</code>
                    </td>
                    <td>Select an integration to add.</td>
                </tr>
            </table>

            <h2>Add Integrations</h2>

            <table class="commands">
                <tr>
                    <td>
                        <code>npm run qwik add cloudflare-pages</code>
                    </td>
                    <td>
                        <a
                            href="https://developers.cloudflare.com/pages"
                            target="_blank"
                        >
                            Cloudflare Pages Server
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <code>npm run qwik add express</code>
                    </td>
                    <td>
                        <a href="https://expressjs.com/" target="_blank">
                            Nodejs Express Server
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <code>npm run qwik add netlify-edge</code>
                    </td>
                    <td>
                        <a href="https://docs.netlify.com/" target="_blank">
                            Netlify Edge Functions
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <code>npm run qwik add static</code>
                    </td>
                    <td>
                        <a
                            href="https://qwik.builder.io/qwikcity/static-site-generation/overview/"
                            target="_blank"
                        >
                            Static Site Generation (SSG)
                        </a>
                    </td>
                </tr>
            </table>

            <h2>Community</h2>

            <ul>
                <li>
                    <span>Questions or just want to say hi? </span>
                    <a href="https://qwik.builder.io/chat" target="_blank">
                        Chat on discord!
                    </a>
                </li>
                <li>
                    <span>Follow </span>
                    <a href="https://twitter.com/QwikDev" target="_blank">
                        @QwikDev
                    </a>
                    <span> on Twitter</span>
                </li>
                <li>
                    <span>Open issues and contribute on </span>
                    <a href="https://github.com/BuilderIO/qwik" target="_blank">
                        GitHub
                    </a>
                </li>
                <li>
                    <span>Watch </span>
                    <a href="https://qwik.builder.io/media/" target="_blank">
                        Presentations, Podcasts, Videos, etc.
                    </a>
                </li>
            </ul>
        </>
    )
})

export const head: DocumentHead = {
    title: 'Welcome to Qwik Docs Starter',
}
