Merge branch 'fix/home_page' into 'develop'

fix/home_page-and-fix-footer

See merge request !12

src/app/(main)/(home)/components/card-news/index.tsx

-import { NewsAdminItem } from '@/api/types/news'
-import BASE_URL from '@/links'
-import dayjs from 'dayjs';
-import AppEditorContent from '@/components/shared/editor-content';
+import { NewsAdminItem } from "@/api/types/news";
+import BASE_URL from "@/links";
+import dayjs from "dayjs";
+import AppEditorContent from "@/components/shared/editor-content";
 
 function CardNews({ news }: { news: NewsAdminItem }) {
   return (
     <a
       href={`${news.id}`}
-      className='flex flex-row gap-2 mb-2 sm:gap-3 sm:mb-3 p-2 sm:p-3 border border-gray-200 bg-white rounded-md'
+      className="flex flex-row gap-2 mb-2 sm:gap-3 sm:mb-3"
     >
       <img
         src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
@@ -18,13 +18,12 @@ function CardNews({ news }: { news: NewsAdminItem }) {
           e.currentTarget.src = "/fallback.png"
         }}
       />
-
-      <div className='flex-1'>
-        <p className='text-[#0056b3] font-bold text-sm line-clamp-2'>
+      <div className="flex-1">
+        <p className="text-[#363636] font-bold text-sm line-clamp-2">
           {news.title}
         </p>
-        <p className='text-gray-500 text-sm my-1'>
-          {dayjs(news.release_at).format('DD/MM/YYYY')}
+        <p className="text-gray-500 text-sm my-1">
+          {dayjs(news.release_at).format("DD/MM/YYYY")}
         </p>
         {/* <AppEditorContent className='line-clamp-2' value={news.description} /> */}
       </div>
@@ -32,4 +31,4 @@ function CardNews({ news }: { news: NewsAdminItem }) {
   );
 }
 
-export default CardNews;
\ No newline at end of file
+export default CardNews;

src/app/(main)/_lib/layout/ScrollToTopButton.tsx

+"use client";
+
+import { useState, useEffect } from "react";
+import { ChevronsUp } from "lucide-react";
+
+export default function ScrollToTopButton() {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const toggleVisibility = () => {
+      setVisible(window.scrollY > 300);
+    };
+    window.addEventListener("scroll", toggleVisibility);
+    return () => window.removeEventListener("scroll", toggleVisibility);
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  return (
+    <button
+      onClick={scrollToTop}
+      className={`fixed bottom-25 right-6 bg-[#e8c518] hover:text-[#063e8e] text-white p-3 rounded-lg shadow-lg transition-all duration-500 cursor-pointer ${
+        visible
+          ? "opacity-100 translate-y-0"
+          : "opacity-0 translate-y-3 pointer-events-none"
+      }`}
+    >
+      <ChevronsUp size={24} />
+    </button>
+  );
+}

src/app/(main)/_lib/layout/footer.tsx

@@ -170,7 +170,7 @@ function Footer() {
         </div>
       </div>
       <div className="bg-[#032248] h-[80px] flex items-center justify-center">
-        <div className="max-w-[1200px] w-full p-5">
+        <div className="container w-full p-5">
           <p className="text-[14px] text-white">
             © Bản quyền VCCI-HCM | All rights reserved
           </p>

src/app/(main)/layout.tsx

-import Header from "@/app/(main)/_lib/layout/header"
-import Footer from "@/app/(main)/_lib/layout/footer"
+import Header from "@/app/(main)/_lib/layout/header";
+import Footer from "@/app/(main)/_lib/layout/footer";
 import React from "react";
-
-
+import ScrollToTopButton from "./_lib/layout/ScrollToTopButton";
 
 export default function Layout({
   children,
@@ -10,10 +9,11 @@ export default function Layout({
   children: React.ReactNode;
 }>) {
   return (
-      <main className="bg-background">
-          <Header />
-          {children}
-          <Footer />
-      </main>
+    <main className="flex flex-col min-h-screen bg-background">
+      <Header />
+      <div className="flex-1">{children}</div>
+      <ScrollToTopButton />
+      <Footer />
+    </main>
   );
 }

src/app/(main)/thong-tin-truyen-thong/an-pham/[id]/page.tsx

@@ -68,7 +68,7 @@ export default function PublicationDetail() {
 
   return (
     <div className="bg-[#f6f6f6] min-h-screen">
-      <div className="max-w-[1200px] mx-auto flex flex-col gap-5 mb-[50px]">
+      <div className="container mx-auto flex flex-col gap-5 mb-[50px]">
         <div className="border-[#e5e7f2] border-[1px]">
           <ListCategory categories={MEDIA_INFORMATION_CATEGORIES} />
         </div>

src/app/(main)/thong-tin-truyen-thong/an-pham/page.tsx

@@ -7,7 +7,7 @@ import PublicationList from "./components/publicationList";
 export default function Page() {
   return (
     <div className="bg-[#f6f6f6]">
-      <div className="max-w-[1200px] m-auto flex flex-col gap-5 mb-[50px]">
+      <div className="container m-auto flex flex-col gap-5 mb-[50px]">
         <div className="border-[#e5e7f2] border-[1px]">
           <ListCategory categories={MEDIA_INFORMATION_CATEGORIES} />
         </div>

src/app/(main)/xuat-xu-hang-hoa/bieu-mau-c-o-va-cach-khai/page.tsx

@@ -6,7 +6,7 @@ import EventCalendar from "@/components/base/event-calendar";
 export default function page() {
   return (
     <div className="bg-[#f6f6f6]">
-      <div className="max-w-[1200px] m-auto flex flex-col gap-5 mb-[50px]">
+      <div className="container m-auto flex flex-col gap-5 mb-[50px]">
         <div className="border-[#e5e7f2] border-[1px]">
           <ListCategory />
         </div>

src/app/(main)/xuat-xu-hang-hoa/diem-cap-va-thoi-gian-cap/page.tsx

@@ -6,7 +6,7 @@ import EventCalendar from "@/components/base/event-calendar";
 export default function page() {
   return (
     <div className="bg-[#f6f6f6]">
-      <div className="max-w-[1200px] m-auto flex flex-col gap-5 mb-[50px]">
+      <div className="container m-auto flex flex-col gap-5 mb-[50px]">
         <div className="border-[#e5e7f2] border-[1px]">
           <ListCategory />
         </div>

src/app/(main)/xuat-xu-hang-hoa/luat-ap-dung/page.tsx

@@ -6,7 +6,7 @@ import EventCalendar from "@/components/base/event-calendar";
 export default function page() {
   return (
     <div className="bg-[#f6f6f6]">
-      <div className="max-w-[1200px] m-auto flex flex-col gap-5 mb-[50px]">
+      <div className="container m-auto flex flex-col gap-5 mb-[50px]">
         <div className="border-[#e5e7f2] border-[1px]">
           <ListCategory />
         </div>

src/app/(main)/xuat-xu-hang-hoa/muc-dich/page.tsx

@@ -6,7 +6,7 @@ import EventCalendar from "@/components/base/event-calendar";
 export default function page() {
   return (
     <div className="bg-[#f6f6f6]">
-      <div className="max-w-[1200px] m-auto flex flex-col gap-5 mb-[50px]">
+      <div className="container m-auto flex flex-col gap-5 mb-[50px]">
         <div className="border-[#e5e7f2] border-[1px]">
           <ListCategory />
         </div>

src/app/(main)/xuat-xu-hang-hoa/phi-va-le-phi-cap/page.tsx

@@ -6,7 +6,7 @@ import EventCalendar from "@/components/base/event-calendar";
 export default function page() {
   return (
     <div className="bg-[#f6f6f6]">
-      <div className="max-w-[1200px] m-auto flex flex-col gap-5 mb-[50px]">
+      <div className="container m-auto flex flex-col gap-5 mb-[50px]">
         <div className="border-[#e5e7f2] border-[1px]">
           <ListCategory />
         </div>

src/app/(main)/xuat-xu-hang-hoa/thong-tin-lien-he/page.tsx

@@ -6,7 +6,7 @@ import EventCalendar from "@/components/base/event-calendar";
 export default function page() {
   return (
     <div className="bg-[#f6f6f6]">
-      <div className="max-w-[1200px] m-auto flex flex-col gap-5 mb-[50px]">
+      <div className="container m-auto flex flex-col gap-5 mb-[50px]">
         <div className="border-[#e5e7f2] border-[1px]">
           <ListCategory />
         </div>

src/app/(main)/xuat-xu-hang-hoa/thu-tuc-cap/page.tsx

@@ -6,7 +6,7 @@ import EventCalendar from "@/components/base/event-calendar";
 export default function page() {
   return (
     <div className="bg-[#f6f6f6]">
-      <div className="max-w-[1200px] m-auto flex flex-col gap-5 mb-[50px]">
+      <div className="container m-auto flex flex-col gap-5 mb-[50px]">
         <div className="border-[#e5e7f2] border-[1px]">
           <ListCategory />
         </div>

src/components/shared/editor-content/AppEditorContent.tsx

-import { FC, JSX } from 'react';
-import htmlParse, { DOMNode, Element, Text } from 'html-react-parser';
-import { AppEditorContentProps } from './AppEditorContent.type';
-import './AppEditorContent.css';
+import { FC, JSX } from "react";
+import htmlParse, { DOMNode, Element, Text } from "html-react-parser";
+import { AppEditorContentProps } from "./AppEditorContent.type";
+import "./AppEditorContent.css";
 
 const AppEditorContent: FC<AppEditorContentProps> = ({ value = '', className = '' }) => {
   const transform = (node: DOMNode): JSX.Element | string | undefined | null => {
@@ -49,7 +49,9 @@ const AppEditorContent: FC<AppEditorContentProps> = ({ value = '', className = '
 
   return (
     <div className="jodit-container app-editor-container">
-      <div className={`jodit-wysiwyg ${className}`}>{htmlParse(value, { replace: transform })}</div>
+      <div className={`jodit-wysiwyg ${className}`}>
+        {htmlParse(value, { replace: transform })}
+      </div>
     </div>
   );
 };