Badge

// Package badge holds the site's example gsx components for ui/badge.
package badge

import "github.com/gsxhq/gsxui/ui"

// Basic renders the default Badge.
component Basic() {
	<ui.Badge>Badge</ui.Badge>
}

package badge

import "github.com/gsxhq/gsxui/ui"

// Variants renders every Badge variant side by side.
component Variants() {
	<div class="flex flex-wrap items-center gap-2">
		<ui.Badge aria-invalid="true">Default</ui.Badge>
		<ui.Badge variant="secondary">Secondary</ui.Badge>
		<ui.Badge variant="destructive">Destructive</ui.Badge>
		<ui.Badge variant="outline">Outline</ui.Badge>
		<ui.Badge variant="ghost">Ghost</ui.Badge>
		<ui.Badge variant="link">Link</ui.Badge>
	</div>
}

package badge

import (
	"github.com/gsxhq/gsxui/ui"
	uiicon "github.com/gsxhq/gsxui/ui/icon"
)

// Rtl mirrors shadcn's own badge-rtl demo: the four base variants plus an
// icon-leading and icon-trailing badge, translated to Arabic, wrapped in
// dir="rtl".
component Rtl() {
	<div dir="rtl" lang="ar" class="flex w-full flex-wrap justify-center gap-2">
		<ui.Badge>شارة</ui.Badge>
		<ui.Badge variant="secondary">ثانوي</ui.Badge>
		<ui.Badge variant="destructive">مدمر</ui.Badge>
		<ui.Badge variant="outline">مخطط</ui.Badge>
		<ui.Badge variant="secondary">
			<uiicon.BadgeCheck/>
			متحقق
		</ui.Badge>
		<ui.Badge variant="outline">
			إشارة مرجعية
			<uiicon.Bookmark/>
		</ui.Badge>
	</div>
}