From 2a9b676c5d77ed3fdfae22c6d9b56719baa4354b Mon Sep 17 00:00:00 2001 From: Rama Priyanto Date: Wed, 15 Jan 2025 18:08:49 +0700 Subject: [PATCH] fixing home, all content, detail content --- app/news/all/layout.tsx | 3 +- app/news/all/page.tsx | 18 +- app/news/detail/[id]/layout.tsx | 5 +- app/news/detail/[id]/page.tsx | 18 +- components/icons.tsx | 134 ++++++++++- components/landing/BannerHumas.tsx | 6 +- components/landing/BodyLayout.tsx | 2 +- components/landing/ENewsPolri.tsx | 10 +- components/landing/Footer.tsx | 2 +- components/landing/HeaderNews.tsx | 249 ++++++++++---------- components/landing/MediaSocial.tsx | 47 +--- components/landing/NewsTicker.tsx | 4 +- components/landing/SidebarNav.tsx | 6 +- components/layout/navbar/NavbarHumas.tsx | 10 +- components/main/detail/comment.tsx | 51 +++-- components/main/detail/list-news.tsx | 252 +++++++++------------ components/main/detail/new-detail.tsx | 48 ++-- components/page/detail-news.tsx | 208 ++++++++++++----- components/page/related-news.tsx | 137 +++++------ components/page/sidebar-detail.tsx | 167 ++++++++++---- components/ui/social-media/gpr-kominfo.tsx | 2 +- service/article.ts | 4 +- utils/global.tsx | 46 ++++ 23 files changed, 895 insertions(+), 534 deletions(-) diff --git a/app/news/all/layout.tsx b/app/news/all/layout.tsx index 787fee6..0229f90 100644 --- a/app/news/all/layout.tsx +++ b/app/news/all/layout.tsx @@ -1,10 +1,9 @@ "use client"; -import { HumasLayout } from "@/components/layout/humas-layout"; export default function AllNewsLayout({ children, }: { children: React.ReactNode; }) { - return {children}; + return <>{children}; } diff --git a/app/news/all/page.tsx b/app/news/all/page.tsx index fe62296..0d7cd26 100644 --- a/app/news/all/page.tsx +++ b/app/news/all/page.tsx @@ -1,6 +1,20 @@ +"use client"; import ListNews from "@/components/main/detail/list-news"; -import React from "react"; +import React, { useEffect, useState } from "react"; +import { HumasLayout } from "@/components/layout/humas-layout"; export default function ListNewsPage() { - return ; + const [hasMounted, setHasMounted] = useState(false); + + useEffect(() => { + setHasMounted(true); + }, []); + + // Render + if (!hasMounted) return null; + return ( + + + + ); } diff --git a/app/news/detail/[id]/layout.tsx b/app/news/detail/[id]/layout.tsx index 1ed6cda..348d5af 100644 --- a/app/news/detail/[id]/layout.tsx +++ b/app/news/detail/[id]/layout.tsx @@ -1,10 +1,7 @@ -"use client"; -import { HumasLayout } from "@/components/layout/humas-layout"; - export default function NewsLayout({ children, }: { children: React.ReactNode; }) { - return {children}; + return <>{children}; } diff --git a/app/news/detail/[id]/page.tsx b/app/news/detail/[id]/page.tsx index 0a5cafc..d4b16a1 100644 --- a/app/news/detail/[id]/page.tsx +++ b/app/news/detail/[id]/page.tsx @@ -1,6 +1,20 @@ +"use client"; +import { HumasLayout } from "@/components/layout/humas-layout"; import DetailPage from "@/components/main/detail/new-detail"; -import React from "react"; +import React, { useEffect, useState } from "react"; export default function NewsPage() { - return ; + const [hasMounted, setHasMounted] = useState(false); + + useEffect(() => { + setHasMounted(true); + }, []); + + // Render + if (!hasMounted) return null; + return ( + + + + ); } diff --git a/components/icons.tsx b/components/icons.tsx index 39f13a6..e98e455 100644 --- a/components/icons.tsx +++ b/components/icons.tsx @@ -1369,7 +1369,7 @@ export const Calender = ({ width="24" height="24" viewBox="0 0 24 24" - fill="none" + fill="currentColor" xmlns="http://www.w3.org/2000/svg" > @@ -2190,3 +2190,135 @@ export const TimesIcon = ({ /> ); +export const CalendarIcon = ({ + size, + height = 24, + width = 24, + fill = "currentColor", + ...props +}: IconSvgProps) => ( + + + + + + +); +export const ClockIcon = ({ + size, + height = 24, + width = 24, + fill = "currentColor", + ...props +}: IconSvgProps) => ( + + + +); +export const SquareFacebookIcon = ({ + size, + height = 24, + width = 24, + fill = "currentColor", + ...props +}: IconSvgProps) => ( + + + +); + +export const SquareXIcon = ({ + size, + height = 24, + width = 24, + fill = "currentColor", + ...props +}: IconSvgProps) => ( + + + +); +export const SquareLinkedInIcon = ({ + size, + height = 24, + width = 24, + fill = "currentColor", + ...props +}: IconSvgProps) => ( + + + +); +export const SquareWhatsappIcon = ({ + size, + height = 24, + width = 24, + fill = "currentColor", + ...props +}: IconSvgProps) => ( + + + +); diff --git a/components/landing/BannerHumas.tsx b/components/landing/BannerHumas.tsx index 9d0e12a..32f22f2 100644 --- a/components/landing/BannerHumas.tsx +++ b/components/landing/BannerHumas.tsx @@ -8,10 +8,10 @@ export default function BannerHumas() { humasbanner -
-

+

+

{t("jumbotron")}

{`"${t("phrase")}"`}

diff --git a/components/landing/BodyLayout.tsx b/components/landing/BodyLayout.tsx index 5229794..9d8c9ad 100644 --- a/components/landing/BodyLayout.tsx +++ b/components/landing/BodyLayout.tsx @@ -9,7 +9,7 @@ import SidebarNav from "./SidebarNav"; export default function BodyLayout() { return ( <> -
+
{/* */} {/* */} diff --git a/components/landing/ENewsPolri.tsx b/components/landing/ENewsPolri.tsx index 5354583..4a81a8a 100644 --- a/components/landing/ENewsPolri.tsx +++ b/components/landing/ENewsPolri.tsx @@ -28,8 +28,8 @@ export default function ENewsPolri() { }, []); return ( -
-

+

+

E-Majalah Polri

@@ -62,7 +62,7 @@ export default function ENewsPolri() { className="h-[25vh] object-cover rounded-none" /> -
+

{textEllipsis(newsItem.title, 40)} @@ -72,7 +72,7 @@ export default function ENewsPolri() { {convertDateFormat(newsItem.createdAt)} WIB

- + {newsItem.viewCount === null ? 0 : newsItem.viewCount}

@@ -84,7 +84,7 @@ export default function ENewsPolri() {
Lihat Semua diff --git a/components/landing/Footer.tsx b/components/landing/Footer.tsx index 2ccab61..f79254d 100644 --- a/components/landing/Footer.tsx +++ b/components/landing/Footer.tsx @@ -137,7 +137,7 @@ export default function Footer() {
-
+
Berita Terkini diff --git a/components/landing/HeaderNews.tsx b/components/landing/HeaderNews.tsx index 13078bc..75745b4 100644 --- a/components/landing/HeaderNews.tsx +++ b/components/landing/HeaderNews.tsx @@ -14,6 +14,7 @@ import { useEffect, useState } from "react"; import { getListArticle } from "@/service/article"; import { convertDateFormat, textEllipsis } from "@/utils/global"; import { useTranslations } from "next-intl"; +import { data } from "autoprefixer"; export default function HeaderNews() { const [article, setArticle] = useState([]); @@ -29,130 +30,146 @@ export default function HeaderNews() { }, []); return ( -
-
-
- - {article?.map((newsItem: any) => ( - - - headernews - -
- -

- {textEllipsis(newsItem.title, 40)} -

- -

- {convertDateFormat(newsItem.createdAt)} WIB +

+
+ + {article?.map((newsItem: any) => ( + + + headernews + +
+ +

+ {textEllipsis(newsItem.title, 40)}

-

- - {newsItem.viewCount === null ? 0 : newsItem.viewCount} -

-
- - - - ))} - + +

+ {convertDateFormat(newsItem.createdAt)} WIB +

+

+ + {newsItem.viewCount === null ? 0 : newsItem.viewCount} +

+
+ + + + ))} + +
+
+

+ {t("berita")} +

+ + {article?.map((data: any) => ( +
+ headernews +
+ + {textEllipsis(data.title, 40)} + + + {data.title}{" "} + + +

+ {convertDateFormat(data.createdAt)} WIB +

+

+ + {data.viewCount === null ? 0 : data.viewCount} +

+
+
+ ))} + +
+ + +
-
-

{t("berita")}

- - {article?.map((data: any) => ( -
+ +
+ + {article?.map((newsItem: any) => ( + + headernews -
-

{textEllipsis(data.title, 40)}

-

{data.title}

-

- {convertDateFormat(data.createdAt)} WIB -

-

- - {data.viewCount === null ? 0 : data.viewCount} -

-
-
- ))} - -
- - - -
-
- -
- - {article?.map((newsItem: any) => ( - - - headernews - -
- -

- {newsItem.title} -

- -

- {convertDateFormat(newsItem.createdAt)} WIB + +

+ +

+ {newsItem.title}

-

- - {newsItem.viewCount === null ? 0 : newsItem.viewCount} -

-
- - - - ))} - -
-
- -
+ +

+ {convertDateFormat(newsItem.createdAt)} WIB +

+

+ + {newsItem.viewCount === null ? 0 : newsItem.viewCount} +

+
+ + + + ))} + +
+
+
); diff --git a/components/landing/MediaSocial.tsx b/components/landing/MediaSocial.tsx index 279f803..4194a89 100644 --- a/components/landing/MediaSocial.tsx +++ b/components/landing/MediaSocial.tsx @@ -52,7 +52,7 @@ export default function MediaSocial() { ]; return ( -
+

MediaSocial

@@ -62,15 +62,6 @@ export default function MediaSocial() {

Twitter

-
- - Lihat Semua - {" "} -
@@ -82,15 +73,6 @@ export default function MediaSocial() {

Instagram

-
- - Lihat Semua - {" "} -
@@ -102,15 +84,6 @@ export default function MediaSocial() {

Facebook

-
- - Lihat Semua - -
@@ -120,15 +93,6 @@ export default function MediaSocial() {

Tiktok

-
- - Lihat Semua - {" "} -
@@ -138,15 +102,6 @@ export default function MediaSocial() {

Youtube

-
- - Lihat Semua - -
diff --git a/components/landing/NewsTicker.tsx b/components/landing/NewsTicker.tsx index e0c9d3b..d4a5133 100644 --- a/components/landing/NewsTicker.tsx +++ b/components/landing/NewsTicker.tsx @@ -46,13 +46,13 @@ export default function NewsTicker() { }, [article.length]); return ( -
+
BREAKING NEWS
diff --git a/components/landing/SidebarNav.tsx b/components/landing/SidebarNav.tsx index c48c579..ae273ac 100644 --- a/components/landing/SidebarNav.tsx +++ b/components/landing/SidebarNav.tsx @@ -40,7 +40,7 @@ export default function SidebarNav() { onClick={() => setSelectedTab("video")} className={ selectedTab === "video" - ? "text-black border-b-3 border-red-400 cursor-pointer py-2" + ? "text-black border-b-3 border-red-400 cursor-pointer py-2" : "text-slate-300 cursor-pointer py-2" } > @@ -48,12 +48,12 @@ export default function SidebarNav() {
{selectedTab === "media" ? ( -
+
{article?.map((list: any) => (

{list?.title}

diff --git a/components/layout/navbar/NavbarHumas.tsx b/components/layout/navbar/NavbarHumas.tsx index 7bb1ff5..10bc0aa 100644 --- a/components/layout/navbar/NavbarHumas.tsx +++ b/components/layout/navbar/NavbarHumas.tsx @@ -120,7 +120,7 @@ export default function NavbarHumas(props: { size: string }) {
-
+
- logo + logo
- +
- logo + logo
diff --git a/components/main/detail/comment.tsx b/components/main/detail/comment.tsx index 6075ceb..516cdcd 100644 --- a/components/main/detail/comment.tsx +++ b/components/main/detail/comment.tsx @@ -1,19 +1,38 @@ -import { Button } from '@nextui-org/button' -import { Textarea } from '@nextui-org/input' -import React from 'react' +import { Button } from "@nextui-org/button"; +import { Textarea } from "@nextui-org/input"; +import React from "react"; export default function Comment() { - return ( -
-
Berikan Komentar (0 Komentar)
-