nativephp.com/resources/views/components/mini-platform-switcher.blade.php at bd4c99cbffbd476e3c0023bcbc7376b86d16fb3e · NativePHP/nativephp.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
@php
    $isMobile = request()->is('docs/mobile/*');
    $mobileHref = '/docs/mobile/1';
    $desktopHref = '/docs/desktop/1';
@endphp

<div
    class="dark:bg-mirage grid h-11 grid-cols-2 items-center gap-0.5 rounded-lg bg-gray-100 p-1 text-xs"
>
    <a
        href="{{ $desktopHref }}"
        @class([
            'flex h-9 items-center gap-1.5 rounded-[calc(var(--radius-lg)-1px)] pr-2 pl-1 transition duration-300 ease-in-out',
            'bg-white dark:bg-slate-700/30' => ! $isMobile,
        ])
    >
        <div
            @class([
                'grid h-7 w-7.5 place-items-center rounded-[calc(var(--radius-md)-1px)]',
                'dark:bg-haiti bg-blue-50 text-blue-500 dark:text-blue-400' => ! $isMobile,
            ])
        >
            <x-icons.pc class="size-5 shrink-0" />
        </div>
        <div>Desktop</div>
    </a>
    <a
        href="{{ $mobileHref }}"
        @class([
            'flex h-9 items-center gap-1.5 rounded-[calc(var(--radius-lg)-1px)] pr-2 pl-1 transition duration-300 ease-in-out',
            'bg-white dark:bg-slate-700/30' => $isMobile,
        ])
    >
        <div
            @class([
                'grid h-7 w-7.5 place-items-center rounded-[calc(var(--radius-md)-1px)]',
                'dark:bg-haiti bg-blue-50 text-blue-500 dark:text-blue-400' => $isMobile,
            ])
        >
            <x-icons.device-mobile-phone class="size-4 shrink-0" />
        </div>
        <div>Mobile</div>
    </a>
</div>