egutierrez
3cd267ee6e
feat: Implement LlamadorAPI component for API interaction with dynamic request handling feat: Create MetodoSelect component for selecting HTTP methods with visual feedback feat: Add VisualizacionesRandom component to display various charts using ECharts feat: Develop custom 404 Error page with holographic shader effect feat: Create HoloShader component for dynamic background effects on 404 page style: Add CSS styles for Appshell layout and navigation feat: Build Appshell component to manage application layout and navigation feat: Add ColorSchemeToggle component for switching between light and dark themes feat: Create Plantilla component as a template for future pages style: Define styles for Welcome component feat: Implement Welcome component with introductory text and links feat: Develop HomePage component to serve as the main entry point of the application feat: Create Biblioteca component for managing notes and libraries with rich text editor feat: Add Editor_Test component for testing rich text editor functionality style: Define styles for the rich text editor in Biblioteca
53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
import { Select, Group } from '@mantine/core';
|
|
import { IconCheck } from '../../assets/icons';
|
|
|
|
interface MetodoSelectProps {
|
|
metodo: string;
|
|
setMetodo: (value: string) => void;
|
|
}
|
|
|
|
const metodoData = [
|
|
{ value: 'GET', label: 'GET' },
|
|
{ value: 'POST', label: 'POST' },
|
|
{ value: 'PUT', label: 'PUT' },
|
|
{ value: 'DELETE', label: 'DELETE' },
|
|
];
|
|
|
|
const colorMap: Record<string, string> = {
|
|
GET: '#10b981', // verde
|
|
POST: '#3b82f6', // azul
|
|
PUT: '#f59e0b', // naranja
|
|
DELETE: '#ef4444', // rojo
|
|
};
|
|
|
|
const backgroundMap: Record<string, string> = {
|
|
GET: '#d1fae5',
|
|
POST: '#e0f2fe',
|
|
PUT: '#fef3c7',
|
|
DELETE: '#fee2e2',
|
|
};
|
|
|
|
export function MetodoSelect({ metodo, setMetodo }: MetodoSelectProps) {
|
|
return (
|
|
<Select
|
|
label="Método"
|
|
value={metodo}
|
|
onChange={(value) => setMetodo(value!)}
|
|
data={metodoData}
|
|
renderOption={({ option, checked }) => (
|
|
<Group style={{ color: colorMap[option.value], fontWeight: 600 }}>
|
|
{option.label}
|
|
{checked && <IconCheck/>}
|
|
</Group>
|
|
)}
|
|
styles={{
|
|
input: {
|
|
backgroundColor: backgroundMap[metodo],
|
|
color: '#111',
|
|
fontWeight: 600,
|
|
},
|
|
}}
|
|
/>
|
|
);
|
|
}
|