PinesUI - Blade version

Hey Joey 👋

Thank you for this suggestion! We don't have it on the roadmap but I'll bring it up to the team!

In the mean time, a quick way of doing this would be to copy and paste the component in ChatGPT and ask it to convert it to a blade component, here is an example with the accordion Pines component:

First, you'd need to create a new Blade component using Artisan command. For example, let's create an accordion component:

php artisan make:component Accordion

Then, Laravel would create two files:

• resources/views/components/accordion.blade.php - for the component's HTML
• app/View/Components/Accordion.php - for the component's PHP class

Now, you can define your component as follows:

resources/views/components/accordion.blade.php:

<div x-data="{
activeAccordion: '',
setActiveAccordion(id) {
this.activeAccordion = (this.activeAccordion == id) ? '' : id
}
}" class="relative w-full mx-auto overflow-hidden text-sm font-normal bg-white border border-gray-200 divide-y divide-gray-200 rounded-md">
    @foreach ($items as $item)
        <div x-data="{ id: $id('accordion') }" class="cursor-pointer group">
            <button @click="setActiveAccordion(id)" class="flex items-center justify-between w-full p-4 text-left select-none group-hover:underline">
                <span>{{ $item['question'] }}</span>
                <svg class="w-4 h-4 duration-200 ease-out" :class="{ 'rotate-180': activeAccordion==id }" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
            </button>
            <div x-show="activeAccordion==id" x-collapse x-cloak>
                <div class="p-4 pt-0 opacity-70">
                    {{ $item['answer'] }}
                </div>
            </div>
        </div>
    @endforeach
</div>

The $items variable will contain the question-answer pairs to display. It must be an array of associative arrays, where each associative array has two keys: 'question' and 'answer'.

app/View/Components/Accordion.php:

<?php
namespace App\View\Components;

use Illuminate\View\Component;

class Accordion extends Component
{
    public $items;

    public function __construct($items)
    {
        $this->items = $items;
    }

    public function render()
    {
        return view('components.accordion');
    }
}

Finally, you can use your new component in any Blade file as follows:

<x-accordion :items="$faqItems"/>

In the above example, $faqItems should be an array of associative arrays where each associative array contains a 'question' and an 'answer'. The variable would be passed to your component's constructor when it's being instantiated.

Hope that this helps!