leumas-private-shared
Version:
Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains
54 lines (47 loc) • 1.93 kB
JSX
import { styled, keyframes } from '@mui/system';
import {useTheme} from "../../Theme/ThemeContext"; // Import the theme context
import React from 'react';
const bgScrollingReverse = keyframes`
100% { background-position: 50px 50px; }
`;
const InfinityBackground = styled('div')`
url('https://fonts.googleapis.com/css?family=Exo:100');
width: 100%;
display: flex;
justify-content: start;
align-items: start;
height: 100%;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC') repeat 0 0;
animation: ${bgScrollingReverse} 0.92s infinite linear;
background-color: transparent;
position: relative; /* Ensure the overlay is positioned correctly */
color: #999;
font: 400 16px/1.5 'Exo', Ubuntu, 'Segoe UI', Helvetica, Arial, sans-serif;
text-align: center;
overflow: auto; /* Allow scrolling within the background */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
&::-webkit-scrollbar {
display: none; /* Chrome, Safari, and Opera */
}
`;
const DarkOverlay = styled('div')`
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Dark transparent overlay */
pointer-events: none; /* Allow interactions to pass through */
`;
const InfinityBackgroundComponent = ({ children }) => {
const { theme } = useTheme(); // Get the current theme
return (
<InfinityBackground>
{theme === 'dark' && <DarkOverlay />}
{children}
</InfinityBackground>
);
};
export default InfinityBackgroundComponent;