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

2025-02-20 22:20:27 +07:00
parent 878fb640af
commit 2e09e8a962
15 changed files with 471 additions and 74 deletions
@@ -0,0 +1,80 @@
+import type { TNews } from '~/types/news'
+
+export const SPOTLIGHT: TNews = {
+  title: 'SPOTLIGHT',
+  description: 'Berita Terhangat hari ini',
+  type: 'hero',
+  items: [
+    {
+      title: 'Hotman Paris Membuka Perpustakaan di tengah Diskotik',
+      content:
+        'Pengacara Kondang, Hotman Paris Hutapea, membuka sebuah perpustakaan baru di dalam diskotik nya yang berlokasi di daerah Jakarta Pusat, Hotman berkata Perpustakaan ini dibuka dengan harapan untuk meningkatkan gairah membaca masyarakat Indonesia, namun sayangnya..',
+      featured: '/images/news-1.jpg',
+      slug: 'hotman-paris-membuka-perpustakaan-di-tengah-diskotik',
+    },
+  ],
+}
+
+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',
+    },
+  ],
+}
+
+export const KAJIAN: TNews = {
+  title: 'KAJIAN',
+  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', 'PREMIUM CONTENT'],
+      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 Property', 'PREMIUM CONTENT'],
+      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',
+    },
+  ],
+}
@@ -0,0 +1,14 @@
+import { Card } from '~/components/ui/card'
+import { Carousel } from '~/components/ui/carousel'
+
+import { BERITA } from './data'
+
+export const NewsCategoriesPage = () => {
+  return (
+    <div className="relative mx-5 sm:mx-10">
+      <Card>
+        <Carousel {...BERITA} />
+      </Card>
+    </div>
+  )
+}
@@ -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',
+    },
+  ],
 }
@@ -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>
  )
@@ -25,7 +25,7 @@ export const BERITA: TNews = {
      content:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
      featured: '/images/news-2.jpg',
-      tag: ['Hukum Property'],
+      tags: ['Hukum Property'],
      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
    },
    {
@@ -33,7 +33,7 @@ export const BERITA: TNews = {
      content:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
      featured: '/images/news-3.jpg',
-      tag: ['Hukum'],
+      tags: ['Hukum'],
      slug: 'how-does-writing-influence-your-personal-brand',
    },
    {
@@ -41,7 +41,7 @@ export const BERITA: TNews = {
      content:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
      featured: '/images/news-4.jpg',
-      tag: ['Hukum Property', 'PREMIUM CONTENT'],
+      tags: ['Hukum Property', 'PREMIUM CONTENT'],
      slug: 'helping-a-local-business-reinvent-itself',
    },
  ],
@@ -57,7 +57,7 @@ export const KAJIAN: TNews = {
      content:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
      featured: '/images/news-2.jpg',
-      tag: ['Hukum Property', 'PREMIUM CONTENT'],
+      tags: ['Hukum Property', 'PREMIUM CONTENT'],
      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
    },
    {
@@ -65,7 +65,7 @@ export const KAJIAN: TNews = {
      content:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
      featured: '/images/news-3.jpg',
-      tag: ['Hukum Property', 'PREMIUM CONTENT'],
+      tags: ['Hukum Property', 'PREMIUM CONTENT'],
      slug: 'how-does-writing-influence-your-personal-brand',
    },
    {
@@ -73,7 +73,7 @@ export const KAJIAN: TNews = {
      content:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
      featured: '/images/news-4.jpg',
-      tag: ['Hukum Property', 'PREMIUM CONTENT'],
+      tags: ['Hukum Property', 'PREMIUM CONTENT'],
      slug: 'helping-a-local-business-reinvent-itself',
    },
  ],