this.gui 1.3.24 → 1.3.26

package/index.ts

@@ -5,6 +5,7 @@ import TopBar from "./src/gui/Layouts/ResponsiveUI/TopBar/TopBar";
 import Footer from "./src/gui/Layouts/ResponsiveUI/Footer/Footer";
 import LeftSidebar from "./src/gui/Layouts/ResponsiveUI/Sidebars/LeftSidebar/LeftSidebar";
 import RightSidebar from "./src/gui/Layouts/ResponsiveUI/Sidebars/RightSidebar/RightSidebar";
+import Layout from "./src/gui/Layouts/ResponsiveUI/Layout/Layout";
 import StickyOptionsTop from "./src/gui/Layouts/ResponsiveUI/StickyOptions/StickyOptionsTop";
 import useCodeGen from "./src/gui/hooks/useCodeGen";
 import RootDomain from "./src/gui/components/organism/RootDomain/RootDomain";
@@ -32,14 +33,14 @@ import Gridme from "./src/components/generics/Cards/Gridme";
 import Dialog from "./src/gui/components/molecules/Dialog/Dialog";
 import type { GUIType } from "./src/types/gui.d";
 export {
-  GuiProvider, useThemeContext, TopBar, useCodeGen, Footer, StickyOptionsTop, LeftSidebar, RightSidebar, TextTitle,
+  GuiProvider, useThemeContext, TopBar, useCodeGen, Layout, Footer, StickyOptionsTop, LeftSidebar, RightSidebar, TextTitle,
   TextParagraph,TextList, TextQuote, TextField, RootDomain, Surface, Img, Dialog, VideoEmbed,
   TableOfContents, Tabs, PageContainer, Gridx, Section, SectionHeader, PageDivider, Hero2, CodeBlock, Callout,
   ModuleCard, LilBox, Gridme
 };
 // Default namespace (`import GUI from "this.gui"`)
 const GUI: GUIType = {
-  GuiProvider, useThemeContext, TopBar, useCodeGen, LeftSidebar,
+  GuiProvider, useThemeContext, TopBar, useCodeGen, Layout, LeftSidebar,
   RightSidebar, StickyOptionsTop, RootDomain, TextTitle, TextParagraph,
   TextList, TextQuote, Surface, TextField, Img, VideoEmbed,
   TableOfContents, Tabs, PageContainer, Gridx, Section, SectionHeader, PageDivider, Hero2,

package/init/index.html

@@ -6,8 +6,7 @@
     <link
       rel="icon"
       type="image/svg+xml"
-      href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='32' cy='32' r='32' fill='%23006688'/><text x='50%' y='54%' text-anchor='middle' font-size='28' font-family='sans-serif' fill='white'>GUI</text></svg>"
-    />
+      href="https://res.cloudinary.com/dkwnxf6gm/image/upload/v1761276578/this.gui.npm.png"/>
     <title>.GUI</title>
     <!-- Base metadata (can be overridden by Helmet) -->
     <meta name="description" content="A .GUI powered application template" />

package/init/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "thisgui-demo",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "thisgui-demo",
-      "version": "0.0.0",
+      "version": "0.0.1",
       "dependencies": {
         "react": "^19.1.1",
         "react-dom": "^19.1.1",

package/init/package.json

@@ -1,7 +1,7 @@
 {
   "name": "thisgui-demo",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/init/src/App.tsx

@@ -0,0 +1,24 @@
+//Include this.GUI components as a showviewcase
+import { GuiProvider, Hero2, TextField, Dialog, RootDomain } from "this.gui";
+import { DerivableRouterRoot } from "./router/DerivableRouter"; // new
+import "./index.css";
+export default function App() {
+  return (
+    <GuiProvider>
+    <DerivableRouterRoot>   
+    <Dialog title="Example Dialog" isOpen={true}>
+    <p>This is an example dialog.</p>
+    </Dialog>
+    <RootDomain /> 
+    <Hero2 title=".GUI" subtitle="Your Gateway to Graphical Excellence" />
+    <TextField label="Search" placeholder="Type to search..." />
+    <main>
+    <h1>Hello, this.gui!</h1>
+    <p>Welcome to your new application.</p>
+    <p>Explore the features and customize your experience.</p>
+    <p>Get started by editing <code>src/App.tsx</code>.</p>
+    </main>
+    </DerivableRouterRoot>
+    </GuiProvider>
+  );
+}

package/init/src/index.css

@@ -0,0 +1,16 @@
+:root {
+  font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
+  color: #1f2933;
+  background-color: #f5f7fb;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+}
+
+.app-container {
+  max-width: 960px;
+  margin: 96px auto;
+  padding: 0 24px;
+}

package/init/src/main.tsx

@@ -0,0 +1,14 @@
+// init/src/main.tsx
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import App from "./App";
+import "./index.css";
+import { GuiProvider } from "this.gui";
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <GuiProvider>
+        <App />
+    </GuiProvider>
+  </React.StrictMode>
+);

package/init/src/router/DerivableRouter.tsx

@@ -0,0 +1,36 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { BrowserRouter, useLocation, useNavigate } from 'react-router-dom';
+type DerivableRouterContextType = {
+  currentPath: string;
+  navigate: (path: string) => void;
+};
+
+const DerivableRouterContext = createContext<DerivableRouterContextType | undefined>(undefined);
+export const DerivableRouterProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [currentPath, setCurrentPath] = useState<string>(location.pathname);
+  useEffect(() => {
+    setCurrentPath(location.pathname);
+  }, [location.pathname]);
+  return (
+    <DerivableRouterContext.Provider value={{ currentPath, navigate }}>
+      {children}
+    </DerivableRouterContext.Provider>
+  );
+};
+
+export const useDerivableRouter = (): DerivableRouterContextType => {
+  const ctx = useContext(DerivableRouterContext);
+  if (!ctx) {
+    throw new Error('useDerivableRouter must be used within a DerivableRouterProvider');
+  }
+  return ctx;
+};
+
+// Wrapper to ensure routing context
+export const DerivableRouterRoot: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
+  <BrowserRouter>
+    <DerivableRouterProvider>{children}</DerivableRouterProvider>
+  </BrowserRouter>
+);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "this.gui",
   "private": false,
-  "version": "1.3.24",
+  "version": "1.3.26",
   "type": "module",
   "main": "dist/this-gui.umd.js",
   "module": "dist/this-gui.es.js",

package/src/GUI.tsx

@@ -0,0 +1,15 @@
+// src/GUI.tsx
+import React from 'react'
+import { GuiProvider, TopBar, Footer } from '../index'
+export const GUI = ({ title = 'this.GUI', children }: { title?: string; children?: React.ReactNode }) => {
+  return (
+    <GuiProvider>
+      <TopBar />
+      <main style={{ padding: '2rem' }}>
+        <h1>{title}</h1>
+        {children}
+      </main>
+      <Footer />
+    </GuiProvider>
+  )
+}

package/src/components/generics/Cards/Gridme.jsx

@@ -0,0 +1,52 @@
+import { Box } from '@mui/material';
+
+// Gridme is a generic grid layout component based on MUI's Box.
+// It allows you to quickly define a grid layout with customizable number of columns and spacing.
+// You can also control the maximum width of each grid item via the `itemMaxWidth` prop.
+// This wrapper is part of this.GUI's declarative approach to layout construction.
+const Gridme = ({
+  children,
+  columns = 3,
+  columnGap = '0.5rem',
+  rowGap = '1rem',
+  marginTop = '0px',
+  marginBottom = '0px',
+  sx = {},
+}) => {
+  return (
+    <Box
+      sx={{
+        display: 'grid',
+        gridTemplateColumns: `repeat(${columns}, 1fr)`,
+        columnGap: columnGap,
+        rowGap: rowGap,
+        width: '100%',
+        alignItems: 'stretch',
+        justifyItems: 'stretch',
+        mt: marginTop,
+        mb: marginBottom,
+        '& > *': {
+          width: '100%',
+          height: '100%',
+        },
+        ...sx,
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default Gridme;
+
+// Example usage:
+// 
+// import Gridme from './Gridme';
+// 
+// const Example = () => (
+//   <Gridme columns={3} gap="1rem">
+//     <Box sx={{ backgroundColor: 'red', height: 100 }} />
+//     <Box sx={{ backgroundColor: 'blue', height: 100 }} />
+//     <Box sx={{ backgroundColor: 'green', height: 100 }} />
+//   </Gridme>
+// );

package/src/components/generics/Cards/LilBox.jsx

@@ -0,0 +1,65 @@
+import { Box, Typography } from '@mui/material';
+import * as Icons from 'react-feather';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+const LilBox = ({
+  icon,
+  featherIcon,
+  label,
+  href,
+  aspectRatio = '5 / 4',
+}) => {
+  const FeatherIcon = featherIcon && Icons[featherIcon] ? Icons[featherIcon] : null;
+
+  return (
+    <Box
+      component={href ? Link : 'div'}
+      to={href}
+      sx={{
+        width: '100%',
+        aspectRatio,
+        backgroundColor: (theme) =>
+          theme.palette.mode === 'dark'
+            ? 'rgba(255, 255, 255, 0.05)'
+            : 'rgba(0, 0, 0, 0.03)',
+        border: '1px solid',
+        borderColor: (theme) =>
+          theme.palette.mode === 'dark'
+            ? 'rgba(255, 255, 255, 0.1)'
+            : 'rgba(0, 0, 0, 0.1)',
+        borderRadius: '8px',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: (theme) => theme.palette.text.primary,
+        fontSize: '1rem',
+        fontWeight: 300,
+        transition: 'transform 0.2s ease',
+        textDecoration: 'none',
+        cursor: 'pointer',
+        '&:hover': {
+          transform: 'scale(1.05)',
+        },
+      }}
+    >
+      <Box sx={{ fontSize: '1.5rem', mb: 0.5 }}>
+        {icon ? icon : FeatherIcon ? <FeatherIcon size={24} /> : null}
+      </Box>
+      <Typography variant="body2" align="center">
+        {label}
+      </Typography>
+    </Box>
+  );
+};
+
+LilBox.propTypes = {
+  icon: PropTypes.node,
+  featherIcon: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+  aspectRatio: PropTypes.string,
+};
+
+export default LilBox;

package/src/components/generics/Cards/ModuleCard.jsx

@@ -0,0 +1,106 @@
+import { Link as RouterLink } from "react-router-dom";
+import { Box, Typography, Card, CardActionArea, CardContent } from "@mui/material";
+
+/**
+ * ModuleCard
+ * Clickable card for modules/features.
+ *
+ * Props:
+ * - title: string (required)
+ * - description: string
+ * - image: string (url to image)
+ * - href?: string  -> preferred navigation prop (internal route or external URL)
+ * - link?: string  -> alias of href for backward compatibility
+ * - target?: string -> optional target for external links (e.g., "_blank")
+ *
+ * Behavior:
+ * - If `href` (or `link`) starts with http/https, renders an <a>.
+ * - Otherwise, renders a React Router <Link> for client-side routing.
+ * - Avoids nested anchors: do NOT wrap ModuleCard with another <Link>.
+ */
+const ModuleCard = ({ title, description, image, href, link, target }) => {
+  const to = href ?? link ?? null;
+  const isExternal = typeof to === "string" && /^https?:\/\//i.test(to);
+
+  // Decide which props to pass to CardActionArea to avoid <a> inside <a>.
+  const navProps = to
+    ? isExternal
+      ? { component: "a", href: to, target: target ?? "_self", rel: "noopener noreferrer" }
+      : { component: RouterLink, to }
+    : {}; // No navigation if no href/link provided
+
+  return (
+    <Card
+      sx={{
+        height: "100%",
+        backgroundColor: "background.paper",
+        boxShadow: 2,
+        borderRadius: 2,
+        "&:hover": {
+          boxShadow: 4,
+          transform: "translateY(-2px)",
+          transition: "0.3s ease-in-out",
+        },
+      }}
+    >
+      <CardActionArea
+        {...navProps}
+        sx={{ height: "100%", display: "flex", flexDirection: "column" }}
+      >
+        <CardContent
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            textAlign: "center",
+            padding: 2,
+            height: "100%",
+          }}
+        >
+          {/* Image */}
+          {image && (
+            <Box
+              component="img"
+              src={image}
+              alt={title}
+              sx={{
+                width: "80px",
+                height: "80px",
+                marginBottom: 1,
+                objectFit: "contain",
+              }}
+            />
+          )}
+
+          {/* Title */}
+          <Typography
+            variant="body1"
+            sx={{
+              fontWeight: 600,
+              color: "text.primary",
+              marginBottom: 1,
+            }}
+          >
+            {title}
+          </Typography>
+
+          {/* Description */}
+          {description && (
+            <Typography
+              variant="body2"
+              sx={{
+                fontSize: "0.85rem",
+                color: "text.secondary",
+              }}
+            >
+              {description}
+            </Typography>
+          )}
+        </CardContent>
+      </CardActionArea>
+    </Card>
+  );
+};
+
+export default ModuleCard;

package/src/components/generics/Chats/FullChatBot.jsx

@@ -0,0 +1,223 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Box, Typography, Paper, TextField, IconButton, Avatar, Divider } from '@mui/material';
+import { useTheme, alpha } from '@mui/material/styles';
+import SendIcon from '@mui/icons-material/Send';
+import SmartToyIcon from '@mui/icons-material/SmartToy';
+import PersonIcon from '@mui/icons-material/Person';
+
+/**
+ * FullChatBot (this.GUI)
+ * A full-page, theme-aware chat surface.
+ *
+ * Props (all optional):
+ *  - title: string (header title)
+ *  - initialMessages: Array<{ id?: string, role: 'user'|'bot', text: string }>
+ *  - onSend: async (text, history) => Promise<string | { text: string } | Array<{ text: string }>> (required to produce replies).
+ *  - onError: function (error) => void
+ *  - placeholder: string
+ *  - headerIcon: ReactNode (defaults to SmartToy)
+ *  - heightOffset: number|string  // extra space to subtract besides navbar height
+ *  - maxWidth: number|string      // container max width
+ *  - bleedTop: number|string       // optionally pull the chat upward (compensate parent padding)
+ */
+export default function FullChatBot({
+  title = 'SupportBot Example',
+  initialMessages = [ { id: 'b1', role: 'bot', text: "Hi! I'm your Support Bot. How can I help today?" } ],
+  onSend,
+  onError,
+  placeholder = 'Type your message…',
+  headerIcon,
+  heightOffset = 0,
+  maxWidth = 1400,
+  bleedTop = 0,
+}) {
+  const theme = useTheme();
+
+  // Colors and surfaces from theme
+  const mode = theme?.palette?.mode || 'dark';
+  const linkMain = theme?.palette?.link?.main || 'rgb(0,170,150)';
+  const borderColor = theme?.custom?.border || (mode === 'dark' ? 'rgba(255,255,255,0.14)' : 'rgba(0,0,0,0.12)');
+  const surface = theme?.palette?.background?.paper || (mode === 'dark' ? 'rgb(24,26,28)' : '#ffffff');
+  const textPrimary = theme?.palette?.text?.primary || (mode === 'dark' ? '#fff' : '#111');
+  const bubbleUserBg = alpha(linkMain, 0.14);
+  const bubbleUserBorder = alpha(linkMain, 0.35);
+  const bubbleBotBg = mode === 'dark' ? alpha('#ffffff', 0.06) : alpha('#000000', 0.04);
+  const bubbleBotBorder = mode === 'dark' ? alpha('#ffffff', 0.12) : alpha('#000000', 0.08);
+
+  const [messages, setMessages] = useState(() => initialMessages);
+  const [input, setInput] = useState('');
+  const [isTyping, setIsTyping] = useState(false);
+  const listRef = useRef(null);
+
+  // Auto-scroll to bottom when messages update
+  useEffect(() => {
+    const el = listRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [messages, isTyping]);
+
+  const handleSend = async () => {
+    const trimmed = input.trim();
+    if (!trimmed) return;
+    const userMsg = { id: `u-${Date.now()}`, role: 'user', text: trimmed };
+    setMessages((m) => [...m, userMsg]);
+    setInput('');
+
+    setIsTyping(true);
+    try {
+      if (typeof onSend !== 'function') {
+        console.warn('[FullChatBot] onSend prop is required to generate replies.');
+        setIsTyping(false);
+        return;
+      }
+      let next = await onSend(trimmed, [...messages, userMsg]);
+      const toArray = Array.isArray(next) ? next : [next];
+      const prepared = toArray
+        .filter(Boolean)
+        .map((n, idx) => ({ id: `b-${Date.now()}-${idx}`, role: 'bot', text: typeof n === 'string' ? n : (n?.text || '') }));
+      // small UX delay
+      setTimeout(() => {
+        setMessages((m) => [...m, ...prepared]);
+        setIsTyping(false);
+      }, 200);
+    } catch (e) {
+      if (typeof onError === 'function') try { onError(e); } catch (_) {}
+      setMessages((m) => [...m, { id: `b-${Date.now()}`, role: 'bot', text: 'Sorry, something went wrong. Please try again.' }]);
+      setIsTyping(false);
+    }
+  };
+
+  const onKeyDown = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const bubbleStyles = (role) => {
+    const isUser = role === 'user';
+    return {
+      alignSelf: isUser ? 'flex-end' : 'flex-start',
+      maxWidth: '78%',
+      padding: '10px 12px',
+      borderRadius: 12,
+      background: isUser ? bubbleUserBg : bubbleBotBg,
+      border: `1px solid ${isUser ? bubbleUserBorder : bubbleBotBorder}`,
+      color: 'inherit',
+      wordBreak: 'break-word'
+    };
+  };
+
+  const HeaderIcon = headerIcon || <SmartToyIcon sx={{ color: linkMain }} />;
+
+  // Full height relative to viewport minus navbar and optional offset
+  const topCalc = `calc(97vh - var(--nav-height, 56px) - ${typeof heightOffset === 'number' ? `${heightOffset}px` : String(heightOffset)})`;
+  const mtBleed = bleedTop ? (typeof bleedTop === 'number' ? `${-bleedTop}px` : `calc(0px - ${String(bleedTop)})`) : 0;
+
+  return (
+    <Box sx={{ width: '100%', maxWidth, mx: 'auto', height: topCalc, mt: mtBleed, display: 'flex', flexDirection: 'column', color: textPrimary, colorScheme: mode }}>
+      {/* Header */}
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1,
+          px: 2,
+          py: 1,
+          border: '1px solid',
+          borderColor: borderColor,
+          borderBottom: 'none',
+          borderTopLeftRadius: 8,
+          borderTopRightRadius: 8,
+          background: surface,
+        }}
+      >
+        {HeaderIcon}
+        <Typography variant="h6" sx={{ fontWeight: 700 }}>{title}</Typography>
+      </Box>
+
+      {/* Chat container fills remaining space */}
+      <Paper elevation={0} sx={{
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        border: '1px solid',
+        borderColor: borderColor,
+        borderRadius: 2,
+        background: surface,
+        minHeight: 360
+      }}>
+        {/* Conversation */}
+        <Box ref={listRef} sx={{
+          flex: 1,
+          overflowY: 'auto',
+          p: 2,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 1.2
+        }}>
+          {messages.map((m) => (
+            <Box key={m.id} sx={{ display: 'flex', gap: 1, alignItems: 'flex-start', flexDirection: m.role === 'user' ? 'row-reverse' : 'row' }}>
+              <Avatar sx={{ width: 28, height: 28, bgcolor: m.role === 'user' ? 'rgba(0,170,150,0.18)' : 'rgba(255,255,255,0.08)', border: '1px solid', borderColor: m.role === 'user' ? 'rgba(0,170,150,0.4)' : 'rgba(255,255,255,0.18)' }}>
+                {m.role === 'user' ? <PersonIcon fontSize="small" /> : <SmartToyIcon fontSize="small" />}
+              </Avatar>
+              <Box sx={bubbleStyles(m.role)}>
+                <Typography variant="body2">{m.text}</Typography>
+              </Box>
+            </Box>
+          ))}
+          {isTyping && (
+            <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+              <Avatar sx={{ width: 28, height: 28, bgcolor: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.18)' }}>
+                <SmartToyIcon fontSize="small" />
+              </Avatar>
+              <Box sx={{ ...bubbleStyles('bot'), display: 'inline-flex', gap: 1 }}>
+                <Dot /> <Dot delay={120} /> <Dot delay={240} />
+              </Box>
+            </Box>
+          )}
+        </Box>
+        <Divider />
+        {/* Composer */}
+        <Box sx={{ display: 'flex', alignItems: 'center', p: 1 }}>
+          <TextField
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={onKeyDown}
+            placeholder={placeholder}
+            variant="standard"
+            fullWidth
+            InputProps={{ disableUnderline: true }}
+            sx={{
+              mx: 1,
+              px: 1.5,
+              py: 1,
+              borderRadius: 1,
+              border: '1px solid',
+              borderColor: borderColor,
+              background: mode === 'dark' ? alpha('#ffffff', 0.04) : alpha('#000000', 0.03)
+            }}
+          />
+          <IconButton color="primary" onClick={handleSend} aria-label="send">
+            <SendIcon />
+          </IconButton>
+        </Box>
+      </Paper>
+    </Box>
+  );
+}
+
+function Dot({ delay = 0 }) {
+  const [on, setOn] = useState(false);
+  useEffect(() => {
+    const id = setInterval(() => setOn((v) => !v), 350);
+    return () => clearInterval(id);
+  }, []);
+  return (
+    <Box component="span" sx={{
+      width: 6, height: 6, borderRadius: 1,
+      display: 'inline-block',
+      background: on ? 'rgba(255,255,255,0.8)' : 'rgba(255,255,255,0.35)',
+      transition: 'opacity 200ms ease',
+    }} />
+  );
+}

package/src/components/generics/Code/CodeBlock.jsx

@@ -0,0 +1,33 @@
+// src/components/Pages/CodeBlock.jsx
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { useTheme } from '@mui/material/styles';
+
+export default function CodeBlock({ children, language = "javascript" }) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
+
+  return (
+<SyntaxHighlighter
+  language={language}
+  style={isDark ? oneDark : oneLight}
+  customStyle={{
+    borderRadius: "6px",
+    fontSize: "0.85rem",
+    padding: "1rem",
+    backgroundColor: isDark ? "#1e1e1e" : "#f5f5f5",
+    border: isDark ? "1px solid rgba(255,255,255,0.1)" : "1px solid #ddd",
+    color: isDark ? "#f8f8f2" : "#2d2d2d",
+    textShadow: "none",
+  }}
+  codeTagProps={{
+    style: {
+      textShadow: "none", // Fuerza remover cualquier sombra
+    }
+  }}
+>
+  {children.trim()}
+</SyntaxHighlighter>
+  );
+}