\n \n \n );\n}\n\nexport default memo(CasinoBanner);\n","import { Slider } from '@starsoft/common/components';\nimport { banners } from '@/constants/banners-casino';\nimport { useMemo } from 'react';\nimport CasinoBanner from './Banner';\n\nexport default function CasinoBanners() {\n const Banners = useMemo(\n () =>\n banners.map(banner => (\n \n )),\n [],\n );\n\n return (\n \n {Banners}\n \n );\n}\n","import { AxiosError } from 'axios';\nimport { GenericError } from '@/models/generic-error';\nimport ProvidersSectionContent from './Providers';\nimport { useGameProviders } from '@/api/game-providers';\nimport { ProvidersSectionProps } from './props';\nimport { withLazyLoad } from '@starsoft/common/hoc';\n\nfunction ProvidersSection({\n isFallbacking,\n}: ProvidersSectionProps): JSX.Element {\n const { gameProviders, error, refetch, isLoading } = useGameProviders();\n\n return (\n }\n refetch={refetch}\n />\n );\n}\n\nexport default withLazyLoad(ProvidersSection);\n","import Layout from '@/components/core/Layout';\nimport ProvidersSection from '@/components/Home/V2/ProvidersSection';\nimport GameSearchInput from '@/components/Home/V2/GameSearch/Input';\nimport GamesSectionCarousel from '@/components/Home/V3/Carousels/Games';\nimport CasinoBanners from '@/components/Home/Casino/Banners';\nimport { GetServerSidePropsContext } from 'next';\nimport { generateCasinoMetadata } from '@/lib/metadata';\nimport { Language } from '@/enums/language';\nimport { dehydrate, QueryClient } from '@tanstack/react-query';\nimport { GameTagFilter } from '@/models/games/game-tag-filter.enum';\nimport { prefetchGames } from '@/api/games/queries/useGames/prefetch';\nimport { SSRCookies } from '@/interfaces/ssr-cookies.interface';\nimport RecentlyPlayedCarousel from '@/components/Home/V3/Carousels/RecentlyPlayed';\nimport { GetServerSidePropsResultWithMetadataAndServerState } from '@/interfaces/pages/getServerSidePropsResultWithMetadataAndDehydratedState';\nimport { mainPrefetchs } from '@/lib/prefetch';\n\nexport default function CasinoHomePage() {\n return (\n \n \n \n \n \n \n \n );\n}\n\nexport async function getServerSideProps({\n locale,\n req,\n}: GetServerSidePropsContext): Promise {\n const queryClient = new QueryClient();\n\n const metadata = await generateCasinoMetadata({\n lang: locale as Language,\n title: 'casino_label',\n description: 'casino_description',\n path: '/casino',\n });\n const games = [\n GameTagFilter.Originals,\n GameTagFilter.Recommended,\n GameTagFilter.LiveCasino,\n GameTagFilter.NewReleases,\n ].map(tag =>\n prefetchGames(queryClient, {} as SSRCookies, {\n limit: 20,\n tag,\n }),\n );\n\n await Promise.all([\n ...games,\n mainPrefetchs({\n queryClient,\n req,\n }),\n ]);\n\n return {\n props: {\n metadata: JSON.stringify(metadata),\n dehydratedState: dehydrate(queryClient),\n },\n };\n}\n","import { useEffect, useState, useRef, useCallback } from 'react';\n\n/**\n * Custom hook to observe the intersection of a target element with the viewport.\n * It uses the Intersection Observer API to determine if the target element is in view.\n *\n * @param {number} threshold - A number between 0 and 1 indicating the percentage of the target's visibility required to trigger the observer.\n * @returns {[boolean, React.RefObject, React.RefObject]} - Returns a tuple containing:\n * - A boolean indicating if the target element is intersecting or has been rendered.\n * - A ref object to attach to the target element.\n * - A ref object to attach to a buffer element.\n *\n * Example usage:\n * const [isVisible, targetRef, bufferRef] = useIntersectionObserver(0.5);\n */\nexport const useIntersectionObserver = (\n threshold = 0,\n): [\n boolean,\n React.RefObject,\n React.RefObject,\n] => {\n // State to track if the target element is intersecting\n const [isIntersecting, setIsIntersecting] = useState(false);\n // State to track if the target element has been rendered\n const [hasRendered, setHasRendered] = useState(false);\n // State to count the number of times the target has intersected\n const [count, setCount] = useState(0);\n\n // Ref to attach to the target element\n const targetRef = useRef(null);\n // Ref to attach to the buffer element\n const bufferRef = useRef(null);\n\n /**\n * Callback function to update the intersection state.\n * It is triggered whenever the intersection state of the target element changes.\n *\n * @param {IntersectionObserverEntry[]} entries - Array of intersection observer entries.\n */\n const updateIntersection = useCallback(\n (entries: IntersectionObserverEntry[]) => {\n const entry = entries[0];\n setIsIntersecting(entry.isIntersecting);\n\n if (entry.isIntersecting && !hasRendered) {\n if (count > 1) {\n setHasRendered(true);\n return;\n }\n\n setCount(prevCount => prevCount + 1);\n }\n },\n [count, hasRendered],\n );\n\n /**\n * Callback function to handle the observation of the buffer element.\n * Sets up the Intersection Observer and starts observing the buffer element.\n *\n * @returns {Function} - A cleanup function to unobserve the buffer element.\n */\n const handleObserve = useCallback(() => {\n const observer = new IntersectionObserver(updateIntersection, {\n threshold,\n rootMargin: '100px 0px 100px 0px',\n });\n\n const bufferElement = bufferRef.current;\n if (bufferElement) {\n observer.observe(bufferElement);\n }\n\n return () => {\n if (bufferElement) {\n observer.unobserve(bufferElement);\n }\n };\n }, [threshold, updateIntersection]);\n\n // Effect to start observing the buffer element when the component mounts and clean up when it unmounts\n useEffect(handleObserve, [threshold, handleObserve]);\n\n // Return the intersection state and refs for the target and buffer elements\n return [isIntersecting || hasRendered, targetRef, bufferRef];\n};\n","/* eslint-disable react/display-name */\nimport React, { ComponentType } from 'react';\nimport styles from './styles.module.scss';\nimport { useIntersectionObserver } from '@starsoft/common/hooks';\n\n/**\n * Higher-Order Component (HOC) for lazy loading a component based on its visibility in the viewport.\n *\n * @template T - Type of the props that the wrapped component accepts.\n * @param {ComponentType} WrappedComponent - The component to be lazy-loaded.\n * @param {number} [threshold=0] - The threshold for the intersection observer. Default is 0.\n * @returns {React.FC} A functional component that wraps the given component and lazy loads it.\n *\n * @example\n * // Usage example:\n * const LazyLoadedComponent = withLazyLoad(MyComponent, 0.5);\n *\n * function App() {\n * return (\n *