refactor: update SuccessModal and News context for improved state management and clarity

app/components/ui/carousel.tsx

@@ -4,11 +4,13 @@ import { twMerge } from 'tailwind-merge'
 
 import { CarouselNextIcon } from '~/components/icons/carousel-next'
 import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
+import { useNewsContext } from '~/contexts/news'
 import type { TNews } from '~/types/news'
 
 import { Button } from './button'
 
 export const Carousel = (properties: TNews) => {
+  const { setIsSuccessOpen } = useNewsContext()
   const [currentIndex, setCurrentIndex] = useState(0)
   const { pathname } = useLocation()
   const hasCategory = pathname.includes('/category/')
@@ -65,7 +67,7 @@ export const Carousel = (properties: TNews) => {
       >
         {items
           .slice(currentIndex * itemsPerPage, (currentIndex + 1) * itemsPerPage)
-          .map(({ featured, title, content, tags, slug }, index) => (
+          .map(({ featured, title, content, tags, slug, isPremium }, index) => (
             <div
               key={index}
               className={twMerge(
@@ -89,15 +91,25 @@ export const Carousel = (properties: TNews) => {
                   type === 'hero' ? 'gap-7' : 'gap-4',
                 )}
               >
-                <div className={`${type === 'hero' ? 'hidden' : ''} `}>
-                  {tags?.map((item, index) => (
+                <div
+                  className={twMerge(
+                    'uppercase',
+                    type === 'hero' ? 'hidden' : '',
+                  )}
+                >
+                  {tags?.map((item) => (
                     <span
-                      key={index}
-                      className="my-3 mr-2 inline-block rounded bg-gray-200 px-3 py-1"
+                      key={`${index}-${item}`}
+                      className="my-3 mr-2 inline-block rounded bg-[#F4F4F4] px-3 py-1 font-bold text-[#777777]"
                     >
                       {item}
                     </span>
                   ))}
+                  {isPremium && (
+                    <span className="my-3 mr-2 inline-block rounded bg-[#D1C675] px-3 py-1 font-bold text-[#9D761D]">
+                      Premium Content
+                    </span>
+                  )}
                 </div>
 
                 <div>
@@ -117,8 +129,14 @@ export const Carousel = (properties: TNews) => {
                 </div>
                 <Button
                   size="block"
-                  as={Link}
-                  to={`detail/${slug}`}
+                  {...(isPremium
+                    ? {
+                        onClick: () => {
+                          setIsSuccessOpen('warning')
+                        },
+                        to: '',
+                      }
+                    : { as: Link, to: `/news/detail/${slug}` })}
                   className={twMerge('', type === 'hero' ? '' : 'mb-5')}
                 >
                   View More