---
import type { HTMLTag } from 'astro/types'
// List group item (.list-group-item). With a title, a description or a named
// slot it renders the slot layout: media, content, meta and actions in a row.
type PolymorphicProps = { as?: HTMLTag }
interface Props extends PolymorphicProps {
/** list-group-item-action (hover/focus affordance, typically for a/button items) */
action?: boolean
active?: boolean
disabled?: boolean
/** first line of the content slot (.list-group-item-title) */
title?: string | undefined
/** second line of the content slot (.list-group-item-description) */
description?: string | undefined
/** keeps the actions slot visible in a hoverable list (.show) */
showActions?: boolean
class?: string
/** remaining attributes (href, data-*, …) are forwarded to the element */
[key: string]: unknown
}
const { as: Element = 'div', action, active, disabled, title, description, showActions, class: className, ...rest }: Props = Astro.props
const hasMedia = Astro.slots.has('media')
const hasMeta = Astro.slots.has('meta')
const hasActions = Astro.slots.has('actions')
const hasSlots = Boolean(title || description || hasMedia || hasMeta || hasActions)
---
{
hasSlots ? (
<>
{hasMedia && (
)}
{title &&
{title}
}
{description &&
{description}
}
)}
{hasActions && (
)}
) : (
)
}