humas
/
web-humas-fe
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix:home banner

This commit is contained in:
Rama Priyanto 2025-06-09 19:38:24 +07:00
parent a3538d1322
commit 3f86306bc1
1 changed files with 44 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
components/landing/HeaderNews.tsx
View File

@ -82,7 +82,7 @@ export default function HeaderNews() {
<div className="w-full">
<div className="flex flex-col lg:flex-row gap-3 lg:gap-8 bg-white dark:bg-black p-1 lg:p-8 lg:h-[540px] w-full lg:w-[75%] lg:mx-auto">
<div className="lg:hidden w-[90%] h-[300px] md:h-[500px] mx-auto">
{banner?.length > 0 ? (
{hotNews?.length > 0 ? (
<Swiper
centeredSlides={true}
autoplay={{
@ -222,7 +222,7 @@ export default function HeaderNews() {
</div>
<div className="hidden lg:block w-full lg:w-[50%] h-[500px]">
{banner?.length > 0 ? (
{hotNews?.length > 0 ? (
<Swiper
centeredSlides={true}
autoplay={{
@ -249,49 +249,48 @@ export default function HeaderNews() {
);
}}
>
{banner?.lenth > 0 &&
banner.map((newsItem: any, index: number) => (
<SwiperSlide key={newsItem?.id} className="!w-full h-[50vh]">
<Card
isFooterBlurred
radius="lg"
className="border-none h-[50vh] lg:h-[500px] shadow-none"
>
<Image
alt="headernews"
src={
newsItem?.thumbnailUrl == ""
? "/no-image.jpg"
: newsItem?.thumbnailUrl
}
className="!w-full !h-[500px] !object-cover !rounded-none"
/>
{hotNews.map((newsItem: any, index: number) => (
<SwiperSlide key={newsItem?.id} className="!w-full h-[50vh]">
<Card
isFooterBlurred
radius="lg"
className="border-none h-[50vh] lg:h-[500px] shadow-none"
>
<Image
alt="headernews"
src={
newsItem?.thumbnailUrl == ""
? "/no-image.jpg"
: newsItem?.thumbnailUrl
}
className="!w-full !h-[500px] !object-cover !rounded-none"
/>
<CardFooter className="mb-1 max-h-[20vh] before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
<div className="text-white">
<Link
href={`news/detail/${newsItem.id}-${newsItem?.slug}`}
>
<p className="text-left font-semibold text-lg lg:text-2xl">
{textEllipsis(newsItem.title, 40)}
</p>
</Link>
<div className="flex flex-row gap-1">
<p className="py-[2px] text-left text-sm">
{convertDateFormat(newsItem.createdAt)} WIB
</p>
<p className="flex items-center gap-1 text-sm">
<EyeIcon />
{newsItem.viewCount === null
? 0
: newsItem.viewCount}
</p>
</div>
<CardFooter className="mb-1 max-h-[20vh] before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
<div className="text-white">
<Link
href={`news/detail/${newsItem.id}-${newsItem?.slug}`}
>
<p className="text-left font-semibold text-lg lg:text-2xl">
{textEllipsis(newsItem.title, 40)}
</p>
</Link>
<div className="flex flex-row gap-1">
<p className="py-[2px] text-left text-sm">
{convertDateFormat(newsItem.createdAt)} WIB
</p>
<p className="flex items-center gap-1 text-sm">
<EyeIcon />
{newsItem.viewCount === null
? 0
: newsItem.viewCount}
</p>
</div>
</CardFooter>
</Card>
</SwiperSlide>
))}
</div>
</CardFooter>
</Card>
</SwiperSlide>
))}
</Swiper>
) : (
<Skeleton className="rounded-lg">
@ -322,8 +321,8 @@ export default function HeaderNews() {
</a>
</div>
<ScrollShadow hideScrollBar className="h-[39vh] lg:h-[400px]">
{article.length > 0 ? (
article.map((list: any, index: number) => (
{article?.length > 0 ? (
article?.map((list: any, index: number) => (
<div
key={list?.id}
className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md"