import 'package:flutter/material.dart'; import 'package:shadcn_ui/shadcn_ui.dart'; import '../theme/yanting_tokens.dart'; class AppBadge extends StatelessWidget { const AppBadge({ required this.text, this.icon, this.kind = BadgeKind.neutral, super.key, }); final String text; final IconData? icon; final BadgeKind kind; @override Widget build(BuildContext context) { final colors = ShadTheme.of(context).colorScheme; final child = Row( mainAxisSize: MainAxisSize.min, children: [ if (icon != null) ...[Icon(icon, size: 12), const SizedBox(width: 4)], Text(text), ], ); final shape = RoundedRectangleBorder( borderRadius: BorderRadius.circular(YantingRadius.sm), side: kind == BadgeKind.tier || kind == BadgeKind.warning ? BorderSide(color: colors.border) : BorderSide.none, ); return switch (kind) { BadgeKind.brand => ShadBadge( shape: shape, padding: const EdgeInsets.symmetric(horizontal: 9, vertical: 3), child: child, ), BadgeKind.audio || BadgeKind.neutral => ShadBadge.secondary( shape: shape, padding: const EdgeInsets.symmetric(horizontal: 9, vertical: 3), child: child, ), BadgeKind.tier => ShadBadge.outline( shape: shape, padding: const EdgeInsets.symmetric(horizontal: 9, vertical: 3), foregroundColor: colors.mutedForeground, child: child, ), BadgeKind.warning => ShadBadge.destructive( shape: shape, padding: const EdgeInsets.symmetric(horizontal: 9, vertical: 3), backgroundColor: colors.warningSoft, foregroundColor: colors.warningSoftForeground, hoverBackgroundColor: colors.warningSoftBorder, child: child, ), }; } } enum BadgeKind { brand, audio, tier, warning, neutral } class AppChip extends StatelessWidget { const AppChip({ required this.label, this.selected = false, this.onTap, super.key, }); final String label; final bool selected; final VoidCallback? onTap; @override Widget build(BuildContext context) { final colors = ShadTheme.of(context).colorScheme; return ShadBadge.secondary( onPressed: onTap, shape: const StadiumBorder(), padding: const EdgeInsets.symmetric(horizontal: 17, vertical: 9), backgroundColor: selected ? colors.foreground : colors.secondary, hoverBackgroundColor: selected ? colors.foreground.withValues(alpha: 0.9) : colors.border, foregroundColor: selected ? colors.background : colors.secondaryForeground, child: Text(label), ); } }