refactor: simplify premium button logic by creating getPremiumAttribute utility

app/components/ui/carousel-hero.tsx

@@ -1,12 +1,12 @@
 import useEmblaCarousel from 'embla-carousel-react'
 import { useCallback } from 'react'
-import { Link } from 'react-router'
 
 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 { TNews } from '~/types/news'
+import { getPremiumAttribute } from '~/utils/render'
 
 export const CarouselHero = (properties: TNews) => {
   const { setIsSuccessOpen } = useNewsContext()
@@ -77,14 +77,11 @@ export const CarouselHero = (properties: TNews) => {
                   </div>
                   <Button
                     size="block"
-                    {...(isPremium
+                    {...getPremiumAttribute({
-                      ? {
+                      isPremium,
-                          onClick: () => {
+                      slug,
-                            setIsSuccessOpen('warning')
+                      onClick: () => setIsSuccessOpen('warning'),
-                          },
+                    })}
-                          to: '',
-                        }
-                      : { as: Link, to: `/detail/${slug}` })}
                   >
                     View More
                   </Button>

app/components/ui/carousel-section.tsx

@@ -1,12 +1,12 @@
 import useEmblaCarousel from 'embla-carousel-react'
 import { useCallback } from 'react'
-import { Link } from 'react-router'
 
 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 { TNews } from '~/types/news'
+import { getPremiumAttribute } from '~/utils/render'
 
 export const CarouselSection = (properties: TNews) => {
   const { setIsSuccessOpen } = useNewsContext()
@@ -94,14 +94,11 @@ export const CarouselSection = (properties: TNews) => {
                     </div>
                     <Button
                       size="block"
-                      {...(isPremium
+                      {...getPremiumAttribute({
-                        ? {
+                        isPremium,
-                            onClick: () => {
+                        slug,
-                              setIsSuccessOpen('warning')
+                        onClick: () => setIsSuccessOpen('warning'),
-                            },
+                      })}
-                            to: '',
-                          }
-                        : { as: Link, to: `/detail/${slug}` })}
                       className="mb-5"
                     >
                       View More

app/components/ui/category-section.tsx

@@ -1,4 +1,3 @@
-import { Link } from 'react-router'
 import { twMerge } from 'tailwind-merge'
 
 import { CarouselNextIcon } from '~/components/icons/carousel-next'
@@ -6,6 +5,7 @@ import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
 import { Button } from '~/components/ui/button'
 import { useNewsContext } from '~/contexts/news'
 import type { TNews } from '~/types/news'
+import { getPremiumAttribute } from '~/utils/render'
 
 export const CategorySection = (properties: TNews) => {
   const { setIsSuccessOpen } = useNewsContext()
@@ -82,14 +82,11 @@ export const CategorySection = (properties: TNews) => {
                 </div>
                 <Button
                   size="block"
-                  {...(isPremium
+                  {...getPremiumAttribute({
-                    ? {
+                    isPremium,
-                        onClick: () => {
+                    slug,
-                          setIsSuccessOpen('warning')
+                    onClick: () => setIsSuccessOpen('warning'),
-                        },
+                  })}
-                        to: '',
-                      }
-                    : { as: Link, to: `/detail/${slug}` })}
                   className="mb-5"
                 >
                   View More

app/utils/render.ts

@@ -0,0 +1,22 @@
+import { Link } from 'react-router'
+
+type TGetPremiumAttribute = {
+  isPremium?: boolean
+  slug: string
+  onClick: () => void
+}
+
+export const getPremiumAttribute = (parameters: TGetPremiumAttribute) => {
+  const { isPremium, slug, onClick } = parameters
+  if (isPremium) {
+    return {
+      onClick,
+      to: '',
+    }
+  }
+
+  return {
+    as: Link,
+    to: `/detail/${slug}`,
+  }
+}