MIF_E31222656/lib/screens/community/components/group_card.dart

219 lines
8.2 KiB
Dart

import 'package:flutter/material.dart';
import 'package:tugas_akhir_supabase/core/theme/app_colors.dart';
import 'package:tugas_akhir_supabase/screens/community/models/group.dart';
class GroupCard extends StatelessWidget {
final Group group;
final bool isUserMember;
final VoidCallback onTap;
final VoidCallback onJoinLeave;
const GroupCard({
super.key,
required this.group,
required this.isUserMember,
required this.onTap,
required this.onJoinLeave,
});
@override
Widget build(BuildContext context) {
return Card(
margin: const EdgeInsets.only(bottom: 16),
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
side: BorderSide(color: Colors.grey.shade200),
),
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Header dengan avatar dan badge
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color:
isUserMember
? AppColors.primary.withOpacity(0.05)
: Colors.transparent,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(16),
topRight: Radius.circular(16),
),
),
child: Row(
children: [
// Avatar
Container(
width: 50,
height: 50,
decoration: BoxDecoration(
gradient: LinearGradient(
colors:
isUserMember
? [
AppColors.primary,
AppColors.primary.withGreen(150),
]
: [Colors.grey.shade300, Colors.grey.shade400],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(15),
),
child: Center(
child: Text(
group.name.isNotEmpty
? group.name[0].toUpperCase()
: 'G',
style: TextStyle(
color:
isUserMember
? Colors.white
: Colors.grey.shade700,
fontWeight: FontWeight.bold,
fontSize: 22,
),
),
),
),
const SizedBox(width: 16),
// Judul dan deskripsi
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: Text(
group.name,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
const SizedBox(height: 4),
Row(
children: [
Icon(
Icons.people_outline,
size: 16,
color: Colors.grey.shade600,
),
const SizedBox(width: 4),
Text(
'${group.memberCount} anggota',
style: TextStyle(
color: Colors.grey.shade600,
fontSize: 13,
),
),
const SizedBox(width: 8),
if (isUserMember)
Container(
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 2,
),
decoration: BoxDecoration(
color: AppColors.primary.withOpacity(0.2),
borderRadius: BorderRadius.circular(12),
),
child: Text(
'Anggota',
style: TextStyle(
fontSize: 12,
color: AppColors.primary,
fontWeight: FontWeight.w500,
),
),
),
if (group.isDefault)
Container(
margin: const EdgeInsets.only(left: 4),
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 2,
),
decoration: BoxDecoration(
color: Colors.blue.shade100,
borderRadius: BorderRadius.circular(12),
),
child: const Text(
'Default',
style: TextStyle(
fontSize: 12,
color: Colors.blue,
fontWeight: FontWeight.w500,
),
),
),
],
),
],
),
),
],
),
),
// Deskripsi grup
Padding(
padding: const EdgeInsets.fromLTRB(16, 0, 16, 12),
child: Text(
group.description,
style: TextStyle(
color: Colors.grey.shade700,
fontSize: 14,
height: 1.3,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
// Tombol aksi
Container(
padding: const EdgeInsets.fromLTRB(16, 4, 16, 16),
child: ElevatedButton(
onPressed: onJoinLeave,
style: ElevatedButton.styleFrom(
backgroundColor:
isUserMember ? Colors.red.shade50 : AppColors.primary,
foregroundColor: isUserMember ? Colors.red : Colors.white,
elevation: 0,
padding: const EdgeInsets.symmetric(vertical: 12),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(isUserMember ? Icons.logout : Icons.login, size: 18),
const SizedBox(width: 8),
Text(
isUserMember ? 'Keluar Grup' : 'Gabung',
style: const TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
),
],
),
),
);
}
}