Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import * as React from "react";
import {
List,
Datagrid,
TextField,
EditButton,
DeleteButton,
Create,
SimpleForm,
TextInput,
NumberInput,
Edit,
Show,
SimpleShowLayout,
NumberField,
SelectInput,
SelectField,
} from "react-admin";
import { AppBar, Toolbar, Typography, makeStyles } from "@material-ui/core";
export const categorias = [
{ id: "electronica", name: "Electrónica" },
{ id: "ropa", name: "Ropa" },
{ id: "juguetes", name: "Juguetes" },
];
export const proveedores = [
{ id: "lenovo", name: "Lenovo" },
{ id: "apple", name: "Apple" },
{ id: "samsung", name: "Samsung" },
];
// Estilos personalizados para el AppBar
const useStyles = makeStyles(() => ({
appBar: {
backgroundColor: "#ff0000", // Color de fondo rojo
},
title: {
flexGrow: 1,
},
}));
const CustomAppBar: React.FC = () => {
const classes = useStyles();
return (
<AppBar position="static" className={classes.appBar}>
<Toolbar>
<Typography variant="h6" className={classes.title}>
LISTA DE PRODUCTOS
</Typography>
{/* Aquí puedes agregar más elementos de AppBar según tu diseño */}
</Toolbar>
</AppBar>
);
};
export const ProductoList: React.FC<any> = (props) => (
<>
<CustomAppBar /> {/* Incluye aquí tu AppBar personalizado */}
<List {...props}>
<Datagrid>
<TextField source="nombre" />
<TextField source="descripcion" />
<NumberField source="precio" />
<NumberField source="stock" />
<SelectField source="categoria" choices={categorias} />
<SelectField source="proveedor" choices={proveedores} />
<EditButton />
<DeleteButton />
</Datagrid>
</List>
</>
);
export const ProductoCreate: React.FC<any> = (props) => (
<>
<CustomAppBar />
<Create {...props}>
<SimpleForm>
<TextInput source="nombre" />
<TextInput source="descripcion" />
<NumberInput source="precio" />
<NumberInput source="stock" />
<SelectInput source="categoria" choices={categorias} />
<SelectInput source="proveedor" choices={proveedores} />
</SimpleForm>
</Create>
</>
);
export const ProductoEdit: React.FC<any> = (props) => (
<>
<CustomAppBar />
<div className="ProductoEdit">
<Edit {...props}>
<SimpleForm>
<TextInput source="nombre" />
<TextInput source="descripcion" />
<NumberInput source="precio" />
<NumberInput source="stock" />
<SelectInput source="categoria" choices={categorias} />
<SelectInput source="proveedor" choices={proveedores} />
</SimpleForm>
</Edit>
</div>
</>
);
export const ProductoShow: React.FC<any> = (props) => (
<>
<CustomAppBar />
<Show {...props}>
<SimpleShowLayout>
<TextField source="nombre" />
<TextField source="descripcion" />
<NumberField source="precio" />
<NumberField source="stock" />
<SelectField source="categoria" choices={categorias} />
<SelectField source="proveedor" choices={proveedores} />
</SimpleShowLayout>
</Show>
</>
);
|