Componentes

Componente Alert

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" />

Componente Stat Card

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>

Componente Badge

active

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

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

Componente Icon

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

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

Componente Table

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>

Componente Simple 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>