feat: update breadcrumb component for improved slug display and enhance news detail page layout

app/components/ui/breadcrumb.tsx

@@ -7,14 +7,14 @@ type BreadcrumbProperty = {
 export const Breadcrumb = (property: BreadcrumbProperty) => {
   const { slug } = property
   return (
-    <div className="flex items-center gap-2">
+    <div className="mb-5 flex items-center gap-2">
       <Link to={'#'}>Blog</Link>
       <div>{'>'}</div>
       <Link
         to={'#'}
         className="text-ellipsis md:text-clip ..."
       >
-        {slug}
+        {slug.slice(0, 20) + '...'}
       </Link>
     </div>
   )

app/pages/news-detail/data.ts

@@ -35,7 +35,7 @@ export const CONTENT: TNewsDetail = {
   author: 'John Doe',
   date: new Date(),
   categories: [],
-  tags: ['Category', 'Popular'],
+  tags: ['Category', 'Popular', 'Trending', 'Latest'],
 }
 
 export const BERITA: TNews = {

app/pages/news-detail/index.tsx

@@ -2,7 +2,7 @@ import htmlParse from 'html-react-parser'
 
 import { Breadcrumb } from '~/components/ui/breadcrumb'
 import { Card } from '~/components/ui/card'
-import { Carousel } from '~/components/ui/carousel'
+import { CarouselSection } from '~/components/ui/carousel-section'
 import { IconsSocial } from '~/components/ui/social-share'
 
 import { BERITA, CONTENT } from './data'
@@ -19,8 +19,8 @@ export const NewsDetailPage = () => {
           </h2>
 
           {/* next planing create component for this section */}
-          <div className="my-5 flex w-full items-center justify-between align-middle">
+          <div className="my-5 w-full items-center justify-between gap-2 align-middle sm:flex">
-            <div className="flex items-center gap-2 align-middle">
+            <div className="mb-2 flex items-center gap-2 align-middle">
               <img
                 src={'https://placehold.co/50x50.png'}
                 alt={title}
@@ -33,14 +33,14 @@ export const NewsDetailPage = () => {
                 </p>
               </div>
             </div>
-            <IconsSocial className="ml-auto" />
+            <IconsSocial className="flex-row-reverse" />
           </div>
           {/* end next planing create component for this section */}
           <div className="w-full bg-amber-200">
             <img
               src={featured}
               alt={title}
-              className="h-[600px] w-full object-cover object-center"
+              className="w-full object-cover object-center sm:h-[600px]"
             />
           </div>
 
@@ -49,16 +49,16 @@ export const NewsDetailPage = () => {
               {htmlParse(content)}
             </article>
           </div>
-          <div className="flex items-end justify-between border-b-3 border-b-gray-300 py-4">
+          <div className="items-end justify-between border-b-3 border-b-gray-300 py-4 sm:flex">
-            <div className="flex flex-col">
+            <div className="flex flex-col max-sm:mb-3">
               <p className="mb-2">Share this post</p>
               <IconsSocial className="a" />
             </div>
-            <div className="flex flex-wrap items-end">
+            <div className="flex flex-wrap items-end gap-2">
               {tags?.map((tag) => (
                 <span
                   key={tag}
-                  className="mx-2 rounded bg-gray-300 p-1"
+                  className="rounded bg-gray-300 p-1"
                 >
                   {tag}
                 </span>
@@ -80,8 +80,8 @@ export const NewsDetailPage = () => {
         </div>
       </Card>
 
-      <Card>
+      <Card className="hidden sm:block">
-        <Carousel {...BERITA} />
+        <CarouselSection {...BERITA} />
       </Card>
     </div>
   )