social-app/apps/lib/shared/widgets/page_header.dart

import 'package:flutter/material.dart';

import '../../core/theme/design_tokens.dart';

class PageHeader extends StatelessWidget {
  final Widget? leading;
  final Widget? trailing;
  final double height;

  const PageHeader({super.key, this.leading, this.trailing, this.height = 64});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: height,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            leading ?? const SizedBox.shrink(),
            trailing ?? const SizedBox.shrink(),
          ],
        ),
      ),
    );
  }
}

class BackButton extends StatefulWidget {
  final VoidCallback? onPressed;

  const BackButton({super.key, this.onPressed});

  @override
  State<BackButton> createState() => _BackButtonState();
}

class _BackButtonState extends State<BackButton> {
  bool _isPressed = false;

  @override
  Widget build(BuildContext context) {
    final background = _isPressed ? AppColors.surfaceInfo : AppColors.white;
    final borderColor = _isPressed
        ? AppColors.borderQuaternary
        : AppColors.borderTertiary;

    return AnimatedScale(
      scale: _isPressed ? 0.96 : 1,
      duration: const Duration(milliseconds: 110),
      curve: Curves.easeOut,
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 110),
        decoration: BoxDecoration(
          color: background,
          borderRadius: BorderRadius.circular(AppRadius.full),
          border: Border.all(color: borderColor),
          boxShadow: _isPressed
              ? const []
              : [
                  const BoxShadow(
                    color: AppColors.white,
                    blurRadius: AppRadius.sm,
                    offset: Offset(0, -1),
                  ),
                  BoxShadow(
                    color: AppColors.slate200.withValues(alpha: 0.42),
                    blurRadius: AppRadius.md,
                    offset: const Offset(0, AppSpacing.xs),
                  ),
                ],
        ),
        child: SizedBox(
          width: AppSpacing.xl * 2,
          height: AppSpacing.xl * 2,
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              borderRadius: BorderRadius.circular(AppRadius.full),
              onTap: widget.onPressed ?? () => Navigator.of(context).pop(),
              onTapDown: (_) {
                if (_isPressed) {
                  return;
                }
                setState(() {
                  _isPressed = true;
                });
              },
              onTapCancel: () {
                if (!_isPressed) {
                  return;
                }
                setState(() {
                  _isPressed = false;
                });
              },
              onTapUp: (_) {
                if (!_isPressed) {
                  return;
                }
                setState(() {
                  _isPressed = false;
                });
              },
              child: Center(
                child: Icon(
                  Icons.chevron_left,
                  size: AppSpacing.lg + AppSpacing.xs,
                  color: _isPressed ? AppColors.blue600 : AppColors.slate700,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}