syncrow-web/lib/pages/roles_and_permission/view/roles_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/pages/roles_and_permission/bloc/roles_permission_bloc.dart';
import 'package:syncrow_web/pages/roles_and_permission/view/role_card.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';
import 'package:syncrow_web/utils/style.dart';

class RolesPage extends StatelessWidget {
  final RolesPermissionBloc blocRole;
  const RolesPage({super.key, required this.blocRole});

  @override
  Widget build(BuildContext context) {
    final TextEditingController searchController = TextEditingController();
    double screenWidth = MediaQuery.of(context).size.width;

    int crossAxisCount = (screenWidth ~/ 200).clamp(1, 6);

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          decoration: containerDecoration.copyWith(
            borderRadius: const BorderRadius.all(
              Radius.circular(20),
            ),
          ),
          width: 250,
          child: TextFormField(
            controller: searchController,
            style: const TextStyle(color: Colors.black),
            decoration: textBoxDecoration(radios: 15)!.copyWith(
                fillColor: ColorsManager.whiteColors,
                errorStyle: const TextStyle(height: 0),
                hintStyle: context.textTheme.titleSmall?.copyWith(
                  color: Colors.grey,
                  fontSize: 12,
                ),
                hintText: 'Search',
                suffixIcon: SvgPicture.asset(Assets.searchIconUser)),
          ),
        ),
        Expanded(
          child: GridView.builder(
            padding: const EdgeInsets.all(10),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: crossAxisCount,
              crossAxisSpacing: 16,
              mainAxisSpacing: 16,
              childAspectRatio: 2 / 2.5,
            ),
            itemCount: blocRole.roleModel.length ?? 0,
            itemBuilder: (context, index) {
              final role = blocRole.roleModel[index];
              if (role == null) {
                return const SizedBox.shrink();
              }
              return RoleCard(
                name: role.roleName ?? 'Unknown',
              );
            },
          ),
        ),
      ],
    );
  }
}