feat: slicing home page

lib/presentation/home/widgets/custom_tab_bar.dart

@@ -2,8 +2,6 @@ import 'package:flutter/material.dart';
 
 import '../../../core/constants/colors.dart';
 
-
-
 class CustomTabBar extends StatefulWidget {
   final List<String> tabTitles;
   final int initialTabIndex;
@@ -34,33 +32,38 @@ class _CustomTabBarState extends State<CustomTabBar> {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.stretch,
       children: [
-        Row(
-          children: List.generate(
-            widget.tabTitles.length,
-            (index) => GestureDetector(
-              onTap: () {
-                setState(() {
-                  _selectedIndex = index;
-                });
-              },
-              child: Container(
-                padding: const EdgeInsets.symmetric(vertical: 14),
-                margin: const EdgeInsets.only(right: 32),
-                decoration: BoxDecoration(
-                  border: _selectedIndex == index
-                      ? const Border(
-                          bottom: BorderSide(
-                            width: 3.0,
-                            color: AppColors.primary,
-                          ),
-                        )
-                      : null,
-                ),
-                child: Text(
-                  widget.tabTitles[index],
-                  style: const TextStyle(
-                    color: AppColors.primary,
-                    fontWeight: FontWeight.bold,
+        Container(
+          padding: EdgeInsets.all(16),
+          decoration: BoxDecoration(
+            color: Colors.white,
+          ),
+          child: Row(
+            children: List.generate(
+              widget.tabTitles.length,
+              (index) => GestureDetector(
+                onTap: () {
+                  setState(() {
+                    _selectedIndex = index;
+                  });
+                },
+                child: Container(
+                  padding:
+                      const EdgeInsets.symmetric(vertical: 6, horizontal: 12),
+                  margin: const EdgeInsets.only(right: 16),
+                  decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(8),
+                    color: _selectedIndex == index
+                        ? AppColors.primary
+                        : Colors.transparent,
+                  ),
+                  child: Text(
+                    widget.tabTitles[index],
+                    style: TextStyle(
+                      color: _selectedIndex == index
+                          ? Colors.white
+                          : AppColors.primary,
+                      fontWeight: FontWeight.bold,
+                    ),
                   ),
                 ),
               ),
@@ -75,3 +78,61 @@ class _CustomTabBarState extends State<CustomTabBar> {
     );
   }
 }
+
+class CustomTabBarV2 extends StatelessWidget {
+  final List<String> tabTitles;
+  final List<Widget> tabViews;
+
+  const CustomTabBarV2({
+    super.key,
+    required this.tabTitles,
+    required this.tabViews,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return DefaultTabController(
+      length: tabTitles.length,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Material(
+            elevation: 0,
+            color: Colors.white,
+            borderOnForeground: false,
+            child: Padding(
+              padding: const EdgeInsets.symmetric(vertical: 16),
+              child: TabBar(
+                isScrollable: true,
+                tabAlignment: TabAlignment.start,
+                labelColor: Colors.white,
+                labelStyle: TextStyle(
+                  fontWeight: FontWeight.bold,
+                ),
+                dividerColor: Colors.transparent,
+                unselectedLabelColor: AppColors.primary,
+                indicator: BoxDecoration(
+                  color: AppColors.primary, // Warna button saat aktif
+                  borderRadius: BorderRadius.circular(8),
+                ),
+                indicatorColor: Colors.transparent,
+                tabs: tabTitles
+                    .map((title) => Padding(
+                          padding: const EdgeInsets.symmetric(horizontal: 16),
+                          child: Tab(text: title),
+                        ))
+                    .toList(),
+              ),
+            ),
+          ),
+          Expanded(
+            // ✅ ini bagian penting
+            child: TabBarView(
+              children: tabViews,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}