Order Details Component - Copy this Html, Tailwind Component to your project

<div class="bg gray 100 dark:bg gray 900 text gray 800 dark:text gray 200"> <div class="container mx auto p 4 md:p 8"> <div class="bg white dark:bg gray 800 rounded lg shadow lg overflow hidden"> <div class="p 6 md:p 8"> <h1 class="text 2xl md:text 3xl font bold mb 6">Order Details #{{ $order >order_number }}</h1> <div class="grid grid cols 1 md:grid cols 2 gap 6 mb 8"> <div> <h2 class="text xl font semibold mb 4">Order Summary</h2> <p><strong>Order ID:</strong> #{{ $order >order_number }}</p> <p><strong>Date:</strong> {{ $order >created_at >format('d/m/Y H:i') }}</p> <p><strong>Total Amount:</strong> {{ Number::currency($order >total) }}</p> <p><strong>Payment Status:</strong> <span class="text green 600 dark:text green 400">{{ $order >payment_status }}</span></p> </div> <div> <h2 class="text xl font semibold mb 4">Business Unit</h2> <p>{{ $order >businessUnit >name }}</p> </div> </div> <div class="mb 8" x data="orderItems"> <h2 class="text xl font semibold mb 4">Order Items</h2> <div class="grid grid cols 2 sm:grid cols 3 md:grid cols 4 lg:grid cols 5 xl:grid cols 6 gap 4"> @foreach ($order >items as $index => $item) <div wire:click="$dispatch('openModal', {item: {{ json_encode($item) }}})" class="bg gray 50 dark:bg gray 700 rounded lg p 3 transition duration 300 ease in out transform hover:scale 105 cursor pointer"> <img src="{{ $item >product >image ?? ($item >product >default_image ?? 'https://via.placeholder.com/100') }}" alt="{{ $item >product >name }}" class="w full h 24 object cover rounded lg mb 2"> <h3 class="font semibold text sm mb 1 truncate">{{ $item >product >name }}</h3> <p class="text xs mb 1">Qtd: {{ $item >quantity }}</p> <p class="font bold text sm">{{ Number::currency($item >unit_price) }}</p> </div> @endforeach </div> </div> <div class="mb 8"> <h2 class="text xl font semibold mb 4">Payments</h2> <table class="min w full divide y divide gray 200"> <thead> <tr> <th class="px 6 py 3 bg gray 50 text left text xs font medium text gray 500 uppercase tracking wider"> Method</th> <th class="px 6 py 3 bg gray 50 text left text xs font medium text gray 500 uppercase tracking wider"> Amount</th> <th class="px 6 py 3 bg gray 50 text left text xs font medium text gray 500 uppercase tracking wider"> Date</th> </tr> </thead> <tbody class="bg white divide y divide gray 200"> @foreach ($order >payments as $payment) <tr> <td class="px 6 py 4 whitespace nowrap">{{ $payment >payment_method }}</td> <td class="px 6 py 4 whitespace nowrap">{{ Number::currency($payment >value) }} </td> <td class="px 6 py 4 whitespace nowrap"> {{ $payment >created_at >format('d/m/Y H:i') }}</td> </tr> @endforeach </tbody> </table> </div> </div> </div> </div> <livewire:item details modal wire:ignore /> </div> tenho esse código que são os detalhes de uma compra, quero criar um conjunto de botões que serão açòes que podem ser executdas