Gestionado todo el frontend para domain driven design

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
2025-06-11 22:53:32 +02:00
parent e1b756ac99
commit 3cd267ee6e
35 changed files with 73 additions and 600 deletions
@@ -0,0 +1,52 @@
+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,
+        },
+      }}
+    />
+  );
+}