feat: refactor user handling in news components and add premium attribute logic

app/components/ui/carousel-hero.tsx

@@ -1,14 +1,18 @@
 import useEmblaCarousel from 'embla-carousel-react'
 import { useCallback, useEffect, useState } from 'react'
+import { useRouteLoaderData } from 'react-router'
 
 import { Button } from '~/components/ui/button'
 import { CarouselButton } from '~/components/ui/button-slide'
 import { useNewsContext } from '~/contexts/news'
+import type { loader } from '~/routes/_layout'
 import type { TNews } from '~/types/news'
 import { getPremiumAttribute } from '~/utils/render'
 
 export const CarouselHero = (properties: TNews) => {
   const { setIsSuccessOpen } = useNewsContext()
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
+  const userData = loaderData?.userData
   const { title, description, items } = properties
   const [emblaReference, emblaApi] = useEmblaCarousel({ loop: false })
 
@@ -93,6 +97,7 @@ export const CarouselHero = (properties: TNews) => {
                       isPremium,
                       slug,
                       onClick: () => setIsSuccessOpen('warning'),
+                      userData,
                     })}
                   >
                     View More

app/components/ui/carousel-section.tsx

@@ -1,14 +1,18 @@
 import useEmblaCarousel from 'embla-carousel-react'
 import { useCallback, useEffect, useState } from 'react'
+import { useRouteLoaderData } from 'react-router'
 
 import { Button } from '~/components/ui/button'
 import { CarouselButton } from '~/components/ui/button-slide'
 import { useNewsContext } from '~/contexts/news'
+import type { loader } from '~/routes/_layout'
 import type { TNews } from '~/types/news'
 import { getPremiumAttribute } from '~/utils/render'
 
 export const CarouselSection = (properties: TNews) => {
   const { setIsSuccessOpen } = useNewsContext()
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
+  const userData = loaderData?.userData
   const { title, description, items } = properties
   const [emblaReference, emblaApi] = useEmblaCarousel({
     loop: false,
@@ -115,6 +119,7 @@ export const CarouselSection = (properties: TNews) => {
                         isPremium,
                         slug,
                         onClick: () => setIsSuccessOpen('warning'),
+                        userData,
                       })}
                       className="mb-5"
                     >

app/components/ui/category-section.tsx

@@ -1,14 +1,18 @@
+import { useRouteLoaderData } from 'react-router'
 import { twMerge } from 'tailwind-merge'
 
 import { CarouselNextIcon } from '~/components/icons/carousel-next'
 import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
 import { Button } from '~/components/ui/button'
 import { useNewsContext } from '~/contexts/news'
+import type { loader } from '~/routes/_layout'
 import type { TNews } from '~/types/news'
 import { getPremiumAttribute } from '~/utils/render'
 
 export const CategorySection = (properties: TNews) => {
   const { setIsSuccessOpen } = useNewsContext()
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
+  const userData = loaderData?.userData
 
   const { title, description, items } = properties
 
@@ -86,6 +90,7 @@ export const CategorySection = (properties: TNews) => {
                     isPremium,
                     slug,
                     onClick: () => setIsSuccessOpen('warning'),
+                    userData,
                   })}
                   className="mb-5"
                 >