refactor(ui_layouts): Refactored block using the UI components package, introducing breaking changes

packages/wyatt_ui_layout/example/lib/pages/app_bar_layout_page.dart

@@ -6,12 +6,15 @@ class AppBarLayoutPage extends StatelessWidget {
   const AppBarLayoutPage({super.key});
 
   @override
-  Widget build(BuildContext context) => TopAppBarLayout(
-        custom: (topBar) =>
-            topBar?.copyWith.title(const TextWrapper('New Title')),
-        body: const Center(
-          child: Text(
-            'Body',
+  Widget build(BuildContext context) => LayoutBuilder(
+        builder: (context, constraint) => StructuralLayout.withTopAppBar(
+          barId: constraint.maxWidth < 600 ? 'mobile' : 'desktop',
+          custom: (topBar) =>
+              topBar?.copyWith.title(const TextWrapper('New Title')),
+          body: const Center(
+            child: Text(
+              'Body',
+            ),
           ),
         ),
       );

packages/wyatt_ui_layout/example/lib/pages/bottom_navigation_bar_layout_page_1.dart

@@ -5,7 +5,7 @@ class BottomNavigationBarLayoutPage1 extends StatelessWidget {
   const BottomNavigationBarLayoutPage1({super.key});
 
   @override
-  Widget build(BuildContext context) => BottomNavigationBarLayout(
+  Widget build(BuildContext context) => StructuralLayout.withBottomNavBar(
         custom: (p0) => p0?.copyWith.call(currentIndex: 0),
         body: const TopAppBarLayout(
           body: Center(

packages/wyatt_ui_layout/example/lib/pages/bottom_navigation_bar_layout_page_2.dart

@@ -5,7 +5,7 @@ class BottomNavigationBarLayoutPage2 extends StatelessWidget {
   const BottomNavigationBarLayoutPage2({super.key});
 
   @override
-  Widget build(BuildContext context) => BottomNavigationBarLayout(
+  Widget build(BuildContext context) => StructuralLayout.withBottomNavBar(
         custom: (p0) => p0?.copyWith.currentIndex(1),
         body: const TopAppBarLayout(
           body: Center(