# Item

A flexible component for displaying content with media, title, and actions.

- Install: `php artisan blatui:add item`
- Source: https://blatui.remix-it.com/r/item.json
- Composer: `composer require gehrisandro/tailwind-merge-laravel`

## resources/views/components/ui/item.blade.php

```blade
@props([
    'variant' => 'default',
    'size' => 'default',
    'href' => null,
])

@php
    $base = "group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]";
    $variants = [
        'default' => 'bg-transparent',
        'outline' => 'border-border',
        'muted' => 'bg-muted/50',
    ];
    $sizes = [
        'default' => 'gap-4 p-4',
        'sm' => 'gap-2.5 px-4 py-3',
    ];
    $classes = $base.' '.($variants[$variant] ?? $variants['default']).' '.($sizes[$size] ?? $sizes['default']);
@endphp

@if ($href)
    <a href="{{ $href }}" data-slot="item" data-variant="{{ $variant }}" data-size="{{ $size }}" {{ $attributes->twMerge($classes) }}>{{ $slot }}</a>
@else
    <div data-slot="item" data-variant="{{ $variant }}" data-size="{{ $size }}" {{ $attributes->twMerge($classes) }}>{{ $slot }}</div>
@endif
```

## resources/views/components/ui/item-actions.blade.php

```blade
<div data-slot="item-actions" {{ $attributes->twMerge('flex items-center gap-2') }}>
    {{ $slot }}
</div>
```

## resources/views/components/ui/item-content.blade.php

```blade
<div data-slot="item-content" {{ $attributes->twMerge('flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none') }}>
    {{ $slot }}
</div>
```

## resources/views/components/ui/item-description.blade.php

```blade
<p data-slot="item-description" {{ $attributes->twMerge('text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4') }}>{{ $slot }}</p>
```

## resources/views/components/ui/item-group.blade.php

```blade
<div data-slot="item-group" {{ $attributes->twMerge('group/item-group flex flex-col') }}>
    {{ $slot }}
</div>
```

## resources/views/components/ui/item-media.blade.php

```blade
@props(['variant' => 'default'])

@php
    $variants = [
        'default' => "bg-transparent",
        'icon' => "bg-muted size-8 border rounded-sm [&_svg:not([class*='size-'])]:size-4",
        'image' => "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover",
    ];
@endphp

<div
    data-slot="item-media"
    data-variant="{{ $variant }}"
    {{ $attributes->twMerge("flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start group-has-[[data-slot=item-description]]/item:translate-y-0.5 [&_svg]:pointer-events-none ".($variants[$variant] ?? $variants['default'])) }}
>
    {{ $slot }}
</div>
```

## resources/views/components/ui/item-separator.blade.php

```blade
<div data-slot="item-separator" role="separator" {{ $attributes->twMerge('bg-border my-0 h-px w-full shrink-0') }}></div>
```

## resources/views/components/ui/item-title.blade.php

```blade
<div data-slot="item-title" {{ $attributes->twMerge('flex w-fit items-center gap-2 text-sm leading-snug font-medium') }}>{{ $slot }}</div>
```