add news detail page

lib/features/news/presentation/widgets/highlight_box.dart

@@ -0,0 +1,106 @@
+/// Highlight Box Widget
+///
+/// A highlighted information box for tips and warnings in article content.
+/// Used to emphasize important information in news articles.
+library;
+
+import 'package:flutter/material.dart';
+import 'package:worker/core/constants/ui_constants.dart';
+
+/// Highlight type enum
+enum HighlightType {
+  /// Tip (lightbulb icon)
+  tip,
+
+  /// Warning (exclamation icon)
+  warning,
+}
+
+/// Highlight Box
+///
+/// Features:
+/// - Gradient background (yellow/orange for both types)
+/// - Icon based on type (lightbulb or exclamation)
+/// - Title and content text
+/// - Rounded corners
+/// - Brown text color for contrast
+class HighlightBox extends StatelessWidget {
+  /// Highlight type
+  final HighlightType type;
+
+  /// Highlight title
+  final String title;
+
+  /// Highlight content/text
+  final String content;
+
+  /// Constructor
+  const HighlightBox({
+    super.key,
+    required this.type,
+    required this.title,
+    required this.content,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: const EdgeInsets.symmetric(vertical: AppSpacing.md),
+      padding: const EdgeInsets.all(AppSpacing.md),
+      decoration: BoxDecoration(
+        gradient: const LinearGradient(
+          begin: Alignment.topLeft,
+          end: Alignment.bottomRight,
+          colors: [
+            Color(0xFFFEF3C7), // light yellow
+            Color(0xFFFED7AA), // light orange
+          ],
+        ),
+        border: Border.all(color: const Color(0xFFF59E0B)),
+        borderRadius: BorderRadius.circular(AppRadius.lg),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          // Title with icon
+          Row(
+            children: [
+              Icon(_getIcon(), size: 20, color: const Color(0xFF92400E)),
+              const SizedBox(width: 8),
+              Text(
+                title,
+                style: const TextStyle(
+                  fontSize: 16,
+                  fontWeight: FontWeight.w600,
+                  color: Color(0xFF92400E),
+                ),
+              ),
+            ],
+          ),
+
+          const SizedBox(height: 8),
+
+          // Content text
+          Text(
+            content,
+            style: const TextStyle(
+              fontSize: 14,
+              color: Color(0xFF92400E),
+              height: 1.5,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  /// Get icon based on type
+  IconData _getIcon() {
+    switch (type) {
+      case HighlightType.tip:
+        return Icons.lightbulb;
+      case HighlightType.warning:
+        return Icons.error_outline;
+    }
+  }
+}