Installation

Let's start by copying the necessary files to their respective directories in your Laravel project.

  • Copy the AccordionDemo.php and GithubProfileAccordion.php files to your app/Livewire directory.
  • Copy the accordion-demo.blade.php and github-profile-accordion.blade.php view files to your resources/views/livewire directory.
  • Copy the accordion/index.blade.php and accordion/item.blade.php component files to the resources/views/components/accordion directory.

Ensure each file is in the correct location, then proceed to integrate the component into your Laravel project.

Integration

To use the accordion component in your Laravel project, you need to include it in your blade file. Here's a basic usage example:

@livewire('accordion-demo')

This line of code includes the Livewire component in your blade file, rendering the accordion with the specified profiles. The accordion items will fetch and display GitHub profiles dynamically.

Configuration

The GithubProfileAccordion Livewire component has a public property $username that it uses to fetch the GitHub profile. You can change the profiles displayed by modifying the $profiles array in the AccordionDemo component.

The accordion is styled using Tailwind CSS. You can customize the appearance by modifying the classes in the blade files.

For more advanced usage, you can modify the methods in the Livewire components to change the behaviour of the accordion. For example, the fetchProfile method in the GithubProfileAccordion component fetches the profile data from the GitHub API. You could modify this method to fetch data from a different source.