leumas-private-shared/src/Components/Backgrounds/BackgroundDemo.jsx

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

import React from 'react';
import GradientWavesBackground from './GradientWavesBackground';
import AuroraBackground from './Aurora';
import BinaryBackground from './Binary';
import BlurryCirclesBackground from './BlurryCircles';
import ConfettiBackground from './Confetti';
import DynamicPatternBackground from './DynamicPattern';
import FirefliesBackground from './Fireflies';
import FireworksBackground from './Fireworks';
import FlamesBackground from './Flames';
import FloatingBubblesBackground from './FloatingBubbles';
import FluidBackground from './Fluid';
import GeometricShapesBackground from './GeometricShapes';
import GradientBackground from './Gradient';
import LavaLampBackground from './LavaLamp';
import MatrixBackground from './Matrix';
import NeonGridBackground from './NeonGrid';
// import ParticleBackground from './Particle';
import RippleEffectBackground from './RippleEffect';
import ShootingStarsBackground from './ShootingStars';
import SnowfallBackground from './Snowfall';
import SpaceBackground from './Space';
import StarryNightBackground from './StarryNight';
import TempleRunBackground from './TempleRun';
import WavesBackground from './Waves';
import { styled } from '@mui/system';
import DemoComponent from './DemoComponent';
import SimplexNoiseBackground from './SimpleNoiseBackground';
import TrippyBackground from "./Trippy"
import CloudsBackground from "./Clouds"
import PaintDripBackground from "./PaintTrip"
import FunZoneBackground from "./FunZone"
import CityBackground from "./City"
import WormholeBackground from "./Wormhole"
import CloudSpiralBackground from "./CloudSpiral"
import HypnosisBackground from "./Hypnosis"
import BubblesBackground from "./Bubbles"
import IceCreamBackground from "./IceCream"
import LinesBackground from "./Lines"
import TrianglesBackground from "./Triangles"
import MeteorShowerBackground from "./MeteorShower"
import IllusionBackground from "./Illusion"
import SpookyMoonBackground from "./SpookyMoon"
import FireworkerBackground from "./Fireworker"
import DotsBackground from "./Dots"
import HaloBackground from "./Halo"
import LeumasLogoBackground from "./LeumasLogo"
import InfinityBackground from "./Infinity"
import SpipaBackground from "./Spipa"
// import Dots2Background from './Dots2';
import NoiseBackground from "./Noise"
const backgrounds = {
  GradientWaves: GradientWavesBackground,
  Aurora: AuroraBackground,
  SimplexNoise: SimplexNoiseBackground,
  BlurryCircles: BlurryCirclesBackground,
  Clouds: CloudsBackground,
    Trippy: TrippyBackground,

    PaintDrip: PaintDripBackground,

    FunZone: FunZoneBackground,
    City: CityBackground,
    Wormhole: WormholeBackground,
    CloudSpiral: CloudSpiralBackground,
    Hypnosis : HypnosisBackground,
    Bubbles: BubblesBackground,
    IceCream: IceCreamBackground,
    Lines: LinesBackground,
    Triangles : TrianglesBackground,
    MeteorShower: MeteorShowerBackground,
    Illusion: IllusionBackground,
    SpookyMoon: SpookyMoonBackground,
    Fireworker: FireworkerBackground,
    Dots: DotsBackground,
    Halo: HaloBackground,
    LeumasLogo: LeumasLogoBackground,
    Infinity: InfinityBackground,
    Spipa: SpipaBackground,
    // Dots2: Dots2Background,
    Noise: NoiseBackground,

//   Confetti: ConfettiBackground,
//   DynamicPattern: (props) => <DynamicPatternBackground {...props} patternUrl={"https://res.cloudinary.com/dx25lltre/image/upload/v1707176122/Leumas/2_t6ap9y.svg"} patternSize="50px" />,
//   Fireflies: FirefliesBackground,
//   Fireworks: FireworksBackground,
//   Flames: FlamesBackground,
//   FloatingBubbles: FloatingBubblesBackground,
//   Fluid: FluidBackground,
//   GeometricShapes: GeometricShapesBackground,
//   Gradient: GradientBackground,
//   LavaLamp: LavaLampBackground,
//   Matrix: MatrixBackground,
//   NeonGrid: NeonGridBackground,
// //   Particle: ParticleBackground,
//   RippleEffect: RippleEffectBackground,
//   ShootingStars: ShootingStarsBackground,
//   Snowfall: SnowfallBackground,
//   Space: SpaceBackground,
//   StarryNight: StarryNightBackground,
//   TempleRun: TempleRunBackground,
//   Waves: WavesBackground,
};

const FullHeightBackground = styled('div')`
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
//   background-color: #111;
`;

const BackgroundDemoContainer = styled('div')`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* Align items to the top */
  width: 100%;
  min-height: 100vh;
  z-index: 1;
  position: relative;
  color: white;
  padding: 20px;
  box-sizing: border-box;
`;

const BackgroundList = styled('div')`
  display: flex;
  flex-direction: column; /* Stack items vertically */
  gap: 20px;
  justify-content: center;
  align-items: center;
  width: 100%; /* Full width for each item */
`;

const BackgroundItem = styled('div')`
  width: 100%; /* Full width */
  height: 300px;
  border: 2px solid white;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0; /* Margin on top and bottom */
`;

const BackgroundDemo = () => {
  return (
    <FullHeightBackground>
      <BackgroundDemoContainer>
        <h2>Background Demo</h2>
        <BackgroundList>
          {Object.keys(backgrounds).map((bg) => {
            const BackgroundComponent = backgrounds[bg];
            console.log(`Rendering background: ${bg}`);
            return (
              <BackgroundItem key={bg}>
                <BackgroundComponent>
                  <DemoComponent />
                </BackgroundComponent>
              </BackgroundItem>
            );
          })}
        </BackgroundList>
      </BackgroundDemoContainer>
    </FullHeightBackground>
  );
};

export default BackgroundDemo;