feat: create menu item component

[ADchasacademy]

Reusable Blade Component: <x-menu-item>

Overview

This Blade component defines custom link variants within a menu, supporting different styles: default, highlights, and destructive.

Features

• Provides a structured way to create styled menu items.
• Uses Tailwind CSS for styling.
• Supports three visual variants: default, highlights, and destructive.
• Hover support for mouse users.
• Focus support for touch users, ensuring accessibility and visual feedback on both desktop and mobile devices.

Implementation

{{--
    A reusable Blade component for defining custom link variants within a menu.
    Supports "default," "highlights," and "destructive" styles.
--}}

@props([
    'label',
    'variant' => 'default',
    'href' => '#',
])

@php
    $baseClasses = 'block rounded-lg px-4 py-2 text-center transition-all duration-200 ease-out';
    $hoverClasses = 'cursor-pointer hover:bg-slate-600 focus:bg-slate-600 focus:outline-0';

    $variantClasses = match ($variant) {
        'highlights' => 'font-bold text-indigo-400',
        'destructive' => 'text-red-400',
        default => 'text-slate-200',
    };
@endphp

<a
    href="{{ $href }}"
    {{ $attributes->merge(['class' => "$baseClasses $variantClasses $hoverClasses"]) }}
>
    {{ $label }}
</a>

Example Usage

<nav>
    <ul class="flex flex-col">
        <li><x-menu-item href="/" label="Edit" /></li>
        <li><x-menu-item href="/" label="Change visibility" /></li>
        <li><x-menu-item href="/" label="Delete" variant="destructive" /></li>
        <li><x-menu-item label="Cancel" variant="highlights" /></li>
    </ul>
</nav>

closes #60

[beforeAW]

Nice

[ell-ska]

this component will need to support being both a link and a button because it will also open other modals and for that a button with an @click is needed! if you want some inspiration you can check how i did it with the button component

Saw the comments

[ell-ska]

looks great!