---
title: "Patterns"
description: "Patterns, recipes, and working examples."
---

import { getFolder } from '../../lib/content';

export const folder = await getFolder('patterns');
export const groupedPatterns = folder.folders.map(sub => ({
    slug: sub.slug,
    label: sub.frontmatter.title,
    items: sub.files.map(f => ({
        title: f.frontmatter.title,
        url: f.url,
        description: f.frontmatter.description,
        icon: f.frontmatter.icon || '',
        soon: f.frontmatter.soon || false,
    })),
}));

<div class="not-prose mb-6">
    <input
        type="text"
        placeholder="Search patterns..."
        autocomplete="off"
        class="w-full px-3 py-2 text-sm border border-neutral-200 dark:border-neutral-800 rounded-md bg-white dark:bg-neutral-900 text-neutral-800 dark:text-neutral-200 placeholder:text-neutral-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-neutral-300/50 dark:focus:ring-neutral-600/50 focus:border-neutral-300 dark:focus:border-neutral-600"
        _="install ActiveSearch"
    />
</div>

{groupedPatterns.map(group => (
<section role="group">

<h2 id={group.slug}>{group.label}</h2>

<table>
    <tbody>
        {group.items.map(item => (
            <tr class={`stretch-link ${item.soon ? 'opacity-50' : ''}`} data-filter={`${item.title} ${item.description || ''}`.toLowerCase()}>
                <td>
                    {item.icon && <i class={`${item.icon} size-5 inline-block align-middle mr-4 sm:mr-7`}></i>}
                    <span class="inline-block align-middle">
                        {item.soon
                            ? <span>{item.title}</span>
                            : <a href={item.url}>{item.title}</a>}
                        {item.soon && <span class="sm:hidden text-[9px] ml-2 px-1.5 py-0.5 rounded bg-yellow-300/5 text-yellow-700 dark:text-yellow-300 border border-yellow-600/50 dark:border-yellow-300 font-medium uppercase tracking-wide">Soon</span>}
                        {item.description && <span class="block sm:hidden text-[0.8125em] text-neutral-650 dark:text-neutral-350 mt-0.5">{item.description}</span>}
                    </span>
                </td>
                <td class="hidden sm:table-cell text-neutral-650 dark:text-neutral-350">
                    {item.description || ''}
                    {item.soon && <span class="text-[9px] ml-2 px-1.5 py-0.5 rounded bg-yellow-300/5 text-yellow-700 dark:text-yellow-300 border border-yellow-600/50 dark:border-yellow-300 font-medium uppercase tracking-wide">Soon</span>}
                </td>
            </tr>
        ))}
    </tbody>
</table>

</section>
))}
