sojorn/sojorn_app/lib/widgets/reactions/reactions_display.dart
2026-02-01 16:06:12 -06:00

84 lines
2.6 KiB
Dart

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import '../../theme/app_theme.dart';
/// Displays all reactions for a post
/// Used in thread/detail views to show comprehensive reaction breakdown
class ReactionsDisplay extends StatelessWidget {
final Map<String, int> reactionCounts;
final Set<String> myReactions;
final VoidCallback? onReactionTap;
final bool showAll;
const ReactionsDisplay({
super.key,
required this.reactionCounts,
required this.myReactions,
this.onReactionTap,
this.showAll = true,
});
@override
Widget build(BuildContext context) {
if (reactionCounts.isEmpty) {
return const SizedBox.shrink();
}
List<MapEntry<String, int>> reactions;
if (showAll) {
reactions = reactionCounts.entries.toList();
reactions.sort((a, b) => b.value.compareTo(a.value));
} else {
reactions = reactionCounts.entries.take(3).toList();
reactions.sort((a, b) => b.value.compareTo(a.value));
}
return Container(
padding: const EdgeInsets.symmetric(vertical: 8),
child: Wrap(
spacing: 8,
runSpacing: 8,
children: reactions.map((entry) {
final emoji = entry.key;
final count = entry.value;
final isMyReaction = myReactions.contains(emoji);
return GestureDetector(
onTap: onReactionTap,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: isMyReaction
? AppTheme.brightNavy.withValues(alpha: 0.15)
: AppTheme.navyBlue.withValues(alpha: 0.08),
borderRadius: BorderRadius.circular(16),
border: isMyReaction
? Border.all(color: AppTheme.brightNavy.withValues(alpha: 0.3))
: null,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
emoji,
style: const TextStyle(fontSize: 14),
),
const SizedBox(width: 4),
Text(
count > 99 ? '99+' : '$count',
style: GoogleFonts.inter(
color: isMyReaction ? AppTheme.brightNavy : AppTheme.textSecondary,
fontSize: 12,
fontWeight: FontWeight.w600,
),
),
],
),
),
);
}).toList(),
),
);
}
}