GitHub Stars

# Brok UI: GitHub Stars (`github-stars`)

A GitHub star button linking to a repository, showing the mark, a label, and a formatted star-count pill.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add github-stars
```

## Usage

```blade
<x-ui.github-stars repo="laravel/framework" :stars="32400" />
```

## Props

- `repo` (string, default `owner/name`)
- `stars` (int, default `0`)
- `label` (mixed|null, default `null`)
- `size` (md|sm|lg|seg|icon|pill, default `md`)
- `href` (mixed|null, default `null`)

## Use when

- Use for exact technical detail, code readability, diagnostics, and copyable reference material.
- Linking to a repository with its star count, in a header, footer or README-style page.
- Giving a project a social-proof affordance that is still a plain link.

## Avoid when

- Do not surface developer-specific patterns in end-user flows unless the task genuinely requires them.
- Fetching the live count; the number is passed in, never requested by the component.
- Any non-GitHub destination; the mark and wording are GitHub's. Use badge or link-preview instead for other platforms.

## Anti-patterns

- Exposing developer tooling in end-user flows without a task need

## Rules

- Use the `<brok:github-stars>` tag (or `<x-ui.github-stars>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/github-stars
- Registry JSON (files, props, contract): https://brokui.dev/r/open/github-stars.json

@props([
    'repo' => 'owner/name',
    'stars' => 0,
    'label' => null,
    'size' => 'md',
    'href' => null,
])

@php
    $size = in_array($size, ['sm', 'md', 'lg'], true) ? $size : 'md';
    $label = $label ?? __('Star');
    $href = $href ?? 'https://github.com/'.ltrim($repo, '/');

    $count = max(0, (int) $stars);
    $format = function (int $n): string {
        if ($n >= 1000000) {
            return rtrim(rtrim(number_format($n / 1000000, 1), '0'), '.').'M';
        }
        if ($n >= 1000) {
            return rtrim(rtrim(number_format($n / 1000, 1), '0'), '.').'k';
        }
        return (string) $n;
    };
    $display = $format($count);

    $sizes = [
        'sm' => ['seg' => 'h-7 px-2 text-xs gap-1', 'icon' => 'size-4', 'pill' => 'h-7 px-2 text-xs'],
        'md' => ['seg' => 'h-9 px-3 text-sm gap-2', 'icon' => 'size-4', 'pill' => 'h-9 px-3 text-sm'],
        'lg' => ['seg' => 'h-11 px-4 text-base gap-2', 'icon' => 'size-5', 'pill' => 'h-11 px-4 text-base'],
    ];
    $sz = $sizes[$size];

    $a11y = __(':label :repo on GitHub, :count stars', [
        'label' => $label,
        'repo' => $repo,
        'count' => number_format($count),
    ]);
@endphp

<a
    href="{{ $href }}"
    target="_blank"
    rel="noopener noreferrer"
    data-slot="github-stars"
    data-size="{{ $size }}"
    aria-label="{{ $a11y }}"
    {{ $attributes->merge(['class' => 'group inline-flex items-stretch overflow-hidden rounded-md border border-input bg-background font-medium text-foreground shadow-xs transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring']) }}
>
    <span class="inline-flex items-center {{ $sz['seg'] }}">
        <svg class="{{ $sz['icon'] }} shrink-0" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/>
        </svg>
        <span>{{ $label }}</span>
    </span>
    <span class="inline-flex items-center border-s border-input bg-muted text-muted-foreground group-hover:bg-accent group-hover:text-accent-foreground tabular-nums {{ $sz['pill'] }}">{{ $display }}</span>
</a>