legalgo-FE-reactrouter/app/pages/news-detail/index.tsx

import Breadcrumb from '~/components/ui/breadcrumb'
import { Card } from '~/components/ui/card'
import { Carousel } from '~/components/ui/carousel'
import IconsSocial from '~/components/ui/icons-social'
// eslint-disable-next-line no-restricted-imports
import { BERITA, CONTENT } from '~/pages/news-detail/data'

export const NewsDetailPage = () => {
  const { title, content, featured, slug, author, date, tags } = CONTENT
  return (
    <div className="relative mx-5 sm:mx-10">
      <Card>
        <div className="py-5 sm:px-30">
          <Breadcrumb slug={slug} />
          <h2 className="text-xl font-extrabold text-[#2E2F7C] sm:text-4xl">
            {title}
          </h2>

          {/* next planing create component for this section */}
          <div className="my-5 flex w-full items-center justify-between align-middle">
            <div className="flex items-center gap-2 align-middle">
              <img
                src={'https://placehold.co/50x50.png'}
                alt={title}
                className="h-12 w-12 rounded-full"
              />
              <div>
                <h4 className="text-md">{author}</h4>
                <p className="text-sm">
                  {date.toJSON().slice(0, 10)} . 5 min read{' '}
                </p>
              </div>
            </div>
            <IconsSocial className="ml-auto"></IconsSocial>
          </div>
          {/* end next planing create component for this section */}
          <div className="w-full bg-amber-200">
            <img
              src={featured}
              alt={title}
              className="object-center"
            />
          </div>
          <article className="my-8">
            <div>{content}</div>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt
            asperiores corporis, facilis praesentium tenetur rerum officiis!
            Perspiciatis, sed cupiditate. Libero eos, cupiditate perferendis
            delectus accusamus culpa veniam voluptatem sequi soluta hic optio
            dolor, provident perspiciatis nihil sit. Est facere itaque natus
            saepe odio ipsam recusandae at mollitia deserunt. Laboriosam atque
            id aperiam tempore corporis magnam dolores vitae, maxime modi
            quibusdam architecto sed aliquam error suscipit distinctio ratione
            dolorum exercitationem vero sapiente? Commodi rem quidem vitae
            eaque, consequuntur maxime facilis ea aliquam odio atque magni
            delectus rerum fugiat aliquid, qui omnis incidunt libero quasi
            distinctio exercitationem, reprehenderit minus officiis velit enim.
          </article>

          <div className="flex items-end justify-between border-b-3 border-b-gray-300 py-4">
            <div className="flex flex-col">
              <p className="mb-2">Share this post</p>
              <IconsSocial />
            </div>
            <div className="flex flex-wrap items-end">
              {tags?.map((tag) => (
                <span
                  key={tag}
                  className="mx-2 rounded bg-gray-300 p-1"
                >
                  {tag}
                </span>
              ))}
            </div>
          </div>

          <div className="mt-5 flex items-center gap-2 align-middle">
            <img
              src={'https://placehold.co/50x50.png'}
              alt={title}
              className="h-12 w-12 rounded-full"
            />
            <div>
              <h4 className="text-md">{author}</h4>
              <p className="text-sm">Job title, Company name</p>
            </div>
          </div>
        </div>
      </Card>

      <Card>
        <Carousel {...BERITA} />
      </Card>
    </div>
  )
}