Components

Alert Component

This is an alert

<x-jet-bar-alert text="This is an alert message" />
<x-jet-bar-alert text="This is an alert message" type="success" />
<x-jet-bar-alert text="This is an alert message" type="warning" />
<x-jet-bar-alert text="This is an alert message" type="danger" />
<x-jet-bar-alert text="This is an alert message" type="info" />

<jet-bar-alert text="This is an alert message" />
<jet-bar-alert text="This is an alert message"  type="success" />
<jet-bar-alert text="This is an alert message"  type="warning" />
<jet-bar-alert text="This is an alert message" type="danger" />
<jet-bar-alert text="This is an alert message" type="info" />

Stat Cards Component

Total clients

6389

Account balance

$ 46,760.89

<x-jet-bar-stat-card title="Total clients" number="6389" type="warning" >
  <x-jet-bar-icon type="users" fill />
</x-jet-bar-stat-card>

<jet-bar-stat-card title="Total clients" number="6389" type="warning">
<template v-slot:icon>
    <jet-bar-icon type="users" fill />
</template>
</jet-bar-stat-card>

Badge Component

active

<x-jet-bar-badge text="Active" type="success" />

<jet-bar-badge text="Active" type="success" />

Icon Component

<x-jet-bar-icon type="trash" fill />

<jet-bar-icon type="trash" fill />

Table Component

name	title	status	role
Jane Cooper	Regional Paradigm Technician Optimization	Active	Admin	Edit
Jane Cooper	Regional Paradigm Technician Optimization	Active	Admin	Edit
Jane Cooper	Regional Paradigm Technician Optimization	Active	Admin	Edit

<x-jet-bar-table :headers="['Name', 'Edit', 'Delete']">
  <tr class="hover:bg-gray-50">
      <x-jet-bar-table-data>
          Jane Cooper
      </x-jet-bar-table-data>

      <x-jet-bar-table-data>
          <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
      </x-jet-bar-table-data>

      <x-jet-bar-table-data>
          <a href="#" class="text-gray-400 hover:text-gray-500">
              <x-jet-bar-icon type="trash" fill />
          </a>
      </x-jet-bar-table-data>
  </tr>
</x-jet-bar-table>

<jet-bar-table :headers="['Name', 'Edit', 'Delete']" >
  <tr class="hover:bg-gray-50">
      <jet-bar-table-data>Jane Cooper</jet-bar-table-data>
      <jet-bar-table-data>
          <inertia-link href="#" class="text-indigo-600 hover:text-indigo-900">Edit</inertia-link>
      </jet-bar-table-data>
      <jet-bar-table-data>
          <inertia-link href="#" class="text-gray-400 hover:text-gray-500">
              <jet-bar-icon type="trash" fill />
          </inertia-link>
      </jet-bar-table-data>
  </tr>
</jet-bar-table>

Simple Pagination Component

Only for InertiaJS (Livewire can use Laravel default pagination).

Here an example with an eloquent collection of users (User model).

<x-jet-bar-table :headers="['Name', 'Delete']">
  <tr class="hover:bg-gray-50">
      <x-jet-bar-table-data>
          {{ $user->name }}
      </x-jet-bar-table-data>

      <x-jet-bar-table-data>
          <a href="{{ route('users.delete', $user->id) }}" class="text-gray-400 hover:text-gray-500">
              <x-jet-bar-icon type="trash" fill />
          </a>
      </x-jet-bar-table-data>
  </tr>
</x-jet-bar-table>

{{ $users->links() }}

<template>
  <jet-bar-table :headers="['Name', 'Delete']" >
      <tr v-for="(index, user) in users.data" :key="index" class="hover:bg-gray-50">
          <jet-bar-table-data>
              {{ user.name }}
          </jet-bar-table-data>
          <jet-bar-table-data>
              <inertia-link :href="route('users.delete', user.id)" class="text-gray-400 hover:text-gray-500">
                  <jet-bar-icon type="trash" fill />
              </inertia-link>
          </jet-bar-table-data>
      </tr>
      <template name:pagination>
          <jet-bar-simple-pagination :items="users" />
      </template>
  </jet-bar-table>
</template>
<script>
  props: { users:Object }
</script>