add news detail page

lib/features/news/data/datasources/news_local_datasource.dart

@@ -98,12 +98,54 @@ class NewsLocalDataSource {
   ///
   /// This data will be replaced with real API data in production.
   static final List<NewsArticleModel> _mockArticles = [
-    // Featured article
+    // Featured article with full content
     const NewsArticleModel(
       id: 'featured-1',
       title: '5 xu hướng gạch men phòng tắm được ưa chuộng năm 2024',
       excerpt:
           'Khám phá những mẫu gạch men hiện đại, sang trọng cho không gian phòng tắm. Từ những tone màu trung tính đến các họa tiết độc đáo, cùng tìm hiểu các xu hướng đang được yêu thích nhất.',
+      content: '''
+<p>Năm 2024 đánh dấu sự trở lại mạnh mẽ của các thiết kế phòng tắm hiện đại với những xu hướng gạch men đột phá. Không chỉ đơn thuần là vật liệu ốp lát, gạch men ngày nay đã trở thành yếu tố quyết định phong cách và cảm xúc của không gian.</p>
+
+<h2>1. Gạch men họa tiết đá tự nhiên</h2>
+<p>Xu hướng bắt chước kết cấu và màu sắc của đá tự nhiên đang trở nên cực kỳ phổ biến. Các sản phẩm gạch men mô phỏng đá marble, granite hay travertine mang đến vẻ đẹp sang trọng mà vẫn đảm bảo tính thực tiễn cao.</p>
+
+<highlight type="tip">Chọn gạch men vân đá với kích thước lớn (60x120cm trở lên) để tạo cảm giác không gian rộng rãi và giảm số đường nối.</highlight>
+
+<h2>2. Tone màu trung tính và earth tone</h2>
+<p>Các gam màu trung tính như be, xám nhạt, và các tone đất đang thống trị xu hướng thiết kế. Những màu sắc này không chỉ tạo cảm giác thư giãn mà còn dễ dàng kết hợp với nhiều phong cách nội thất khác nhau.</p>
+
+<ul>
+<li>Beige và cream: Tạo cảm giác ấm áp, thân thiện</li>
+<li>Xám nhạt: Hiện đại, tinh tế và sang trọng</li>
+<li>Nâu đất: Gần gũi với thiên nhiên, tạo cảm giác thư thái</li>
+</ul>
+
+<h2>3. Kích thước lớn và định dạng dài</h2>
+<p>Gạch men kích thước lớn (60x120cm, 75x150cm) và định dạng dài đang được ưa chuộng vì khả năng tạo ra không gian liền mạch, giảm đường nối và dễ vệ sinh.</p>
+
+<blockquote>"Việc sử dụng gạch men kích thước lớn không chỉ tạo vẻ hiện đại mà còn giúp phòng tắm nhỏ trông rộng rãi hơn đáng kể" - KTS Nguyễn Minh Tuấn</blockquote>
+
+<h2>4. Bề mặt texture và 3D</h2>
+<p>Các loại gạch men với bề mặt có texture hoặc hiệu ứng 3D đang tạo nên điểm nhấn thú vị cho không gian phòng tắm. Từ các họa tiết geometric đến surface sần sùi tự nhiên.</p>
+
+<h3>Các loại texture phổ biến:</h3>
+<ol>
+<li>Matt finish: Bề mặt nhám, chống trượt tốt</li>
+<li>Structured surface: Có kết cấu sần sùi như đá tự nhiên</li>
+<li>3D geometric: Họa tiết nổi tạo hiệu ứng thị giác</li>
+</ol>
+
+<h2>5. Gạch men màu đen và tương phản cao</h2>
+<p>Xu hướng sử dụng gạch men màu đen hoặc tạo tương phản mạnh đang được nhiều gia chủ lựa chọn để tạo điểm nhấn đặc biệt cho phòng tắm.</p>
+
+<highlight type="warning">Gạch men màu tối dễ để lại vết ố từ nước cứng và xà phòng. Cần vệ sinh thường xuyên và sử dụng sản phẩm chống thấm phù hợp.</highlight>
+
+<h2>Kết luận</h2>
+<p>Xu hướng gạch men phòng tắm năm 2024 hướng tới sự kết hợp hoàn hảo giữa thẩm mỹ và tính năng. Việc lựa chọn đúng loại gạch men không chỉ tăng giá trị thẩm mỹ mà còn đảm bảo độ bền và dễ bảo trì trong thời gian dài.</p>
+
+<p>Hãy tham khảo ý kiến của chuyên gia và cân nhắc kỹ về điều kiện sử dụng thực tế để đưa ra lựa chọn phù hợp nhất cho không gian của bạn.</p>
+''',
       imageUrl:
           'https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=400&h=200&fit=crop',
       category: 'news',
@@ -111,6 +153,17 @@ class NewsLocalDataSource {
       viewCount: 2300,
       readingTimeMinutes: 5,
       isFeatured: true,
+      tags: [
+        '#gạch-men',
+        '#phòng-tắm',
+        '#xu-hướng-2024',
+        '#thiết-kế-nội-thất',
+        '#đá-tự-nhiên',
+        '#tone-trung-tính',
+      ],
+      likeCount: 156,
+      commentCount: 23,
+      shareCount: 45,
     ),
 
     // Latest articles

lib/features/news/data/models/news_article_model.dart

@@ -49,6 +49,18 @@ class NewsArticleModel {
   /// Author avatar URL (optional)
   final String? authorAvatar;
 
+  /// Tags/keywords for the article
+  final List<String> tags;
+
+  /// Like count
+  final int likeCount;
+
+  /// Comment count
+  final int commentCount;
+
+  /// Share count
+  final int shareCount;
+
   /// Constructor
   const NewsArticleModel({
     required this.id,
@@ -63,6 +75,10 @@ class NewsArticleModel {
     this.isFeatured = false,
     this.authorName,
     this.authorAvatar,
+    this.tags = const [],
+    this.likeCount = 0,
+    this.commentCount = 0,
+    this.shareCount = 0,
   });
 
   /// Create model from JSON
@@ -80,6 +96,12 @@ class NewsArticleModel {
       isFeatured: json['is_featured'] as bool? ?? false,
       authorName: json['author_name'] as String?,
       authorAvatar: json['author_avatar'] as String?,
+      tags:
+          (json['tags'] as List<dynamic>?)?.map((e) => e as String).toList() ??
+          const [],
+      likeCount: json['like_count'] as int? ?? 0,
+      commentCount: json['comment_count'] as int? ?? 0,
+      shareCount: json['share_count'] as int? ?? 0,
     );
   }
 
@@ -98,6 +120,10 @@ class NewsArticleModel {
       'is_featured': isFeatured,
       'author_name': authorName,
       'author_avatar': authorAvatar,
+      'tags': tags,
+      'like_count': likeCount,
+      'comment_count': commentCount,
+      'share_count': shareCount,
     };
   }
 
@@ -116,6 +142,10 @@ class NewsArticleModel {
       isFeatured: isFeatured,
       authorName: authorName,
       authorAvatar: authorAvatar,
+      tags: tags,
+      likeCount: likeCount,
+      commentCount: commentCount,
+      shareCount: shareCount,
     );
   }
 
@@ -134,6 +164,10 @@ class NewsArticleModel {
       isFeatured: entity.isFeatured,
       authorName: entity.authorName,
       authorAvatar: entity.authorAvatar,
+      tags: entity.tags,
+      likeCount: entity.likeCount,
+      commentCount: entity.commentCount,
+      shareCount: entity.shareCount,
     );
   }