feat: adj ui page detail, add breadcom component, add media sosial group

app/components/ui/carousel.tsx

@@ -1,4 +1,4 @@
-import { Link } from 'react-router'
+import { Link, useLocation } from 'react-router'
 import { twMerge } from 'tailwind-merge'
 
 import { CarouselNextIcon } from '~/components/icons/carousel-next'
@@ -8,6 +8,9 @@ import type { TNews } from '~/types/news'
 import { Button } from './button'
 
 export const Carousel = (properties: TNews) => {
+  const location = useLocation()
+  const hasCategory = location.pathname.includes('/categories/')
+
   const { title, description, items, type } = properties
   return (
     <div className="">
@@ -20,21 +23,22 @@ export const Carousel = (properties: TNews) => {
             {description}
           </p>
         </div>
-
-        <div className="flex gap-2.5">
-          <CarouselPreviousIcon
-            color="#DCDCDC"
-            className="cursor-pointer"
-            width={45}
-            height={45}
-          />
-          <CarouselNextIcon
-            color="#2E2F7C"
-            className="cursor-pointer"
-            width={45}
-            height={45}
-          />
-        </div>
+        {!hasCategory && (
+          <div className="flex gap-2.5">
+            <CarouselPreviousIcon
+              color="#DCDCDC"
+              className="cursor-pointer"
+              width={45}
+              height={45}
+            />
+            <CarouselNextIcon
+              color="#2E2F7C"
+              className="cursor-pointer"
+              width={45}
+              height={45}
+            />
+          </div>
+        )}
       </div>
       <div
         className={twMerge(
@@ -42,7 +46,7 @@ export const Carousel = (properties: TNews) => {
           type === 'hero' ? 'grid-cols-1' : 'sm:grid-cols-3',
         )}
       >
-        {items.map(({ featured, title, content, tag, slug }, index) => (
+        {items.map(({ featured, title, content, tags, slug }, index) => (
           <div
             key={index}
             className={twMerge(
@@ -67,7 +71,7 @@ export const Carousel = (properties: TNews) => {
               )}
             >
               <div className={`${type === 'hero' ? 'hidden' : ''} `}>
-                {tag?.map((item) => (
+                {tags?.map((item) => (
                   <span className="my-3 mr-2 inline-block rounded bg-gray-200 px-3 py-1">
                     {item}
                   </span>
@@ -93,6 +97,7 @@ export const Carousel = (properties: TNews) => {
                 size="block"
                 as={Link}
                 to={`detail/${slug}`}
+                className={twMerge('', type === 'hero' ? '' : 'mb-5 sm:mb-0')}
               >
                 View More
               </Button>
@@ -100,6 +105,24 @@ export const Carousel = (properties: TNews) => {
           </div>
         ))}
       </div>
+      {hasCategory && (
+        <div className="my-5 mt-5 flex flex-row-reverse">
+          <div className="flex gap-2.5">
+            <CarouselPreviousIcon
+              color="#DCDCDC"
+              className="cursor-pointer"
+              width={45}
+              height={45}
+            />
+            <CarouselNextIcon
+              color="#2E2F7C"
+              className="cursor-pointer"
+              width={45}
+              height={45}
+            />
+          </div>
+        </div>
+      )}
     </div>
   )
 }