feat: Add Consulta_API page and routing, implement API request functionality
- Introduced a new page for API consultation (`Consulta_API`) with a form to send requests. - Added routing for the new page and a 404 error page. - Created a `MetodoSelect` component for selecting HTTP methods. - Implemented a `MiBoton` component for a customizable button. - Updated the `HomePage` layout to include a sidebar (`DoubleNavbar`) and main content area. - Enhanced the `Welcome` component with a new greeting and description. - Added a holographic shader background to the 404 error page. - Updated dependencies in `yarn.lock` for new components and features. - Styled the sidebar and main content for better user experience.
This commit is contained in:
@@ -1,11 +1,21 @@
|
||||
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
|
||||
import { HomePage } from './pages/Home.page';
|
||||
import { Consulta_API } from './pages/Consulta_api';
|
||||
import { Error_404 } from './pages/404'; // Ajusta si está en otra carpeta
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: '/',
|
||||
element: <HomePage />,
|
||||
},
|
||||
{
|
||||
path: '/Consulta_API',
|
||||
element: <Consulta_API />,
|
||||
},
|
||||
{
|
||||
path: '*',
|
||||
element: <Error_404 />,
|
||||
},
|
||||
]);
|
||||
|
||||
export function Router() {
|
||||
|
||||
@@ -0,0 +1,114 @@
|
||||
.navbar {
|
||||
height: 100vh; /* ← Ocupa todo el alto de la ventana */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
|
||||
width: 300px;
|
||||
border-right: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
|
||||
position: sticky; /* ← Opcional, si quieres que se quede "pegado" */
|
||||
top: 0; /* ← Ancla arriba */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.collapsed {
|
||||
width: 70px; /* Ancho reducido cuando colapsa */
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.collapseButton {
|
||||
margin-top: auto; /* Hace que el botón se empuje hacia abajo */
|
||||
margin-bottom: 16px; /* ← Agrega separación del borde inferior */
|
||||
|
||||
}
|
||||
|
||||
.aside {
|
||||
flex: 0 0 60px;
|
||||
background-color: var(--mantine-color-body);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-right: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
|
||||
}
|
||||
|
||||
.mainLink {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: var(--mantine-radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
|
||||
|
||||
&:hover {
|
||||
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
|
||||
}
|
||||
|
||||
&[data-active] {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: var(--mantine-color-blue-light);
|
||||
color: var(--mantine-color-blue-light-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family:
|
||||
Greycliff CF,
|
||||
var(--mantine-font-family);
|
||||
margin-bottom: var(--mantine-spacing-xl);
|
||||
background-color: var(--mantine-color-body);
|
||||
padding: var(--mantine-spacing-md);
|
||||
padding-top: 18px;
|
||||
height: 60px;
|
||||
border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 60px;
|
||||
padding-top: var(--mantine-spacing-md);
|
||||
border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
|
||||
margin-bottom: var(--mantine-spacing-xl);
|
||||
}
|
||||
|
||||
.link {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
border-top-right-radius: var(--mantine-radius-md);
|
||||
border-bottom-right-radius: var(--mantine-radius-md);
|
||||
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
|
||||
padding: 0 var(--mantine-spacing-md);
|
||||
font-size: var(--mantine-font-size-sm);
|
||||
margin-right: var(--mantine-spacing-md);
|
||||
font-weight: 500;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
|
||||
&:hover {
|
||||
background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
|
||||
color: light-dark(var(--mantine-color-dark), var(--mantine-color-light));
|
||||
}
|
||||
|
||||
&[data-active] {
|
||||
&,
|
||||
&:hover {
|
||||
border-left-color: var(--mantine-color-blue-filled);
|
||||
background-color: var(--mantine-color-blue-filled);
|
||||
color: var(--mantine-color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
import {
|
||||
IconCalendarStats,
|
||||
IconDeviceDesktopAnalytics,
|
||||
IconFingerprint,
|
||||
IconGauge,
|
||||
IconHome2,
|
||||
IconSettings,
|
||||
IconUser,
|
||||
IconArrowBarLeft,
|
||||
IconArrowBarRight,
|
||||
} from '@tabler/icons-react';
|
||||
import {
|
||||
Title,
|
||||
Tooltip,
|
||||
UnstyledButton,
|
||||
ActionIcon,
|
||||
} from '@mantine/core';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import { useEffect, useState } from 'react';
|
||||
import classes from './DoubleNavbar.module.css';
|
||||
|
||||
const mainLinksdata = [
|
||||
{ icon: IconHome2, label: 'Home' },
|
||||
{ icon: IconGauge, label: 'Dashboard' },
|
||||
{ icon: IconDeviceDesktopAnalytics, label: 'Analytics' },
|
||||
{ icon: IconCalendarStats, label: 'Releases' },
|
||||
{ icon: IconUser, label: 'Account' },
|
||||
{ icon: IconFingerprint, label: 'Security' },
|
||||
{ icon: IconSettings, label: 'Settings' },
|
||||
];
|
||||
|
||||
const submenuLinks: Record<string, { label: string; to: string }[]> = {
|
||||
Home: [
|
||||
{ label: 'Inicio', to: '/' },
|
||||
{ label: 'Consulta Api', to: '/Consulta_API' },
|
||||
],
|
||||
Dashboard: [
|
||||
{ label: 'Resumen', to: '/dashboard/resumen' },
|
||||
{ label: 'Estadísticas', to: '/dashboard/estadisticas' },
|
||||
{ label: 'Usuarios', to: '/dashboard/usuarios' },
|
||||
],
|
||||
Analytics: [
|
||||
{ label: 'Conversiones', to: '/analytics/conversiones' },
|
||||
{ label: 'Tráfico', to: '/analytics/trafico' },
|
||||
{ label: 'Tendencias', to: '/analytics/tendencias' },
|
||||
],
|
||||
Releases: [
|
||||
{ label: 'Notas de versión', to: '/releases/notas-de-version' },
|
||||
{ label: 'Historial', to: '/releases/historial' },
|
||||
],
|
||||
Account: [
|
||||
{ label: 'Perfil', to: '/account/perfil' },
|
||||
{ label: 'Suscripciones', to: '/account/suscripciones' },
|
||||
],
|
||||
Security: [
|
||||
{ label: 'Contraseña', to: '/security/contraseña' },
|
||||
{ label: '2FA', to: '/security/2fa' },
|
||||
],
|
||||
Settings: [
|
||||
{ label: 'Preferencias', to: '/settings/preferencias' },
|
||||
{ label: 'Notificaciones', to: '/settings/notificaciones' },
|
||||
],
|
||||
};
|
||||
|
||||
export function DoubleNavbar() {
|
||||
const location = useLocation();
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const [manualActiveTab, setManualActiveTab] = useState<string | null>(null);
|
||||
|
||||
// Detectar cuál pestaña es activa por la ruta actual
|
||||
const matchedMain = Object.entries(submenuLinks).find(([mainKey, items]) =>
|
||||
items.some((item) => location.pathname.startsWith(item.to))
|
||||
);
|
||||
|
||||
const routeBasedActive = matchedMain?.[0] ?? 'Home';
|
||||
const active = manualActiveTab ?? routeBasedActive;
|
||||
|
||||
const activeLink =
|
||||
submenuLinks[active]?.find((item) => location.pathname === item.to)?.label ?? '';
|
||||
|
||||
const mainLinks = mainLinksdata.map((link) => (
|
||||
<Tooltip
|
||||
label={link.label}
|
||||
position="right"
|
||||
withArrow
|
||||
transitionProps={{ duration: 0 }}
|
||||
key={link.label}
|
||||
>
|
||||
<UnstyledButton
|
||||
onClick={() => setManualActiveTab(link.label)}
|
||||
className={classes.mainLink}
|
||||
data-active={link.label === active || undefined}
|
||||
>
|
||||
<link.icon size={22} stroke={1.5} />
|
||||
</UnstyledButton>
|
||||
</Tooltip>
|
||||
));
|
||||
|
||||
const links = (submenuLinks[active] || []).map((item) => (
|
||||
<Link
|
||||
className={classes.link}
|
||||
data-active={activeLink === item.label || undefined}
|
||||
to={item.to}
|
||||
key={item.label}
|
||||
style={{ display: collapsed ? 'none' : 'block' }}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
));
|
||||
|
||||
// Resetea pestaña seleccionada si la ruta cambia (opcional)
|
||||
useEffect(() => {
|
||||
setManualActiveTab(null);
|
||||
}, [location.pathname]);
|
||||
|
||||
return (
|
||||
<nav className={`${classes.navbar} ${collapsed ? classes.collapsed : ''}`}>
|
||||
<div className={classes.wrapper}>
|
||||
<div className={classes.aside}>
|
||||
{/* Sección superior: logo + mainLinks */}
|
||||
<div className={classes.topSection}>
|
||||
<div className={classes.logo}>
|
||||
<img
|
||||
src="/src/favicon.svg"
|
||||
alt="Logo"
|
||||
style={{ width: 30, height: 30 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{mainLinks}
|
||||
</div>
|
||||
|
||||
{/* Botón de colapsar separado abajo */}
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
onClick={() => setCollapsed((c) => !c)}
|
||||
className={classes.collapseButton}
|
||||
size="lg"
|
||||
>
|
||||
{collapsed ? <IconArrowBarRight size={20} /> : <IconArrowBarLeft size={20} />}
|
||||
</ActionIcon>
|
||||
</div>
|
||||
|
||||
<div className={classes.main}>
|
||||
{!collapsed && (
|
||||
<Title order={4} className={classes.title}>
|
||||
{active}
|
||||
</Title>
|
||||
)}
|
||||
{links}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
import { Card, Title, Box, useMantineTheme } from '@mantine/core';
|
||||
import { Canvas, extend, useFrame, useThree } from '@react-three/fiber';
|
||||
import { useRef, useMemo } from 'react';
|
||||
import * as THREE from 'three';
|
||||
|
||||
// 🎨 Utilidad para convertir hex a RGB [0–1]
|
||||
function hexToRGBArray(hex: string): [number, number, number] {
|
||||
const bigint = parseInt(hex.replace('#', ''), 16);
|
||||
return [
|
||||
((bigint >> 16) & 255) / 255,
|
||||
((bigint >> 8) & 255) / 255,
|
||||
(bigint & 255) / 255,
|
||||
];
|
||||
}
|
||||
|
||||
// ✨ Shader personalizado estilo holográfico, con color dinámico
|
||||
class HoloShaderMaterial extends THREE.ShaderMaterial {
|
||||
constructor(color: [number, number, number]) {
|
||||
super({
|
||||
uniforms: {
|
||||
u_time: { value: 0 },
|
||||
u_resolution: { value: new THREE.Vector2() },
|
||||
u_color: { value: new THREE.Vector3(...color) },
|
||||
},
|
||||
vertexShader: `
|
||||
void main() {
|
||||
gl_Position = vec4(position, 1.0);
|
||||
}
|
||||
`,
|
||||
fragmentShader: `
|
||||
precision mediump float;
|
||||
uniform float u_time;
|
||||
uniform vec2 u_resolution;
|
||||
uniform vec3 u_color;
|
||||
|
||||
void main() {
|
||||
vec2 uv = gl_FragCoord.xy / u_resolution;
|
||||
vec2 pos = uv * 10.0;
|
||||
pos.x += u_time * 0.3;
|
||||
pos.y += sin(u_time * 0.2) * 2.0;
|
||||
|
||||
float color = sin(pos.x + sin(pos.y + sin(pos.x))) * 0.5 + 0.5;
|
||||
|
||||
vec3 c = vec3(
|
||||
u_color.r + 0.2 * sin(u_time + pos.x),
|
||||
u_color.g + 0.2 * cos(u_time + pos.y),
|
||||
u_color.b + 0.2 * sin(pos.x + pos.y + u_time)
|
||||
);
|
||||
|
||||
gl_FragColor = vec4(c * color, 1.0);
|
||||
}
|
||||
`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
extend({ HoloShaderMaterial });
|
||||
|
||||
// 🎥 Plano con el shader
|
||||
function HoloPlane({ color }: { color: [number, number, number] }) {
|
||||
const mat = useRef<any>();
|
||||
const { size } = useThree();
|
||||
|
||||
useFrame(({ clock }) => {
|
||||
if (mat.current) {
|
||||
mat.current.uniforms.u_time.value = clock.getElapsedTime();
|
||||
mat.current.uniforms.u_resolution.value.set(size.width, size.height);
|
||||
}
|
||||
});
|
||||
|
||||
const material = useMemo(() => new HoloShaderMaterial(color), [color]);
|
||||
|
||||
return (
|
||||
<mesh>
|
||||
<planeGeometry args={[2, 2]} />
|
||||
<primitive object={material} ref={mat} attach="material" />
|
||||
</mesh>
|
||||
);
|
||||
}
|
||||
|
||||
// 🎨 Fondo que ocupa todo el contenedor
|
||||
function HolographicBackground({ color }: { color: [number, number, number] }) {
|
||||
return (
|
||||
<Box
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
zIndex: 0,
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
>
|
||||
<Canvas orthographic camera={{ zoom: 1, position: [0, 0, 1] }}>
|
||||
<HoloPlane color={color} />
|
||||
</Canvas>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// 🧩 Componente final con fondo shader y texto 404
|
||||
export function MantineCardWithShader() {
|
||||
const theme = useMantineTheme();
|
||||
const hex = theme.colors[theme.primaryColor][6];
|
||||
const rgb = hexToRGBArray(hex);
|
||||
|
||||
return (
|
||||
<Card
|
||||
withBorder
|
||||
radius="lg"
|
||||
shadow="xl"
|
||||
style={{
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
minHeight: 300,
|
||||
minWidth: 400,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<HolographicBackground color={rgb} />
|
||||
|
||||
<Box style={{ position: 'relative', zIndex: 1, textAlign: 'center' }}>
|
||||
<Title
|
||||
order={1}
|
||||
style={{
|
||||
fontSize: '15rem',
|
||||
fontWeight: 900,
|
||||
backgroundImage: 'linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0))',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
textAlign: 'center',
|
||||
lineHeight: 1,
|
||||
}}
|
||||
>
|
||||
404
|
||||
</Title>
|
||||
</Box>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import { Select, Group } from '@mantine/core';
|
||||
import { IconCheck } from '@tabler/icons-react';
|
||||
|
||||
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 size={14} />}
|
||||
</Group>
|
||||
)}
|
||||
styles={{
|
||||
input: {
|
||||
backgroundColor: backgroundMap[metodo],
|
||||
color: '#111',
|
||||
fontWeight: 600,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -5,18 +5,13 @@ export function Welcome() {
|
||||
return (
|
||||
<>
|
||||
<Title className={classes.title} ta="center" mt={100}>
|
||||
Welcome to{' '}
|
||||
<Text inherit variant="gradient" component="span" gradient={{ from: 'pink', to: 'yellow' }}>
|
||||
Mantine
|
||||
Hola! {' '}
|
||||
<Text inherit variant="gradient" component="span" gradient={{ from: 'blue', to: 'green' }} style={{ letterSpacing: '1px' }}>
|
||||
Egutierrez
|
||||
</Text>
|
||||
</Title>
|
||||
<Text c="dimmed" ta="center" size="lg" maw={580} mx="auto" mt="xl">
|
||||
This starter Vite project includes a minimal setup, if you want to learn more on Mantine +
|
||||
Vite integration follow{' '}
|
||||
<Anchor href="https://mantine.dev/guides/vite/" size="lg">
|
||||
this guide
|
||||
</Anchor>
|
||||
. To get started edit pages/Home.page.tsx file.
|
||||
<Text c="dimmed" ta="left" size="lg" maw={580} mx="auto" mt="xl">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit modi officia porro natus ullam vero mollitia provident, fuga quidem! Perspiciatis explicabo, vel non illum libero suscipit esse animi a voluptatem!
|
||||
</Text>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
// src/components/MiBoton.tsx
|
||||
|
||||
import { Button } from '@mantine/core';
|
||||
import { MouseEventHandler } from 'react';
|
||||
|
||||
type MiBotonProps = {
|
||||
onClick: MouseEventHandler<HTMLButtonElement>;
|
||||
label?: string;
|
||||
color?: string;
|
||||
};
|
||||
|
||||
function MiBoton({ onClick, label = 'Hola que tal!', color = 'teal' }: MiBotonProps) {
|
||||
return <Button color={color} onClick={onClick}>{label}</Button>;
|
||||
}
|
||||
|
||||
export default MiBoton;
|
||||
@@ -0,0 +1,47 @@
|
||||
import { Box, Title, Text, Button, Group, Stack, Image, Center } from '@mantine/core';
|
||||
import { IconArrowLeft } from '@tabler/icons-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { DoubleNavbar } from '../components/DoubleNavbar'; // Ajusta ruta si es necesario
|
||||
import { MantineCardWithShader } from '../components/HoloShader'; // Ajusta ruta si es necesario
|
||||
|
||||
|
||||
export function Error_404() {
|
||||
return (
|
||||
<Box style={{ display: 'flex', height: '100vh' }}>
|
||||
<DoubleNavbar />
|
||||
|
||||
|
||||
|
||||
<Box style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '2rem' }}>
|
||||
|
||||
<Stack align="center" maw={500} mx="auto">
|
||||
|
||||
|
||||
<MantineCardWithShader />
|
||||
|
||||
|
||||
<Title order={1}>
|
||||
Página no encontrada
|
||||
</Title>
|
||||
|
||||
<Text size="lg">
|
||||
Parece que la página que estás buscando no existe o fue removida. Pero no te preocupes, puedes volver al inicio fácilmente.
|
||||
</Text>
|
||||
|
||||
<Group mt="md">
|
||||
<Button
|
||||
component={Link}
|
||||
to="/"
|
||||
size="md"
|
||||
variant="gradient"
|
||||
gradient={{ from: 'blue', to: 'cyan' }}
|
||||
leftSection={<IconArrowLeft size={18} />}
|
||||
>
|
||||
Volver al inicio
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { ColorSchemeToggle } from '../components/ColorSchemeToggle/ColorSchemeToggle';
|
||||
import { Welcome } from '../components/Welcome/Welcome';
|
||||
import MiBoton from '../components/botoncito';
|
||||
import { Center, Box } from '@mantine/core';
|
||||
import { DoubleNavbar } from '../components/DoubleNavbar';
|
||||
|
||||
|
||||
|
||||
|
||||
export function Prueba_1() {
|
||||
return (
|
||||
<Box style={{ display: 'flex', height: '100vh' }}>
|
||||
<DoubleNavbar /> {/* Sidebar fijo a la izquierda */}
|
||||
|
||||
{/* Contenido principal */}
|
||||
|
||||
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
TextInput,
|
||||
Textarea,
|
||||
Button,
|
||||
Box,
|
||||
Center,
|
||||
Stack,
|
||||
Badge,
|
||||
Group,
|
||||
} from '@mantine/core';
|
||||
import { DoubleNavbar } from '../components/DoubleNavbar';
|
||||
import { MetodoSelect } from '../components/MetodoSelect'; // 👈 Importación del nuevo componente
|
||||
import { useEffect } from 'react';
|
||||
|
||||
|
||||
|
||||
|
||||
export function Consulta_API() {
|
||||
const [direccion, setDireccion] = useState('http://localhost:8000/api/saludo');
|
||||
const [metodo, setMetodo] = useState('GET');
|
||||
const [contenido, setContenido] = useState('');
|
||||
const [respuesta, setRespuesta] = useState('');
|
||||
const [codigoRespuesta, setCodigoRespuesta] = useState<number | null>(null);
|
||||
|
||||
const colorCodigo = (status: number): string => {
|
||||
if (status >= 200 && status < 300) return 'green';
|
||||
if (status >= 300 && status < 400) return 'yellow';
|
||||
if (status >= 400 && status < 500) return 'orange';
|
||||
return 'red';
|
||||
};
|
||||
|
||||
const llamarAPI = async () => {
|
||||
try {
|
||||
const options: RequestInit = {
|
||||
method: metodo,
|
||||
mode: 'cors',
|
||||
headers: {},
|
||||
};
|
||||
|
||||
if (metodo !== 'GET') {
|
||||
options.headers = {
|
||||
'Content-Type': 'application/json',
|
||||
};
|
||||
try {
|
||||
JSON.parse(contenido);
|
||||
options.body = contenido;
|
||||
} catch (err) {
|
||||
setRespuesta('Error: El contenido no es un JSON válido');
|
||||
setCodigoRespuesta(null);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const res = await fetch(direccion, options);
|
||||
setCodigoRespuesta(res.status);
|
||||
|
||||
const contentType = res.headers.get('content-type');
|
||||
|
||||
if (contentType?.includes('application/json')) {
|
||||
const data = await res.json();
|
||||
const formatted = JSON.stringify(data, null, 2);
|
||||
setRespuesta(formatted);
|
||||
} else {
|
||||
const text = await res.text();
|
||||
setRespuesta(text);
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Error en la API:', error);
|
||||
setRespuesta(`Error: ${error.message || error}`);
|
||||
setCodigoRespuesta(null);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
if (e.ctrlKey && e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
llamarAPI();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handler);
|
||||
return () => window.removeEventListener('keydown', handler);
|
||||
}, [metodo, direccion, contenido]);
|
||||
|
||||
|
||||
return (
|
||||
<Box style={{ display: 'flex', height: '100vh' }}>
|
||||
<DoubleNavbar />
|
||||
|
||||
<Box style={{ flex: 1, padding: 40 }}>
|
||||
<Center style={{ height: '100%' }}>
|
||||
<Stack style={{ width: 600 }}>
|
||||
<TextInput
|
||||
label="Dirección"
|
||||
placeholder="http://localhost:8000/api/..."
|
||||
value={direccion}
|
||||
onChange={(e) => setDireccion(e.currentTarget.value)}
|
||||
/>
|
||||
|
||||
<MetodoSelect metodo={metodo} setMetodo={setMetodo} />
|
||||
|
||||
<Textarea
|
||||
label="Contenido (JSON)"
|
||||
placeholder='{"contenido": "Hola"}'
|
||||
value={contenido}
|
||||
onChange={(e) => setContenido(e.currentTarget.value)}
|
||||
autosize
|
||||
minRows={3}
|
||||
/>
|
||||
|
||||
<Button onClick={llamarAPI} color="blue">
|
||||
Enviar solicitud
|
||||
</Button>
|
||||
|
||||
{codigoRespuesta !== null && (
|
||||
<Group>
|
||||
<Badge color={colorCodigo(codigoRespuesta)} size="lg">
|
||||
Código: {codigoRespuesta}
|
||||
</Badge>
|
||||
</Group>
|
||||
)}
|
||||
|
||||
<Textarea
|
||||
label="Respuesta de la API"
|
||||
value={respuesta}
|
||||
readOnly
|
||||
autosize
|
||||
minRows={6}
|
||||
/>
|
||||
</Stack>
|
||||
</Center>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
|
||||
}
|
||||
@@ -1,11 +1,28 @@
|
||||
import { ColorSchemeToggle } from '../components/ColorSchemeToggle/ColorSchemeToggle';
|
||||
import { Welcome } from '../components/Welcome/Welcome';
|
||||
import MiBoton from '../components/botoncito';
|
||||
import { Center, Box } from '@mantine/core';
|
||||
import { DoubleNavbar } from '../components/DoubleNavbar';
|
||||
import { MantineCardWithShader } from '../components/HoloShader';
|
||||
|
||||
|
||||
|
||||
|
||||
export function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<Welcome />
|
||||
<ColorSchemeToggle />
|
||||
</>
|
||||
<Box style={{ display: 'flex', height: '100vh' }}>
|
||||
<DoubleNavbar /> {/* Sidebar fijo a la izquierda */}
|
||||
|
||||
{/* Contenido principal */}
|
||||
<Box style={{ flex: 1, padding: '24px' }}>
|
||||
<Welcome />
|
||||
<ColorSchemeToggle />
|
||||
|
||||
|
||||
<Center mt="md">
|
||||
<MiBoton />
|
||||
</Center>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user