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

feat: enhance navbar and news detail page with improved profile picture handling

Browse Source
This commit is contained in:
Ardeman 2025-03-08 15:23:22 +08:00
parent 609866beef
commit 4b61fd9501
2 changed files with 28 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/layouts/admin/navbar.tsx
View File

@ -25,16 +25,16 @@ export const Navbar = () => {
</Link> </Link>
<div className="flex items-center gap-x-8"> <div className="flex items-center gap-x-8">
<Popover className="relative"> <Popover className="relative">
<PopoverButton className="flex w-3xs cursor-pointer items-center justify-between focus:outline-none"> <PopoverButton className="flex w-3xs cursor-pointer items-center justify-between rounded-xl p-2 ring-2 ring-[#707FDD]/10 hover:shadow focus:outline-none">
<div className="flex items-center"> <div className="flex items-center space-x-3">
{staffData?.profile_picture === '' ? ( {staffData?.profile_picture ? (
<ProfileIcon className="mr-3 h-8 w-8 rounded-full bg-[#C4C4C4]" />
) : (
<img <img
src={staffData?.profile_picture} src={staffData?.profile_picture}
alt={staffData?.name} alt={staffData?.name}
className="mr-3 h-8 w-8 rounded-full bg-[#C4C4C4] object-cover" className="h-8 w-8 rounded-full bg-[#C4C4C4] object-cover"
/> />
) : (
<ProfileIcon className="h-8 w-8 rounded-full bg-[#C4C4C4]" />
)} )}
<span className="text-xs">{staffData?.name}</span> <span className="text-xs">{staffData?.name}</span>

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

@ -2,6 +2,7 @@ import htmlParse from 'html-react-parser'
import { useRouteLoaderData } from 'react-router' import { useRouteLoaderData } from 'react-router'
import type { TTagResponse } from '~/apis/common/get-tags' import type { TTagResponse } from '~/apis/common/get-tags'
import { ProfileIcon } from '~/components/icons/profile'
import { Card } from '~/components/ui/card' import { Card } from '~/components/ui/card'
import { CarouselSection } from '~/components/ui/carousel-section' import { CarouselSection } from '~/components/ui/carousel-section'
import { IconsSocial } from '~/components/ui/social-share' import { IconsSocial } from '~/components/ui/social-share'
@ -14,10 +15,9 @@ export const NewsDetailPage = () => {
'routes/_news.detail.$slug', 'routes/_news.detail.$slug',
) )
// eslint-disable-next-line @typescript-eslint/no-explicit-any const { newsDetailData } = loaderData || {}
const { newsDetailData }: any = loaderData
const { title, content, featured_image, slug, author, live_at, tags } = const { title, content, featured_image, slug, author, live_at, tags } =
newsDetailData newsDetailData || {}
return ( return (
<div className="sm-max:mx-5 relative"> <div className="sm-max:mx-5 relative">
@ -27,22 +27,31 @@ export const NewsDetailPage = () => {
{title} {title}
</h2> </h2>
{/* next planing create component for this section */} {/* START TODO: create component for this section */}
<div className="my-5 w-full items-center justify-between gap-2 align-middle sm:flex"> <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"> <div className="mb-2 flex items-center gap-2 align-middle">
<img {author?.profile_picture ? (
src={'https://placehold.co/50x50.png'} <img
alt={title} src={author?.profile_picture}
className="h-12 w-12 rounded-full" alt={author?.name}
/> className="h-12 w-12 rounded-full bg-[#C4C4C4] object-cover"
/>
) : (
<ProfileIcon className="h-12 w-12 rounded-full bg-[#C4C4C4]" />
)}
<div> <div>
<h4 className="text-md">{author.name}</h4> <h4 className="text-md">{author?.name}</h4>
<p className="text-sm">{formatDate(live_at)} . 5 min read </p> <p className="flex gap-1 text-sm">
<span>{live_at && `${formatDate(live_at)}`}</span>
<span>·</span>
<span>5 min read</span>
</p>
</div> </div>
</div> </div>
<IconsSocial className="flex-row" /> <IconsSocial className="flex-row" />
</div> </div>
{/* end next planing create component for this section */} {/* END TODO: create component for this section */}
<div className="w-full bg-amber-200"> <div className="w-full bg-amber-200">
<img <img
src={featured_image} src={featured_image}
@ -53,7 +62,7 @@ export const NewsDetailPage = () => {
<div className="mt-8 flex items-center justify-center"> <div className="mt-8 flex items-center justify-center">
<article className="prose prose-stone"> <article className="prose prose-stone">
{htmlParse(content)} {content && htmlParse(content)}
</article> </article>
</div> </div>
<div className="items-end justify-between border-b-gray-300 py-4 sm:flex"> <div className="items-end justify-between border-b-gray-300 py-4 sm:flex">