# simpleanalytics/trunk/src/UI/PageLayoutComponent.php

Simple Analytics, version trunk. 196 lines.

- Page: https://pluginprobe.com/plugins/simpleanalytics/trunk/code/src/UI/PageLayoutComponent.php
- Raw: https://pluginprobe.com/plugins/simpleanalytics/trunk/raw/src/UI/PageLayoutComponent.php
- Modified: 2026-06-18T13:36:38+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/simpleanalytics/trunk/code/src/UI/PageLayoutComponent.php#L10-L20`.

```php
<?php

namespace SimpleAnalytics\UI;

use SimpleAnalytics\Settings\{AdminPage, Tab};
use function SimpleAnalytics\get_icon;
use const SimpleAnalytics\PLUGIN_URL;

class PageLayoutComponent
{
    private const DASHBOARD_URL = 'https://dashboard.simpleanalytics.com/?utm_source=wordpress&utm_medium=plugin&utm_content=go_to_dashboard_button';
    private const SIGNUP_URL = 'https://www.simpleanalytics.com/signup?utm_source=wordpress&utm_medium=plugin&utm_content=signup_link';

    /**
     * @readonly
     * @var \SimpleAnalytics\Settings\AdminPage
     */
    private $page;
    public function __construct(AdminPage $page)
    {
        $this->page = $page;
    }

    public function __invoke(): void
    {
        $currentTab = $this->getCurrentTab($this->page->getTabs());
        ?>
        <style>
            #wpwrap {
                background: white;
            }

            #wpcontent {
                padding-left: 0;
            }
        </style>
        <template shadowrootmode="open">
            <link rel="preconnect" href="https://fonts.bunny.net">
            <link rel="stylesheet" href="<?php echo PLUGIN_URL ?>build/css/settings.css">
            <form method="post" action="options.php">
                <!-- Hidden fields -->
                <?php settings_fields($this->page->getOptionGroup($currentTab)); ?>

                <!-- Header / Nav -->
                <header class="pt-5 bg-primaryBg">
                    <div class="mx-auto max-w-3xl flex-col justify-between gap-5 sm:flex sm:items-baseline">
                        <div class="flex items-center">
                            <!-- Logo -->
                            <a
                                href="<?php echo esc_url(self::DASHBOARD_URL); ?>"
                                target="_blank"
                                class="text-base font-semibold leading-6 text-gray-900"
                            >
                                <img
                                    alt="SimpleAnalytics logo"
                                    src="<?php echo PLUGIN_URL ?>logo.svg"
                                    class="mr-2 inline-block h-10 w-auto text-primary"
                                >
                            </a>
                            <!-- "Open Dashboard" link -->
                            <a
                                href="<?php echo esc_url(self::DASHBOARD_URL); ?>"
                                target="_blank"
                                class="inline-flex items-center rounded bg-white px-2 py-1 text-xs font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
                            >
                                <?php echo get_icon('external')->class('w-3.5 h-3.5 mr-0.5'); ?>
                                Open Dashboard
                            </a>
                        </div>

                        <!-- Tabs -->
                        <div class="mt-4 sm:mt-0">
                            <?php (new TabListComponent($this->page->getSlug(), $currentTab, $this->page->getTabs()))(); ?>
                        </div>
                    </div>
                </header>

                <!-- Fields / Layout -->
                <div class="mx-auto max-w-3xl bg-white px-4 py-6 sm:px-4 lg:px-0">
                    <div class="border-b border-gray-900/10 pb-7">
                        <?php if ($currentTab->getSlug() === 'general'): ?>
                            <?php $this->renderGeneralTabIntro(); ?>
                        <?php endif; ?>
                        <?php $currentTab->render(); ?>
                    </div>

                    <?php if ($currentTab->getSlug() !== 'general'): ?>
                        <div class="mt-6 flex items-center justify-start gap-x-6">
                            <button
                                type="submit"
                                class="rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm bg-primary hover:bg-red-500 focus-visible:outline-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
                            >
                                Save Changes
                            </button>
                        </div>
                    <?php endif; ?>
                </div>
            </form>
            <script>
                /**
                 * Add value as a new line to textarea
                 *
                 * @param textarea HTMLTextAreaElement
                 * @param value string
                 */
                function sa_textarea_add_value(textarea, value) {
                    if (textarea.value.includes(value)) {
                        return;
                    }

                    if (textarea.value.trim() === "") {
                        textarea.value = value;
                    } else {
                        textarea.value += `\n${value}`;
                    }
                }
            </script>
        </template>
        <script>
            // Polyfill in case the browser has no support for shadowRootMode
            // 1. https://developer.chrome.com/docs/css-ui/declarative-shadow-dom#polyfill
            // 2. https://caniuse.com/mdn-html_elements_template_shadowrootmode
            (function attachShadowRoots(root) {
                root.querySelectorAll("template[shadowrootmode]").forEach(template => {
                    const mode = template.getAttribute("shadowrootmode");
                    const shadowRoot = template.parentNode.attachShadow({ mode });
                    shadowRoot.appendChild(template.content);
                    template.remove();
                    attachShadowRoots(shadowRoot);
                });
            })(document);
        </script>
        <?php
    }

    protected function getCurrentTab(array $tabs): Tab
    {
        $currentTabSlug = $_GET['tab'] ?? $tabs[0]->getSlug();

        return $this->findTabBySlug($tabs, $currentTabSlug) ?? $tabs[0];
    }

    protected function findTabBySlug(array $tabs, string $slug): ?Tab
    {
        foreach ($tabs as $tab) {
            if ($tab->getSlug() === $slug) return $tab;
        }

        return null;
    }

    protected function renderGeneralTabIntro(): void
    {
        ?>
        <div class="mb-7" style="max-width: 64ch;">
            <p class="text-sm text-gray-700">
                Simple Analytics is now added to your WordPress site.
            </p>
            <p class="mt-4 text-sm text-gray-700">
                The plugin collects pageviews in a privacy-first way, without cookies or personal data.
            </p>
            <p class="mt-4 text-sm text-gray-700">
                Your stats will appear in
                <a class="text-primary hover:underline" target="_blank" href="<?php echo esc_url(self::DASHBOARD_URL); ?>">
                    the Simple Analytics dashboard
                </a>
                within a few minutes.
            </p>
            <p class="mt-4 text-sm text-gray-700">
                To avoid tracking your own visits, go to the "Ignore Rules" tab and ignore visits from logged-in admins.
                You can also add your own IP address there.
            </p>
            <p class="mt-4 text-sm text-gray-700">
                To automatically track downloads, outbound links, and email clicks, go to the "Events" tab and enable "Collect automated events".
            </p>
            <p class="mt-4 text-sm text-gray-700">
                No account yet? Create one at
                <a class="text-primary hover:underline" target="_blank" href="<?php echo esc_url(self::SIGNUP_URL); ?>">
                    simpleanalytics.com.
                </a>
                You can start with a free trial and choose a free or paid plan later.
            </p>
            <p class="mt-6">
                <a
                    href="<?php echo esc_url(self::DASHBOARD_URL); ?>"
                    target="_blank"
                    class="inline-flex items-center rounded bg-primary px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500"
                >
                    Open dashboard
                </a>
            </p>
        </div>
        <?php
    }
}

```