Creacion Pedido design

lib/mvvm/views/pedido/categorias_screen.dart

@@ -80,7 +80,7 @@ class CategoriaCard extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Card(
-      child: ,
+      child: Placeholder(),
     );
   }
-}G
+}

lib/mvvm/views/pedido/creacion_pedido_screen.dart

@@ -11,6 +11,7 @@ class CreacionPedido extends StatefulWidget {
 
 class _CreacionPedidoState extends State<CreacionPedido> {
   final _selectedIndex = 0;
+
   @override
   Widget build(BuildContext context) {
     return Container(
@@ -29,9 +30,123 @@ class _CreacionPedidoState extends State<CreacionPedido> {
           title: const CustomAppbar(),
         ),
         body: Row(
-          children: [CustomNavigationRail(selectedIndex: _selectedIndex)],
+          children: [
+            CustomNavigationRail(selectedIndex: _selectedIndex),
+            Expanded(
+              flex: 5,
+              child: Container(
+                decoration: BoxDecoration(
+                  borderRadius: BorderRadius.circular(20),
+                  color: Colors.white,
+                ),
+                child: Column(
+                  children: [
+                    const CategoryFilters(),
+                    Expanded(
+                      child: Container(
+                        padding: const EdgeInsets.all(8),
+                        child: GridView.builder(
+                          gridDelegate:
+                              const SliverGridDelegateWithFixedCrossAxisCount(
+                            crossAxisCount: 4,
+                            crossAxisSpacing: 10,
+                            mainAxisSpacing: 10,
+                          ),
+                          itemCount: 20,
+                          itemBuilder: (context, index) {
+                            return Container(
+                              decoration: BoxDecoration(
+                                color: Colors.grey.shade200,
+                                borderRadius: BorderRadius.circular(20),
+                              ),
+                              child: Center(
+                                child: Text(
+                                  'Item $index',
+                                  style: const TextStyle(fontSize: 20),
+                                ),
+                              ),
+                            );
+                          },
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+            Expanded(
+              flex: 3,
+              child: Container(
+                decoration: BoxDecoration(
+                  borderRadius: BorderRadius.circular(20),
+                  color: Colors.white,
+                ),
+                child: const Text("test"),
+              ),
+            )
+          ],
         ),
       ),
     );
   }
 }
+
+class CategoryFilters extends StatefulWidget {
+  const CategoryFilters({super.key});
+
+  @override
+  State<CategoryFilters> createState() => CategoryFiltersState();
+}
+
+class CategoryFiltersState extends State<CategoryFilters> {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(8),
+      decoration: BoxDecoration(
+        border: Border(bottom: BorderSide(color: Colors.grey.shade300)),
+      ),
+      child: Row(
+        children: [
+          // Buscador
+          Expanded(
+            child: Container(
+              height: 40,
+              padding: const EdgeInsets.symmetric(horizontal: 12),
+              decoration: BoxDecoration(
+                color: Colors.grey.shade200,
+                borderRadius: BorderRadius.circular(20),
+              ),
+              child: Row(
+                children: [
+                  Icon(Icons.search, color: Colors.grey.shade600),
+                  const SizedBox(width: 8),
+                  Text('Buscar', style: TextStyle(color: Colors.grey.shade600)),
+                ],
+              ),
+            ),
+          ),
+          const SizedBox(width: 10),
+
+          // Botones de filtro
+          _FilterButtonPLaceHolder('Categoría'),
+          const SizedBox(width: 10),
+          _FilterButtonPLaceHolder('Topics'),
+          const SizedBox(width: 10),
+          _FilterButtonPLaceHolder('Extras'),
+        ],
+      ),
+    );
+  }
+}
+
+Widget _FilterButtonPLaceHolder(String text) {
+  return Container(
+    padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
+    decoration: BoxDecoration(
+      color: Colors.grey.shade200,
+      borderRadius: BorderRadius.circular(4),
+    ),
+    child: Text(text, style: const TextStyle(fontSize: 16)),
+  );
+}