Hi-Folks/gh-actions-yaml-generator

@props([
'title' => '',
'description' => '',
'icon' => 'laravel'
]
)

<div  class="bg-blue-100 pt-0 p-4 pt-4 bg-opacity-80 rounded-3xl grid grid-cols-6 space-x-6  shadow-md hover:shadow-xl">
  <div class="pt-4">
    <x-dynamic-component  class="m-1"  component="icons.{{ $icon }}"/>
  </div>
  <div  class="col-span-5">
    <p class="text-2xl font-bold text-gray-900">{{ $title }}</p>
    <p class=" text-gray-500 h-12 text-sm mb-3">{{ $description }}</p>
  </div>
  <div class="col-span-6">
    {{ $slot }}
  </div>
</div>

<div x-data="{ yaml: '' }">

  <div class="">
    <div class="grid grid-cols-1 gap-4 md:grid-cols-3">

      <x-card-template
        title="Laravel App"
        description="Setup Workflow for Laravel with database and Code Quality."
        icon="laravel"
      >
        <div>
          <p><b class="text-xl">Select template</b>:</p>
          <x-button onClick="template('laravelapp')">
            Mysql
          </x-button>
          <x-button onClick="template('laravelpostgresql')">
            Postgresql
          </x-button>
        </div>

      </x-card-template>

      <x-card-template
        title="PHP"
        description="Setup Workflow for PHP Package."
        icon="php"
      >
        <p><b class="text-xl">Select template</b>:</p>
        <x-button onClick="template('phppackage')">
          PHP
        </x-button>
      </x-card-template>
      //
</div>