Refactor code structure for improved readability and maintainability
This commit is contained in:
@@ -0,0 +1,59 @@
|
||||
import { Box, Title, Text, Button, Group, Stack, Image, Center } from '@mantine/core';
|
||||
import { useMantineTheme } from '@mantine/core';
|
||||
import { ArrowLeft } from 'phosphor-react'; // ← Importa el icono directamente
|
||||
import { Link } from 'react-router-dom';
|
||||
import { MantineCardWithShader } from './HoloShader_404';
|
||||
import { AppShellWithMenu } from '../Appshell/Appshell';
|
||||
|
||||
export function Error_404() {
|
||||
const theme = useMantineTheme();
|
||||
|
||||
return (
|
||||
<AppShellWithMenu>
|
||||
<Box
|
||||
style={{
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'flex-start',
|
||||
padding: '2rem',
|
||||
paddingTop: '0.5rem',
|
||||
}}
|
||||
>
|
||||
<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: theme.colors.brand[7],
|
||||
to: theme.colors.secondary[4],
|
||||
}}
|
||||
leftSection={<ArrowLeft size={18} />} // ← Usa el icono Phosphor aquí
|
||||
>
|
||||
Volver al inicio
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
</AppShellWithMenu>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
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>(null);
|
||||
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,
|
||||
userSelect: 'none', // <-- evita selección
|
||||
textDecoration: 'none', // <-- evita subrayado
|
||||
}}
|
||||
>
|
||||
404
|
||||
</Title>
|
||||
</Box>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
.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 */
|
||||
}
|
||||
|
||||
|
||||
.title {
|
||||
font-family:
|
||||
Greycliff CF,
|
||||
var(--mantine-font-family);
|
||||
margin-bottom: var(--mantine-spacing-sm);
|
||||
background-color: var(--mantine-color-body);
|
||||
padding: var(--mantine-spacing-xs);
|
||||
padding-top: 15px;
|
||||
height: 50px;
|
||||
border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
|
||||
}
|
||||
|
||||
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Esta es la barra izquierda pequeña donde los iconos */
|
||||
.aside {
|
||||
flex: 0 0 52px;
|
||||
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));
|
||||
}
|
||||
|
||||
.topSection {
|
||||
padding-top: 12px; /* o la cantidad que desees */
|
||||
}
|
||||
|
||||
/* Estos son los iconos */
|
||||
.mainLink {
|
||||
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-bottom: 4px;
|
||||
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-brand-7);
|
||||
color: var(--mantine-color-brand-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.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: 420;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
|
||||
&: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 {
|
||||
background-color: var(--mantine-color-brand-7);
|
||||
color: var(--mantine-color-brand-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,197 @@
|
||||
import {
|
||||
AppShell,
|
||||
Burger,
|
||||
Group,
|
||||
Tooltip,
|
||||
UnstyledButton,
|
||||
Title,
|
||||
useMantineTheme,
|
||||
} from '@mantine/core';
|
||||
import { useMediaQuery } from '@mantine/hooks';
|
||||
import { useEffect, useMemo } from 'react';
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
||||
|
||||
import { submenuLinks } from './Links_Appshell/submenuLinks';
|
||||
import { mainLinksdata } from './Links_Appshell/navigationsLinks';
|
||||
import { default as LogoIcon } from '../icons/favicon';
|
||||
|
||||
import classes from './Appshell.module.css';
|
||||
|
||||
import {
|
||||
useAppShellStore,
|
||||
getLastSubmenuRoute,
|
||||
setLastSubmenuRoute,
|
||||
} from '@/stores/useAppShellStore';
|
||||
|
||||
type AppShellWithMenuProps = {
|
||||
children?: React.ReactNode;
|
||||
};
|
||||
|
||||
export function AppShellWithMenu({ children }: AppShellWithMenuProps) {
|
||||
const theme = useMantineTheme();
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const isMobile = useMediaQuery('(max-width: 768px)');
|
||||
|
||||
// Zustand store
|
||||
const {
|
||||
activeMain,
|
||||
setActiveMain,
|
||||
activeLink,
|
||||
setActiveLink,
|
||||
mobileOpened,
|
||||
desktopOpened,
|
||||
toggleMobile,
|
||||
toggleDesktop,
|
||||
openDesktop,
|
||||
closeMobile,
|
||||
} = useAppShellStore();
|
||||
|
||||
const isCollapsed = useMemo(
|
||||
() => (isMobile ? !mobileOpened : !desktopOpened),
|
||||
[isMobile, mobileOpened, desktopOpened]
|
||||
);
|
||||
|
||||
// Detectar main activo según la ruta
|
||||
useEffect(() => {
|
||||
const currentPath =
|
||||
location.pathname?.toLowerCase().replace(/\/$/, '') ?? '';
|
||||
|
||||
let matchedMain: string | null = null;
|
||||
let maxMatchLength = 0;
|
||||
|
||||
Object.entries(submenuLinks).forEach(([main, items]) => {
|
||||
items.forEach((item: { to: string }) => {
|
||||
const itemPath = item.to.toLowerCase().replace(/\/$/, '');
|
||||
if (currentPath === itemPath || currentPath.startsWith(itemPath + '/')) {
|
||||
if (itemPath.length > maxMatchLength) {
|
||||
matchedMain = main;
|
||||
maxMatchLength = itemPath.length;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (matchedMain) setActiveMain(matchedMain);
|
||||
}, [location.pathname, setActiveMain]);
|
||||
|
||||
// Actualizar activeLink
|
||||
useEffect(() => {
|
||||
const sublinks = submenuLinks[activeMain as keyof typeof submenuLinks] || [];
|
||||
const found = sublinks.find((item) => item.to === location.pathname);
|
||||
setActiveLink(found?.label ?? '');
|
||||
}, [location.pathname, activeMain, setActiveLink]);
|
||||
|
||||
const mainLinks = mainLinksdata.map((link) => (
|
||||
<Tooltip
|
||||
label={link.label}
|
||||
position="right"
|
||||
withArrow
|
||||
transitionProps={{ duration: 0 }}
|
||||
key={link.label}
|
||||
>
|
||||
<UnstyledButton
|
||||
onClick={() => {
|
||||
setActiveMain(link.label);
|
||||
const remembered = getLastSubmenuRoute(link.label);
|
||||
const fallback =
|
||||
submenuLinks[link.label as keyof typeof submenuLinks]?.[0]?.to;
|
||||
if (isCollapsed && (remembered || fallback)) {
|
||||
navigate(remembered ?? fallback);
|
||||
}
|
||||
}}
|
||||
className={classes.mainLink}
|
||||
data-active={link.label === activeMain || undefined}
|
||||
>
|
||||
<link.icon size={24} weight="duotone" />
|
||||
</UnstyledButton>
|
||||
</Tooltip>
|
||||
));
|
||||
|
||||
const links: React.ReactNode = (
|
||||
(submenuLinks[activeMain as keyof typeof submenuLinks] || []) as {
|
||||
label: string;
|
||||
to: string;
|
||||
}[]
|
||||
).map((item) => (
|
||||
<Link
|
||||
className={classes.link}
|
||||
data-active={activeLink === item.label || undefined}
|
||||
to={item.to}
|
||||
key={item.label}
|
||||
style={{ display: isCollapsed ? 'none' : 'block' }}
|
||||
onClick={() => {
|
||||
setLastSubmenuRoute(activeMain, item.to);
|
||||
if (isMobile) closeMobile();
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
));
|
||||
|
||||
useEffect(() => {
|
||||
if (!isMobile) openDesktop();
|
||||
}, [isMobile, openDesktop]);
|
||||
|
||||
return (
|
||||
<AppShell
|
||||
header={{ height: 60 }}
|
||||
navbar={{
|
||||
width: isCollapsed ? 60 : 300,
|
||||
breakpoint: 'sm',
|
||||
collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
|
||||
}}
|
||||
padding={0}
|
||||
styles={{
|
||||
main: {
|
||||
height: '100dvh', // o '100vh', pero mejor con 100dvh para evitar bugs móviles
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<AppShell.Header>
|
||||
<Group h="100%" px="sm">
|
||||
<Burger
|
||||
opened={mobileOpened}
|
||||
onClick={toggleMobile}
|
||||
hiddenFrom="sm"
|
||||
size="sm"
|
||||
/>
|
||||
<Burger
|
||||
opened={desktopOpened}
|
||||
onClick={toggleDesktop}
|
||||
visibleFrom="sm"
|
||||
size="sm"
|
||||
/>
|
||||
<LogoIcon
|
||||
style={{ width: 30, height: 30 }}
|
||||
circleFill={theme.colors.brand[9]}
|
||||
pathFill={theme.colors.secondary[2]}
|
||||
/>
|
||||
</Group>
|
||||
</AppShell.Header>
|
||||
|
||||
{/* Navbar */}
|
||||
<AppShell.Navbar>
|
||||
<div className={classes.wrapper}>
|
||||
<div className={classes.aside}>
|
||||
<div className={classes.topSection}>{mainLinks}</div>
|
||||
</div>
|
||||
<div className={classes.main}>
|
||||
{!isCollapsed && (
|
||||
<Title order={4} className={classes.title}>
|
||||
{activeMain}
|
||||
</Title>
|
||||
)}
|
||||
{links}
|
||||
</div>
|
||||
</div>
|
||||
</AppShell.Navbar>
|
||||
|
||||
{/* Main Content */}
|
||||
<AppShell.Main>{children}</AppShell.Main>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
// src/data/navigationLinks.ts
|
||||
import { House, Book, Users, Camera, Flask, Gear } from "phosphor-react";
|
||||
|
||||
export const mainLinksdata = [
|
||||
{ icon: House, label: "Home" },
|
||||
// { icon: Book, label: "Biblioteca" },
|
||||
// { icon: Users, label: "AgentesLLMs" },
|
||||
// { icon: Camera, label: "CameraNoir" },
|
||||
// { icon: Flask, label: "Experimentos" },
|
||||
// { icon: Gear, label: "Settings" },
|
||||
];
|
||||
@@ -0,0 +1,19 @@
|
||||
// src/data/submenuLinks.ts
|
||||
|
||||
export const submenuLinks = {
|
||||
|
||||
// Home Principal
|
||||
|
||||
Home: [
|
||||
{ label: 'Inicio', to: '/' },
|
||||
|
||||
],
|
||||
|
||||
// Biblioteca
|
||||
|
||||
// Biblioteca: [
|
||||
// { label: 'Biblioteca', to: '/bibliot/Biblioteca' },
|
||||
// { label: 'test', to: '/bibliot/editortest' },
|
||||
|
||||
// ],
|
||||
};
|
||||
@@ -0,0 +1,28 @@
|
||||
import { Button, Group, useMantineColorScheme } from '@mantine/core';
|
||||
|
||||
export function ColorSchemeToggle() {
|
||||
const { setColorScheme, colorScheme } = useMantineColorScheme();
|
||||
|
||||
return (
|
||||
<Group justify="center" mt="xl">
|
||||
<Button
|
||||
variant={colorScheme === 'light' ? 'filled' : 'outline'}
|
||||
onClick={() => setColorScheme('light')}
|
||||
>
|
||||
Light
|
||||
</Button>
|
||||
<Button
|
||||
variant={colorScheme === 'dark' ? 'filled' : 'outline'}
|
||||
onClick={() => setColorScheme('dark')}
|
||||
>
|
||||
Dark
|
||||
</Button>
|
||||
<Button
|
||||
variant={colorScheme === 'auto' ? 'filled' : 'outline'}
|
||||
onClick={() => setColorScheme('auto')}
|
||||
>
|
||||
Auto
|
||||
</Button>
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { GoldenLayout } from 'golden-layout';
|
||||
import { useComputedColorScheme } from '@mantine/core';
|
||||
|
||||
import 'golden-layout/dist/css/goldenlayout-base.css';
|
||||
|
||||
import glLightHref from 'golden-layout/dist/css/themes/goldenlayout-light-theme.css?url';
|
||||
import glDarkHref from 'golden-layout/dist/css/themes/goldenlayout-dark-theme.css?url';
|
||||
|
||||
import { useGoldenLayoutStore } from '../stores/useGoldenLayoutStore';
|
||||
import { Welcome } from '../components/Welcome/Welcome';
|
||||
import { ColorSchemeToggle } from '../components/ColorSchemeToggle/ColorSchemeToggle';
|
||||
|
||||
type Mount = { id: string; el: HTMLElement; type: 'welcome' | 'toggle' };
|
||||
|
||||
export function GoldenLayoutManager() {
|
||||
const hostRef = useRef<HTMLDivElement | null>(null);
|
||||
const [mounts, setMounts] = useState<Mount[]>([]);
|
||||
const { layoutConfig, setLayoutConfig } = useGoldenLayoutStore();
|
||||
|
||||
const computedScheme = useComputedColorScheme('light');
|
||||
const themeLinkRef = useRef<HTMLLinkElement | null>(null);
|
||||
const glRef = useRef<GoldenLayout | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!hostRef.current) return;
|
||||
const gl = new GoldenLayout(hostRef.current, {
|
||||
settings: { constrainDragToContainer: true },
|
||||
});
|
||||
glRef.current = gl;
|
||||
|
||||
const registerPortal = (type: Mount['type']) => {
|
||||
gl.registerComponentFactoryFunction(type, (container) => {
|
||||
const el = container.element;
|
||||
const id =
|
||||
typeof crypto !== 'undefined' && 'randomUUID' in crypto
|
||||
? (crypto as any).randomUUID()
|
||||
: Math.random().toString(36).slice(2);
|
||||
|
||||
setMounts((prev) => [...prev, { id, el, type }]);
|
||||
|
||||
const obs = new MutationObserver(() => {
|
||||
if (!document.body.contains(el)) {
|
||||
setMounts((prev) => prev.filter((m) => m.id !== id));
|
||||
obs.disconnect();
|
||||
}
|
||||
});
|
||||
obs.observe(document.body, { childList: true, subtree: true });
|
||||
});
|
||||
};
|
||||
|
||||
registerPortal('welcome');
|
||||
registerPortal('toggle');
|
||||
|
||||
if (layoutConfig) {
|
||||
gl.loadLayout(layoutConfig);
|
||||
} else {
|
||||
gl.loadLayout({
|
||||
root: {
|
||||
type: 'row',
|
||||
content: [
|
||||
{ type: 'component', componentType: 'welcome', title: 'Welcome' },
|
||||
{ type: 'component', componentType: 'toggle', title: 'Theme' },
|
||||
],
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
gl.on('stateChanged', () => {
|
||||
const saved = gl.saveLayout();
|
||||
setLayoutConfig(saved);
|
||||
});
|
||||
|
||||
return () => {
|
||||
setMounts([]);
|
||||
gl.destroy();
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
document.head.appendChild(link);
|
||||
themeLinkRef.current = link;
|
||||
return () => link.remove();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (themeLinkRef.current) {
|
||||
themeLinkRef.current.href =
|
||||
computedScheme === 'dark' ? glDarkHref : glLightHref;
|
||||
}
|
||||
}, [computedScheme]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!hostRef.current || !glRef.current) return;
|
||||
const ro = new ResizeObserver(() => {
|
||||
if (hostRef.current && glRef.current) {
|
||||
glRef.current.updateSize(hostRef.current.clientWidth, hostRef.current.clientHeight);
|
||||
}
|
||||
});
|
||||
ro.observe(hostRef.current);
|
||||
return () => ro.disconnect();
|
||||
}, []);
|
||||
|
||||
// 🚀 Clip del drag proxy a los bordes
|
||||
useEffect(() => {
|
||||
const host = hostRef.current;
|
||||
if (!host) return;
|
||||
|
||||
const onMouseMove = () => {
|
||||
const proxy = document.querySelector<HTMLElement>('.lm_dragProxy');
|
||||
if (!proxy) return;
|
||||
|
||||
const bounds = host.getBoundingClientRect();
|
||||
const proxyBounds = proxy.getBoundingClientRect();
|
||||
|
||||
let left = proxyBounds.left;
|
||||
let top = proxyBounds.top;
|
||||
|
||||
if (left < bounds.left) left = bounds.left;
|
||||
if (top < bounds.top) top = bounds.top;
|
||||
if (left + proxyBounds.width > bounds.right) {
|
||||
left = bounds.right - proxyBounds.width;
|
||||
}
|
||||
if (top + proxyBounds.height > bounds.bottom) {
|
||||
top = bounds.bottom - proxyBounds.height;
|
||||
}
|
||||
|
||||
proxy.style.position = 'absolute';
|
||||
proxy.style.left = `${left - bounds.left}px`;
|
||||
proxy.style.top = `${top - bounds.top}px`;
|
||||
};
|
||||
|
||||
window.addEventListener('mousemove', onMouseMove);
|
||||
return () => window.removeEventListener('mousemove', onMouseMove);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div ref={hostRef} style={{ width: '100%', height: '100%' }} />
|
||||
{mounts.map((m) =>
|
||||
createPortal(
|
||||
m.type === 'welcome' ? <Welcome /> : <ColorSchemeToggle />,
|
||||
m.el
|
||||
)
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { AppShellWithMenu } from './Appshell/Appshell';
|
||||
|
||||
|
||||
export function Plantilla() {
|
||||
return (
|
||||
<AppShellWithMenu>
|
||||
|
||||
</AppShellWithMenu>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import { useState } from 'react';
|
||||
import { TextInput, PasswordInput, Button, Paper, Title, Container, Group, Alert } from '@mantine/core';
|
||||
import { User, Lock } from 'phosphor-react'; // ← Importa los iconos Phosphor
|
||||
|
||||
export function LoginPage() {
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError('');
|
||||
// Aquí deberías llamar a tu endpoint de login (ajusta la URL y payload)
|
||||
try {
|
||||
const res = await fetch('/api/v1/usuarios/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email, password })
|
||||
});
|
||||
if (!res.ok) throw new Error('Credenciales incorrectas');
|
||||
// Aquí puedes guardar el usuario/token en el estado global o localStorage
|
||||
window.location.href = '/';
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Container size={420} my={40}>
|
||||
<Title align="center" mb={20}>Iniciar sesión</Title>
|
||||
<Paper withBorder shadow="md" p={30} mt={30} radius="md">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<TextInput
|
||||
label="Email"
|
||||
placeholder="tucorreo@ejemplo.com"
|
||||
icon={<User size={18} />} // ← Usa el icono Phosphor aquí
|
||||
value={email}
|
||||
onChange={e => setEmail(e.target.value)}
|
||||
required
|
||||
mb={10}
|
||||
/>
|
||||
<PasswordInput
|
||||
label="Contraseña"
|
||||
placeholder="Tu contraseña"
|
||||
icon={<Lock size={18} />} // ← Usa el icono Phosphor aquí
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
required
|
||||
mb={20}
|
||||
/>
|
||||
{error && <Alert color="red" mb={10}>{error}</Alert>}
|
||||
<Group mt="md">
|
||||
<Button type="submit" loading={loading} fullWidth>
|
||||
Entrar
|
||||
</Button>
|
||||
</Group>
|
||||
</form>
|
||||
</Paper>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
.title {
|
||||
color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
|
||||
font-size: rem(100px);
|
||||
font-weight: 900;
|
||||
letter-spacing: rem(-2px);
|
||||
|
||||
@media (max-width: $mantine-breakpoint-md) {
|
||||
font-size: rem(50px);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import { Welcome } from './Welcome';
|
||||
|
||||
export default {
|
||||
title: 'Welcome',
|
||||
};
|
||||
|
||||
export const Usage = () => <Welcome />;
|
||||
@@ -0,0 +1,12 @@
|
||||
import { render, screen } from '@test-utils';
|
||||
import { Welcome } from './Welcome';
|
||||
|
||||
describe('Welcome component', () => {
|
||||
it('has correct Vite guide link', () => {
|
||||
render(<Welcome />);
|
||||
expect(screen.getByText('this guide')).toHaveAttribute(
|
||||
'href',
|
||||
'https://mantine.dev/guides/vite/'
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,23 @@
|
||||
import { Anchor, Text, Title } from '@mantine/core';
|
||||
import classes from './Welcome.module.css';
|
||||
|
||||
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
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="185.21428mm"
|
||||
height="185.21428mm"
|
||||
viewBox="0 0 185.21428 185.21428"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
sodipodi:docname="favicon.svg"
|
||||
inkscape:version="1.4 (86a8ad7, 2024-10-11)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#242424"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="0.52284039"
|
||||
inkscape:cx="317.49651"
|
||||
inkscape:cy="284.02549"
|
||||
inkscape:window-width="1147"
|
||||
inkscape:window-height="927"
|
||||
inkscape:window-x="2024"
|
||||
inkscape:window-y="105"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-13.15728,-55.159447)">
|
||||
<circle
|
||||
style="fill:#ffffff"
|
||||
id="path1"
|
||||
cx="105.76442"
|
||||
cy="147.76659"
|
||||
r="92.60714" />
|
||||
<path
|
||||
d="m 60.52824,130.59648 q 5.092664,-3.88488 12.125369,-6.43431 7.032718,-2.54944 15.035463,-4.12768 2.78883,-3.52067 5.45641,-6.91992 2.66758,-3.52066 4.60763,-6.55571 1.94007,-3.15645 3.031358,-5.82731 1.09128,-2.792247 0.84876,-4.977477 l 0.24252,0.2428 q -0.60628,-1.21402 -2.910088,-1.82102 -2.30382,-0.72842 -5.45642,-0.72842 -4.00138,0 -8.972768,1.09262 -4.971406,0.97121 -10.064057,2.91365 -5.092651,1.82102 -10.064057,4.491867 -4.850147,2.67085 -8.851513,5.94871 -3.880108,3.27786 -6.547698,7.16273 -2.546319,3.88487 -2.910081,8.13394 -5.456413,-4.61327 -7.881486,-8.49814 -2.303829,-4.00627 -2.303829,-7.52694 0,-6.19151 3.152597,-10.926187 3.152597,-4.73468 8.124003,-8.13393 5.092651,-3.52067 11.519091,-5.827315 6.547698,-2.306631 13.095396,-3.642054 6.668943,-1.456837 12.852879,-1.94244 6.305193,-0.607005 10.912843,-0.607005 6.911448,0 12.974128,0.971207 6.06269,0.971221 10.54908,3.035062 4.60766,1.942428 7.27523,4.856075 2.66758,2.91365 2.66758,6.91992 -0.72751,3.88487 -2.54632,7.16272 -1.69755,3.277867 -3.88013,6.312907 -2.18257,2.91365 -4.60766,5.94871 -2.30381,2.91365 -4.24387,5.94871 2.78884,0.12142 5.09265,0.36421 2.42508,0.12141 4.72891,0.12141 l -5.33517,13.35423 q -3.27384,0 -5.33517,0 -2.0613,0 -3.6376,0.12142 -1.45505,0 -2.78884,0.12141 -1.21253,0.12141 -2.78884,0.3642 -0.2425,0 -0.36376,0.12142 -0.12128,0 -0.36376,0 -8.730248,12.86862 -13.944158,27.19407 -5.213911,14.20405 -7.881489,28.77232 -4.728902,0.2428 -8.972771,-0.36422 -4.122624,-0.4856 -7.153976,-2.06382 -2.910081,-1.45683 -4.365128,-4.00627 -1.455047,-2.54946 -0.727524,-6.31292 0.848782,-3.27786 2.425074,-7.76973 1.697551,-4.61329 3.637617,-9.59078 2.061313,-5.09889 4.24387,-10.19778 2.303828,-5.22029 4.486386,-9.71218 -3.031339,1.33543 -6.91146,3.15647 -3.880108,1.82102 -6.668943,3.64206 z m 103.06565,44.5546 q 0.24249,3.64205 -1.94006,8.49814 -2.18258,4.8561 -5.69893,10.07639 -3.3951,5.22029 -7.63897,10.31916 -4.24389,5.2203 -8.12401,9.46937 -3.8801,4.24907 -6.91144,7.04132 -3.03134,2.91365 -4.12263,3.52066 -1.57629,0.60702 -3.27384,1.09263 -1.57629,0.607 -3.88013,-0.36422 -1.45506,-0.60699 -3.51638,-1.69963 -1.94005,-0.97122 -3.6376,-2.42803 -1.8188,-1.33542 -2.78884,-3.15646 -1.09128,-1.69963 -0.60626,-3.76347 0.48502,-1.82104 2.30383,-4.49187 1.69755,-2.67085 4.12261,-5.70591 2.54633,-3.03505 5.57768,-6.1915 3.15261,-3.03505 6.3052,-5.82729 3.27385,-2.79225 6.3052,-4.85609 3.15258,-2.06384 5.82015,-3.03506 0.36376,-0.12142 0.72754,-1.82103 0.36375,-1.69964 0.12115,-4.49187 -0.12115,-1.45684 -0.72752,-3.15646 -0.48502,-1.69963 -1.45505,-3.03505 -0.84876,-1.33543 -2.18254,-2.18525 -1.3338,-0.97122 -2.91009,-0.97122 -2.78884,0 -5.82018,2.91365 -3.03134,2.54946 -5.57767,1.82104 -2.4251,-0.72842 -3.7589,-3.03506 -1.21252,-2.42803 -0.84877,-5.46309 0.48502,-3.03505 3.39511,-5.09889 0.97004,-0.60702 4.00138,-3.03505 3.03135,-2.54945 6.66897,-5.7059 3.63759,-3.15646 7.03269,-6.31292 3.39512,-3.27785 5.09267,-5.3417 1.57629,-1.94242 2.0613,-3.03504 0.48502,-1.09261 0.36376,-1.69963 -0.12116,-0.60702 -0.72752,-0.72842 -0.48502,-0.2428 -0.84877,-0.2428 -1.45505,-0.12141 -3.3951,-0.2428 -1.81881,-0.12142 -3.51636,0 -1.69754,0.12128 -3.15259,0.4856 -1.33379,0.2428 -1.81881,0.72842 -0.97002,0.7284 -3.03134,3.88487 -1.94005,3.03505 -4.24386,6.67711 -2.30383,3.64207 -4.48642,7.04132 -2.06132,3.39927 -3.03135,4.85609 -2.18257,3.03505 -4.36511,3.88487 -2.30382,0.72842 -3.88012,0 -1.57631,-0.72841 -1.94007,-2.54945 -0.48501,-1.82102 0.84878,-4.00627 1.45505,-2.30664 3.1526,-5.34169 1.69754,-3.15646 3.51636,-6.55571 1.81878,-3.52067 3.63759,-7.16274 1.94008,-3.64206 3.75889,-7.16273 1.3338,-2.42803 2.78885,-3.88487 1.45503,-1.57822 3.8801,-2.42803 2.9101,-0.72842 6.42644,-0.97122 3.63761,-0.24281 7.15397,-0.12141 3.51636,0 6.66895,0.3642 3.15259,0.2428 5.2139,0.36422 2.30381,0.24279 4.48638,1.94243 2.30383,1.69962 3.88013,3.88485 1.69755,2.18524 2.42507,4.6133 0.72752,2.30664 -0.12116,3.88486 -0.12115,0.24281 -1.45503,1.57823 -1.33379,1.33543 -3.51636,3.39927 -2.06131,2.06383 -4.7289,4.61327 -2.66758,2.42805 -5.33516,4.97749 -2.54633,2.42805 -4.9714,4.61329 -2.42506,2.18523 -4.00137,3.64205 h 1.45505 q 4.60763,0 7.88149,0.72842 3.39511,0.607 6.54769,3.27785 2.66758,-3.03505 5.57768,-7.52693 2.91008,-4.61328 5.45641,-8.74095 2.30381,-4.00628 4.60764,-5.22029 2.42506,-1.21402 4.12263,-0.60702 1.81879,0.48561 2.42507,2.54946 0.72751,1.94243 -0.36376,4.49186 -6.79022,11.0476 -11.15534,18.21033 -4.24387,7.04132 -6.30518,9.95498 z"
|
||||
id="text1-8-5-1"
|
||||
style="fill:#000000"
|
||||
aria-label="Fz"
|
||||
inkscape:label="text1" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.9 KiB |
@@ -0,0 +1,37 @@
|
||||
import React from 'react';
|
||||
|
||||
type LogoIconProps = React.SVGProps<SVGSVGElement> & {
|
||||
circleFill?: string;
|
||||
pathFill?: string;
|
||||
};
|
||||
|
||||
const LogoIcon: React.FC<LogoIconProps> = ({
|
||||
style,
|
||||
circleFill = 'currentColor',
|
||||
pathFill = 'currentColor',
|
||||
...props
|
||||
}) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 185.21428 185.21428"
|
||||
style={style}
|
||||
{...props}
|
||||
>
|
||||
<g transform="translate(-13.15728,-55.159447)">
|
||||
<circle
|
||||
cx="105.76442"
|
||||
cy="147.76659"
|
||||
r="92.60714"
|
||||
fill={circleFill}
|
||||
/>
|
||||
<path
|
||||
d="m 60.52824,130.59648 q 5.092664,-3.88488 12.125369,-6.43431 7.032718,-2.54944 15.035463,-4.12768 2.78883,-3.52067 5.45641,-6.91992 2.66758,-3.52066 4.60763,-6.55571 1.94007,-3.15645 3.031358,-5.82731 1.09128,-2.792247 0.84876,-4.977477 l 0.24252,0.2428 q -0.60628,-1.21402 -2.910088,-1.82102 -2.30382,-0.72842 -5.45642,-0.72842 -4.00138,0 -8.972768,1.09262 -4.971406,0.97121 -10.064057,2.91365 -5.092651,1.82102 -10.064057,4.491867 -4.850147,2.67085 -8.851513,5.94871 -3.880108,3.27786 -6.547698,7.16273 -2.546319,3.88487 -2.910081,8.13394 -5.456413,-4.61327 -7.881486,-8.49814 -2.303829,-4.00627 -2.303829,-7.52694 0,-6.19151 3.152597,-10.926187 3.152597,-4.73468 8.124003,-8.13393 5.092651,-3.52067 11.519091,-5.827315 6.547698,-2.306631 13.095396,-3.642054 6.668943,-1.456837 12.852879,-1.94244 6.305193,-0.607005 10.912843,-0.607005 6.911448,0 12.974128,0.971207 6.06269,0.971221 10.54908,3.035062 4.60766,1.942428 7.27523,4.856075 2.66758,2.91365 2.66758,6.91992 -0.72751,3.88487 -2.54632,7.16272 -1.69755,3.277867 -3.88013,6.312907 -2.18257,2.91365 -4.60766,5.94871 -2.30381,2.91365 -4.24387,5.94871 2.78884,0.12142 5.09265,0.36421 2.42508,0.12141 4.72891,0.12141 l -5.33517,13.35423 q -3.27384,0 -5.33517,0 -2.0613,0 -3.6376,0.12142 -1.45505,0 -2.78884,0.12141 -1.21253,0.12141 -2.78884,0.3642 -0.2425,0 -0.36376,0.12142 -0.12128,0 -0.36376,0 -8.730248,12.86862 -13.944158,27.19407 -5.213911,14.20405 -7.881489,28.77232 -4.728902,0.2428 -8.972771,-0.36422 -4.122624,-0.4856 -7.153976,-2.06382 -2.910081,-1.45683 -4.365128,-4.00627 -1.455047,-2.54946 -0.727524,-6.31292 0.848782,-3.27786 2.425074,-7.76973 1.697551,-4.61329 3.637617,-9.59078 2.061313,-5.09889 4.24387,-10.19778 2.303828,-5.22029 4.486386,-9.71218 -3.031339,1.33543 -6.91146,3.15647 -3.880108,1.82102 -6.668943,3.64206 z m 103.06565,44.5546 q 0.24249,3.64205 -1.94006,8.49814 -2.18258,4.8561 -5.69893,10.07639 -3.3951,5.22029 -7.63897,10.31916 -4.24389,5.2203 -8.12401,9.46937 -3.8801,4.24907 -6.91144,7.04132 -3.03134,2.91365 -4.12263,3.52066 -1.57629,0.60702 -3.27384,1.09263 -1.57629,0.607 -3.88013,-0.36422 -1.45506,-0.60699 -3.51638,-1.69963 -1.94005,-0.97122 -3.6376,-2.42803 -1.8188,-1.33542 -2.78884,-3.15646 -1.09128,-1.69963 -0.60626,-3.76347 0.48502,-1.82104 2.30383,-4.49187 1.69755,-2.67085 4.12261,-5.70591 2.54633,-3.03505 5.57768,-6.1915 3.15261,-3.03505 6.3052,-5.82729 3.27385,-2.79225 6.3052,-4.85609 3.15258,-2.06384 5.82015,-3.03506 0.36376,-0.12142 0.72754,-1.82103 0.36375,-1.69964 0.12115,-4.49187 -0.12115,-1.45684 -0.72752,-3.15646 -0.48502,-1.69963 -1.45505,-3.03505 -0.84876,-1.33543 -2.18254,-2.18525 -1.3338,-0.97122 -2.91009,-0.97122 -2.78884,0 -5.82018,2.91365 -3.03134,2.54946 -5.57767,1.82104 -2.4251,-0.72842 -3.7589,-3.03506 -1.21252,-2.42803 -0.84877,-5.46309 0.48502,-3.03505 3.39511,-5.09889 0.97004,-0.60702 4.00138,-3.03505 3.03135,-2.54945 6.66897,-5.7059 3.63759,-3.15646 7.03269,-6.31292 3.39512,-3.27785 5.09267,-5.3417 1.57629,-1.94242 2.0613,-3.03504 0.48502,-1.09261 0.36376,-1.69963 -0.12116,-0.60702 -0.72752,-0.72842 -0.48502,-0.2428 -0.84877,-0.2428 -1.45505,-0.12141 -3.3951,-0.2428 -1.81881,-0.12142 -3.51636,0 -1.69754,0.12128 -3.15259,0.4856 -1.33379,0.2428 -1.81881,0.72842 -0.97002,0.7284 -3.03134,3.88487 -1.94005,3.03505 -4.24386,6.67711 -2.30383,3.64207 -4.48642,7.04132 -2.06132,3.39927 -3.03135,4.85609 -2.18257,3.03505 -4.36511,3.88487 -2.30382,0.72842 -3.88012,0 -1.57631,-0.72841 -1.94007,-2.54945 -0.48501,-1.82102 0.84878,-4.00627 1.45505,-2.30664 3.1526,-5.34169 1.69754,-3.15646 3.51636,-6.55571 1.81878,-3.52067 3.63759,-7.16274 1.94008,-3.64206 3.75889,-7.16273 1.3338,-2.42803 2.78885,-3.88487 1.45503,-1.57822 3.8801,-2.42803 2.9101,-0.72842 6.42644,-0.97122 3.63761,-0.24281 7.15397,-0.12141 3.51636,0 6.66895,0.3642 3.15259,0.2428 5.2139,0.36422 2.30381,0.24279 4.48638,1.94243 2.30383,1.69962 3.88013,3.88485 1.69755,2.18524 2.42507,4.6133 0.72752,2.30664 -0.12116,3.88486 -0.12115,0.24281 -1.45503,1.57823 -1.33379,1.33543 -3.51636,3.39927 -2.06131,2.06383 -4.7289,4.61327 -2.66758,2.42805 -5.33516,4.97749 -2.54633,2.42805 -4.9714,4.61329 -2.42506,2.18523 -4.00137,3.64205 h 1.45505 q 4.60763,0 7.88149,0.72842 3.39511,0.607 6.54769,3.27785 2.66758,-3.03505 5.57768,-7.52693 2.91008,-4.61328 5.45641,-8.74095 2.30381,-4.00628 4.60764,-5.22029 2.42506,-1.21402 4.12263,-0.60702 1.81879,0.48561 2.42507,2.54946 0.72751,1.94243 -0.36376,4.49186 -6.79022,11.0476 -11.15534,18.21033 -4.24387,7.04132 -6.30518,9.95498 z"
|
||||
fill={pathFill}
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default LogoIcon;
|
||||
Reference in New Issue
Block a user