Skip to content

Instantly share code, notes, and snippets.

@vvasilev-
Created August 30, 2023 09:31
Show Gist options
  • Select an option

  • Save vvasilev-/c15f6ff9af02e1ae54c7294752f7a29d to your computer and use it in GitHub Desktop.

Select an option

Save vvasilev-/c15f6ff9af02e1ae54c7294752f7a29d to your computer and use it in GitHub Desktop.

Revisions

  1. vvasilev- created this gist Aug 30, 2023.
    193 changes: 193 additions & 0 deletions test.blade.php
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,193 @@
    <x-mj-app>
    <x-slot:nav>
    <x-mj-vertical-stack justify="between">
    <x-mj-profile-card />

    <x-mj-vertical-stack gap="1">
    <x-mj-global-nav />

    <x-mj-side-nav title="My Mailboxes">
    <x-mj-side-nav-link count="128">
    <x-slot:prefix>
    <x-mj-icon name="some_icon" />
    </x-slot:prefix>

    Demo Inbox
    </x-mj-side-nav-link>

    <x-mj-side-nav-link count="6">
    <x-slot:prefix>
    <x-mj-icon name="some_icon" />
    </x-slot:prefix>

    DocuMocu Inbox
    </x-mj-side-nav-link>

    <x-mj-side-nav-link>
    <x-slot:prefix>
    <x-mj-icon name="some_icon" />
    </x-slot:prefix>

    Kitchen Inbox
    </x-mj-side-nav-link>
    </x-mj-side-nav>

    <x-mj-side-nav title="Shared with me">
    <x-mj-side-nav-link count="128">
    <x-slot:prefix>
    <x-mj-icon name="some_icon" />
    </x-slot:prefix>

    HB Inbox
    </x-mj-side-nav-link>
    </x-mj-side-nav>
    </x-mj-vertical-stack>

    <x-mj-billing-limits-card />
    </x-mj-vertical-stack>
    </x-slot:nav>

    <x-slot:sidebar>
    <x-mj-sidebar>
    <x-mj-vertical-stack>
    <x-mj-horizontal-stack height="2" justify="between">
    <x-mj-vertical-stack gap="0.5">
    <x-mj-heading>
    DocuMocu inbox
    </x-mj-heading>

    <x-mj-text variant="light">
    32 messages, 6 unread
    </x-mj-text>
    </x-mj-vertical-stack>

    <x-mj-horizontal-stack gap="0.5">
    <x-mj-icon-button icon="refresh" />

    <x-mj-icon-button icon="envelope" />

    <x-mj-icon-button icon="trash" />

    <x-mj-icon-button variant="primary" icon="cog" />
    </x-mj-horizontal-stack>
    </x-mj-horizontal-stack>

    <div class="flex-1">
    <x-mj-vertical-stack>
    <x-mj-box height="2">
    <x-mj-search-field />
    </x-mj-box>

    <x-mj-scrollable>
    <x-mj-inbox-emails />
    </x-mj-scrollable>
    </x-mj-vertical-stack>
    </div>
    </x-mj-vertical-stack>
    </x-mj-sidebar>
    </x-slot:sidebar>

    <x-slot:content>
    <x-mj-inbox>
    <x-mj-horizontal-stack justify="between">
    <x-mj-horizontal-stack gap="0.5">
    <x-mj-heading>
    Some Inbox
    </x-mj-heading>

    <x-mj-icon-button icon="pencil" />
    </x-mj-horizontal-stack>

    <x-mj-icon-button icon="horizontal-more-dots" />
    </x-mj-horizontal-stack>

    <x-mj-box height="1">
    <x-mj-text variant="light"></x-mj-text>
    </x-mj-box>

    <x-mj-tabs-nav>
    <x-mj-tabs-nav-tab>SMTP Settings</x-mj-tabs-nav-tab>

    <x-mj-tabs-nav-tab :active="true">Members</x-mj-tabs-nav-tab>
    </x-mj-tabs-nav>

    <x-mj-box height="2">
    <x-mj-horizontal-stack>
    <x-mj-icon name="users" />

    <x-mj-text>
    3 users have access to this mailbox
    </x-mj-text>
    </x-mj-horizontal-stack>
    </x-mj-box>

    <x-mj-vertical-stack gap="4">
    <x-mj-table>
    <colgroup>
    <col />
    <col />
    <col />
    </colgroup>

    <tr>
    <td>
    <x-mj-user-card />
    </td>

    <td>
    <x-mj-user-role-select />
    </td>

    <td>
    <x-icon-button icon="horizontal-dots-more" />
    </td>
    </tr>

    <tr>
    <td>
    <x-mj-user-card />
    </td>

    <td>
    <x-mj-user-role-select />
    </td>

    <td>
    <x-icon-button icon="horizontal-dots-more" />
    </td>
    </tr>

    <tr>
    <td>
    <x-mj-user-card />
    </td>

    <td>
    <x-mj-user-role-select />
    </td>

    <td>
    <x-mj-menu>
    <x-slot:trigger>
    <x-icon-button icon="horizontal-dots-more" />
    </x-slot:trigger>

    <x-mj-menu-item>
    <x-slot:prefix>
    <x-icon name="trash" />
    </x-slot:prefix>

    Remove
    </x-mj-menu-item>
    </x-mj-menu>
    </td>
    </tr>
    </x-mj-table>

    <x-mj-button variant="primary">
    Add members
    </x-mj-button>
    </x-mj-vertical-stack>
    </x-mj-inbox>
    </x-slot:content>
    </x-mj-app>