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

app/pages/news-detail/data.ts

@@ -1,4 +1,4 @@
-import type { TNewsDetail } from '~/types/news'
+import type { TNews, TNewsDetail } from '~/types/news'
 
 export const CONTENT: TNewsDetail = {
   title: 'Hotman Paris Membuka Perpustakaan di tengah Diskotik',
@@ -8,4 +8,38 @@ export const CONTENT: TNewsDetail = {
   slug: 'hotman-paris-membuka-perpustakaan-di-tengah-diskotik',
   author: 'John Doe',
   date: new Date(),
+  categories: [],
+  tags: ['Category', 'Popular'],
+}
+
+export const BERITA: TNews = {
+  title: 'BERITA',
+  description: 'Berita Terhangat hari ini',
+  type: 'grid',
+  items: [
+    {
+      title: 'Travelling as a way of self-discovery and progress',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      featured: '/images/news-2.jpg',
+      tags: ['Hukum Property'],
+      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
+    },
+    {
+      title: 'How does writing influence your personal brand?',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      featured: '/images/news-3.jpg',
+      tags: ['Hukum'],
+      slug: 'how-does-writing-influence-your-personal-brand',
+    },
+    {
+      title: 'Helping a local business reinvent itself',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      featured: '/images/news-4.jpg',
+      tags: ['Hukum Property', 'PREMIUM CONTENT'],
+      slug: 'helping-a-local-business-reinvent-itself',
+    },
+  ],
 }

app/pages/news-detail/index.tsx

@@ -1,16 +1,95 @@
+import Breadcrumb from '~/components/ui/breadcrumb'
 import { Card } from '~/components/ui/card'
-
-import { CONTENT } from './data'
+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
+  const { title, content, featured, slug, author, date, tags } = CONTENT
   return (
-    <div className="relative">
+    <div className="relative mx-5 sm:mx-10">
       <Card>
-        <h2 className="text-2xl font-extrabold text-[#2E2F7C] sm:text-4xl">
-          {title}
-        </h2>
-        News Detail
+        <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>
   )