legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
fredy.siswanto 2025-02-28 18:55:12 +07:00
parent 2b551aad28
commit 9b13733205
3 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/ui/breadcrumb.tsx
View File

@ -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>
)

2
app/pages/news-detail/data.ts
View File

@ -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 = {

22
app/pages/news-detail/index.tsx
View File

@ -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="flex items-center gap-2 align-middle">
<div className="my-5 w-full items-center justify-between gap-2 align-middle sm:flex">
<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="flex flex-col">
<div className="items-end justify-between border-b-3 border-b-gray-300 py-4 sm:flex">
<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>
<Carousel {...BERITA} />
<Card className="hidden sm:block">
<CarouselSection {...BERITA} />
</Card>
</div>
)