Skip to content

V
VCCI-News
Commit ee2ee642 authored by Vũ Đình Nguyên's avatar Vũ Đình Nguyên
Browse files
Options

Merge branch 'fix/home_page' into 'develop' 

fix/home_page-and-fix-footer

See merge request !12
parents 75098072 4b74d1b8
Hide whitespace changes
Inline Side-by-side
Showing with 358 additions and 267 deletions
src/app/(main)/(home)/components/card-news/index.tsx
View file @ ee2ee642
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)/(home)/page.tsx
View file @ ee2ee642
'use client'
"use client";
import Image from 'next/image'
import { useEffect, useRef, useState } from 'react'
import { Autoplay, Grid } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Swiper as SwiperType } from 'swiper/types'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import BASE_URL from '@/links/index'
import { Spinner } from '@/components/ui'
import CardNews from './components/card-news'
import CardEvent from './components/card-event'
import EventCalendar from '@components/base/event-calendar'
import dayjs from 'dayjs'
import AppEditorContent from '@/components/shared/editor-content'
import Image from "next/image";
import { useEffect, useRef, useState } from "react";
import { Autoplay, Grid } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import { Swiper as SwiperType } from "swiper/types";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import BASE_URL from "@/links/index";
import { Spinner } from "@/components/ui";
import CardNews from "./components/card-news";
import CardEvent from "./components/card-event";
import EventCalendar from "@components/base/event-calendar";
import dayjs from "dayjs";
import AppEditorContent from "@/components/shared/editor-content";
// server
import { useGetEvents } from '@/api/endpoints/event'
import { useGetCategory } from '@/api/endpoints/category'
import { useGetNews } from '@/api/endpoints/news'
import { GetCategoryAdminResponseType } from '@/api/types/category'
import { GetNewsAdminResponseType, NewsAdminItem } from '@/api/types/news'
import { EventApiResponse, EventItem } from '@/api/types/event'
import { useGetEvents } from "@/api/endpoints/event";
import { useGetCategory } from "@/api/endpoints/category";
import { useGetNews } from "@/api/endpoints/news";
import { GetCategoryAdminResponseType } from "@/api/types/category";
import { GetNewsAdminResponseType, NewsAdminItem } from "@/api/types/news";
import { EventApiResponse, EventItem } from "@/api/types/event";
import { ChevronsRight, Link } from "lucide-react";
const Page = () => {
const [tab, setTab] = useState('all')
const [currentIndex, setCurrentIndex] = useState(0)
const swiperRef = useRef<SwiperType | null>(null)
const [tab, setTab] = useState("all");
const [currentIndex, setCurrentIndex] = useState(0);
const swiperRef = useRef<SwiperType | null>(null);
const { data: categoryData, isLoading: isLoadingCategory } = useGetCategory<GetCategoryAdminResponseType>()
const { data: categoryData, isLoading: isLoadingCategory } = useGetCategory<GetCategoryAdminResponseType>();
const { data: newsData, isLoading: isLoadingNews } = useGetNews<GetNewsAdminResponseType>(
{ pageSize: '999' },
)
const { data: eventData, isLoading: isLoadingEvent } = useGetEvents<EventApiResponse>()
{ pageSize: '999' }
);
const { data: eventData, isLoading: isLoadingEvent } = useGetEvents<EventApiResponse>();
// filter category
const rows = newsData?.responseData?.rows ?? []
const filteredRows = tab === 'all' ? rows : rows.filter((n) => n.category === tab)
const rows = newsData?.responseData?.rows ?? [];
const filteredRows =
tab === "all" ? rows : rows.filter((n) => n.category === tab);
const images = [
'/home/doi-tac/AMFORI-1.png.webp',
'/home/doi-tac/AUS4SKILLS-1.png.webp',
'/home/doi-tac/BetterWork-1.png.webp',
'/home/doi-tac/BOI-LOGO.jpg.webp',
'/home/doi-tac/DNV-logo-1-1.png.webp',
'/home/doi-tac/GERMAN-COOPERATION-1.png.webp',
'/home/doi-tac/GIZ.png.webp',
'/home/doi-tac/HBA.png.webp',
'/home/doi-tac/ILO-1.png.webp',
'/home/doi-tac/InvestHK.png.webp',
'/home/doi-tac/IOM-1.png.webp',
'/home/doi-tac/JICA-134x100-1-1.jpg.webp',
'/home/doi-tac/KIRBY.png.webp',
'/home/doi-tac/NHO-1.png.webp',
'/home/doi-tac/OXFAM-1.png.webp',
'/home/doi-tac/RECOTVET-1.png.webp',
'/home/doi-tac/SC-1.png.webp',
'/home/doi-tac/UNDP.png.webp',
]
"/home/doi-tac/AMFORI-1.png.webp",
"/home/doi-tac/AUS4SKILLS-1.png.webp",
"/home/doi-tac/BetterWork-1.png.webp",
"/home/doi-tac/BOI-LOGO.jpg.webp",
"/home/doi-tac/DNV-logo-1-1.png.webp",
"/home/doi-tac/GERMAN-COOPERATION-1.png.webp",
"/home/doi-tac/GIZ.png.webp",
"/home/doi-tac/HBA.png.webp",
"/home/doi-tac/ILO-1.png.webp",
"/home/doi-tac/InvestHK.png.webp",
"/home/doi-tac/IOM-1.png.webp",
"/home/doi-tac/JICA-134x100-1-1.jpg.webp",
"/home/doi-tac/KIRBY.png.webp",
"/home/doi-tac/NHO-1.png.webp",
"/home/doi-tac/OXFAM-1.png.webp",
"/home/doi-tac/RECOTVET-1.png.webp",
"/home/doi-tac/SC-1.png.webp",
"/home/doi-tac/UNDP.png.webp",
];
const hoivien = [
'/home/hoi-vien-tieu-bieu/logo-GTD-768x768.png.webp',
'/home/hoi-vien-tieu-bieu/Nhua-Long-Thanh_Logo.jpg.webp',
'/home/hoi-vien-tieu-bieu/Nova_Group_logo-1.png.webp',
'/home/hoi-vien-tieu-bieu/samngoclinh-1-768x768.png.webp',
'/home/hoi-vien-tieu-bieu/Screenshot-2022-12-26-144136-768x768.png.webp',
'/home/hoi-vien-tieu-bieu/UOB-logo_Vuong.jpeg.webp',
]
"/home/hoi-vien-tieu-bieu/logo-GTD-768x768.png.webp",
"/home/hoi-vien-tieu-bieu/Nhua-Long-Thanh_Logo.jpg.webp",
"/home/hoi-vien-tieu-bieu/Nova_Group_logo-1.png.webp",
"/home/hoi-vien-tieu-bieu/samngoclinh-1-768x768.png.webp",
"/home/hoi-vien-tieu-bieu/Screenshot-2022-12-26-144136-768x768.png.webp",
"/home/hoi-vien-tieu-bieu/UOB-logo_Vuong.jpeg.webp",
];
return (
isLoadingNews || isLoadingCategory || isLoadingEvent ? (
(isLoadingNews || isLoadingCategory || isLoadingEvent) ? (
<div className="container w-full h-[80vh] flex justify-center items-center">
<Spinner />
</div>
......@@ -84,7 +86,9 @@ const Page = () => {
slidesPerView={1}
onSwiper={(s) => (swiperRef.current = s)}
onSlideChange={(s) =>
setCurrentIndex(typeof s.realIndex === 'number' ? s.realIndex : s.activeIndex)
setCurrentIndex(
typeof s.realIndex === "number" ? s.realIndex : s.activeIndex
)
}
>
<SwiperSlide>
......@@ -106,11 +110,14 @@ const Page = () => {
<div className="container mx-auto px-3 sm:px-6 lg:px-10 space-y-12">
{/* Featured News */}
<section>
<div className="flex flex-col items-center py-8 text-center">
<h1 className="text-app-blue text-[20px] sm:text-[24px] md:text-[28px] uppercase font-bold text-blue-900">
Tin Nổi Bật
</h1>
<div className="w-16 h-[3px] bg-blue-900 mt-2 rounded-full"></div>
<div className="flex items-center justify-center py-8 px-4">
<div className="flex items-center w-full max-w-4xl">
<div className="flex-1 h-[1px] bg-gradient-to-r from-transparent via-gray-300 to-gray-400"></div>
<h1 className="px-6 text-[20px] sm:text-[24px] md:text-[28px] uppercase font-bold text-[#063e8e] whitespace-nowrap">
Tin Nổi Bật
</h1>
<div className="flex-1 h-[1px] bg-gradient-to-l from-transparent via-gray-300 to-gray-400"></div>
</div>
</div>
<Swiper
......@@ -128,7 +135,7 @@ const Page = () => {
<SwiperSlide key={news.id}>
<a
href={`/${news.id}`}
className="relative block bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"
className="relative block bg-white shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"
>
<img
src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
......@@ -157,69 +164,78 @@ const Page = () => {
{/* Left */}
<div className="flex-1">
<div className="flex justify-between items-center">
<a href="/thong-tin-truyen-thong/tin-vcci/" className="text-[18px] sm:text-[20px] font-bold uppercase text-blue-900">
<a
href="/thong-tin-truyen-thong/tin-vcci/"
className="text-[18px] sm:text-[20px] font-semibold uppercase text-[#063e8e]"
>
Tin tức
</a>
<a href="/thong-tin-truyen-thong/tin-vcci/" className="text-blue-900 text-sm sm:text-base">
{'>>'}
<a
href="/thong-tin-truyen-thong/tin-vcci/"
className="text-[#063e8e] text-sm sm:text-base"
>
<ChevronsRight />
</a>
</div>
<hr className="border-blue-900 mb-4" />
<hr className="border-[#063e8e] mb-4" />
<div className="flex flex-col md:flex-row gap-5">
{newsData?.responseData.rows.slice(0, 1).map((news: NewsAdminItem) => (
<a
key={news.id}
href={`${news.id}`}
className="flex flex-col w-full md:w-1/2 min-h-[180px] sm:min-h-[220px] gap-3 mb-3 border border-gray-200 bg-white rounded-md p-3"
>
<div className="w-full aspect-3/2 overflow-hidden">
<img
src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
alt={news.title}
className="w-full h-full object-cover"
onError={(e) => {
e.currentTarget.onerror = null
e.currentTarget.src = "/fallback.png"
}}
/>
</div>
{newsData?.responseData.rows
.slice(0, 1)
.map((news: NewsAdminItem) => (
<a
key={news.id}
href={`${news.id}`}
className="flex flex-col w-full md:w-1/2 min-h-[180px] sm:min-h-[220px] gap-3 mb-3 bg-white"
>
<div className="w-full aspect-3/2 overflow-hidden">
<img
src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
alt={news.title}
className="w-full h-full object-cover"
/>
</div>
<div className="flex-1">
<p className="text-[#0056b3] font-bold text-xl line-clamp-2">
{news.title}
</p>
<p className="text-gray-500 text-sm my-1">
{dayjs(news.release_at).format('DD/MM/YYYY')}
</p>
<AppEditorContent className="line-clamp-4" value={news.description} />
</div>
</a>
))}
<div className="flex-1 p-5">
<p className="text-[#063E8E] font-bold text-xl line-clamp-2">
{news.title}
</p>
<p className="text-gray-500 text-sm my-1">
{dayjs(news.release_at).format("DD/MM/YYYY")}
</p>
<AppEditorContent
className="line-clamp-4"
value={news.description}
/>
</div>
</a>
))}
<div className="w-full md:w-1/2">
<div className="flex flex-wrap gap-2 sm:gap-3 mb-3">
<div className="flex flex-wrap gap-2 sm:gap-3 mb-5">
<button
className={`flex-1 px-3 sm:px-4 py-2 rounded-md border text-sm transition-colors ${tab === 'all'
? 'border-blue-700 bg-blue-50 text-blue-800 font-semibold'
: 'border-gray-300 bg-white hover:bg-gray-50'
className={`flex-1 py-[3px] text-sm transition-colors cursor-pointer ${tab === "all"
? " bg-[#d3d3d3] text-[#063e8e] font-semibold"
: "border-gray-300 text-[#363636] bg-[#e8e8e8] hover:bg-[#e8e8e8] hover:text-[#063e8e] font-semibold"
}`}
onClick={() => setTab('all')}
onClick={() => setTab("all")}
>
Tất cả
</button>
{categoryData?.responseData.rows.slice(0, 3).map((category) => (
<button
key={category.id}
className={`flex-1 px-3 sm:px-4 py-2 rounded-md border text-sm transition-colors ${category.name === tab
? 'border-blue-700 bg-blue-50 text-blue-800 font-semibold'
: 'border-gray-300 bg-white hover:bg-gray-50'
}`}
onClick={() => setTab(category.name)}
>
{category.name}
</button>
))}
{categoryData?.responseData.rows
.slice(0, 3)
.map((category) => (
<button
key={category.id}
className={`flex-1 py-[3px] text-[14px] transition-colors cursor-pointer ${category.name === tab
? "bg-[#d3d3d3] text-[#063e8e] font-semibold"
: "border-gray-300 text-[#363636] bg-[#e8e8e8] hover:bg-[#e8e8e8] hover:text-[#063e8e] font-semibold"
}`}
onClick={() => setTab(category.name)}
>
{category.name}
</button>
))}
</div>
{filteredRows.slice(0, 4).map((news) => (
......@@ -232,23 +248,39 @@ const Page = () => {
{/* Right */}
<aside className="w-full lg:w-[30%]">
<div className="flex justify-between items-center">
<h2 className="text-[18px] sm:text-[20px] font-bold uppercase text-blue-900">
<h2 className="text-[18px] sm:text-[20px] font-semibold uppercase text-[#063e8e]">
Liên kết nhanh
</h2>
<a href="#" className="text-blue-900 text-sm sm:text-base">
{'>>'}
<a href="#" className="text-[#063e8e] text-sm sm:text-base">
<ChevronsRight />
</a>
</div>
<hr className="border-blue-900 mb-4" />
<div className="space-y-2 text-blue-900 text-sm md:text-base pb-10">
<hr className="border-[#063e8e] mb-4" />
<div className="space-y-2 text-[#063e8e] text-sm md:text-base pb-10">
<div>
<a href="https://vcci-hcm.org.vn/lien-ket-nhanh/cam-nang-huong-dan-dau-tu-kinh-doanh-tai-viet-nam-2023/">
🔗 Cẩm nang hướng dẫn đầu tư kinh doanh tại Việt Nam
<a
className="text-[#363636]"
href="https://vcci-hcm.org.vn/lien-ket-nhanh/cam-nang-huong-dan-dau-tu-kinh-doanh-tai-viet-nam-2023/"
>
<Link
size={16}
className="inline mr-2 font-semibold text-[#063e8e]"
style={{ verticalAlign: "middle", marginTop: "-2px" }}
/>
Cẩm nang hướng dẫn đầu tư kinh doanh tại Việt Nam
</a>
</div>
<div>
<a href='https://vcci-hcm.org.vn/lien-ket-nhanh/doanh-nghiep-kien-nghi-ve-chinh-sach-va-phap-luat/'>
🔗 Doanh nghiệp kiến nghị về chính sách và pháp luật
<a
className="text-[#363636]"
href="https://vcci-hcm.org.vn/lien-ket-nhanh/doanh-nghiep-kien-nghi-ve-chinh-sach-va-phap-luat/"
>
<Link
size={16}
className="inline mr-2 font-semibold text-[#063e8e]"
style={{ verticalAlign: "middle", marginTop: "-2px" }}
/>
Doanh nghiệp kiến nghị về chính sách và pháp luật
</a>
</div>
</div>
......@@ -258,50 +290,52 @@ const Page = () => {
</a>
</div>
</aside>
</section>
</section >
{/* Sự kiện */}
<section className="flex flex-col lg:flex-row gap-5 pb-10 mb-0">
<div className="flex-1 bg-blue-900 p-5">
< section className="flex flex-col lg:flex-row gap-5 pb-10 mb-0" >
<div className="flex-1 bg-[#063e8e] p-5">
<div className="flex justify-between items-center">
<h2 className="text-[18px] sm:text-[20px] font-bold uppercase text-[#e8c518]">
Sự kiện sắp diễn ra
</h2>
<a href="#" className="text-[#e8c518] text-sm sm:text-base">
{'>>'}
<ChevronsRight />
</a>
</div>
<hr className="border-[#e8c518] mb-4" />
<div className="flex flex-col md:flex-row gap-5">
{eventData?.responseData.rows.slice(0, 1).map((event: EventItem) => (
<a
key={event.id}
href={`${event.id}`}
className="flex flex-col w-full md:w-1/2 min-h-[180px] sm:min-h-[220px] gap-3 mb-3 border border-gray-200 bg-white rounded-md p-3"
>
<div className="w-full aspect-3/2 overflow-hidden">
<img
src={`${BASE_URL.imageEndpoint}${event.image}`}
alt={event.name}
className="w-full h-full object-cover"
onError={(e) => {
e.currentTarget.onerror = null
e.currentTarget.src = "/fallback.png"
}} />
</div>
{eventData?.responseData.rows
.slice(0, 1)
.map((event: EventItem) => (
<a
key={event.id}
href={`${event.id}`}
className="flex flex-col w-full md:w-1/2 min-h-[180px] sm:min-h-[220px] gap-3 mb-3 border border-gray-200 bg-white rounded-md p-3"
>
<div className="w-full aspect-3/2 overflow-hidden">
<img
src={`${BASE_URL.imageEndpoint}${event.image}`}
alt={event.name}
className="w-full h-full object-cover"
/>
</div>
<div className="flex-1">
<p className="text-[#0056b3] font-bold text-xl line-clamp-2">
{event.name}
</p>
<p className="text-gray-500 text-sm my-1">
{dayjs(event.start_time).format('DD/MM/YYYY')}
</p>
<AppEditorContent className="line-clamp-3" value={event.description} />
</div>
</a>
))}
<div className="flex-1">
<p className="text-[#0056b3] font-bold text-xl line-clamp-2">
{event.name}
</p>
<p className="text-gray-500 text-sm my-1">
{dayjs(event.start_time).format("DD/MM/YYYY")}
</p>
<AppEditorContent
className="line-clamp-3"
value={event.description}
/>
</div>
</a>
))}
<div className="w-full md:w-1/2">
{eventData?.responseData.rows.slice(0, 4).map((event) => (
<CardEvent key={event.id} event={event} />
......@@ -309,25 +343,28 @@ const Page = () => {
</div>
</div>
</div>
<div className='bg-blue-900 w-full lg:w-[30%] p-5'>
<div className="bg-[#063e8e] w-full lg:w-[30%] p-5">
<aside>
<div className="flex justify-between items-center">
<h2 className="text-[18px] sm:text-[20px] font-bold uppercase text-[#e8c518]">
Lịch sự kiện
</h2>
<a href="#" className="text-[#e8c518] hover:underline text-sm sm:text-base">
{'>>'}
<a
href="#"
className="text-[#e8c518] hover:underline text-sm sm:text-base"
>
<ChevronsRight />
</a>
</div>
<hr className="border-[#e8c518] mb-4" />
<EventCalendar />
</aside>
</div>
</section>
</section >
{/* Cơ hội kinh doanh + Chính sách */}
<div className='flex flex-col lg:flex-row gap-5 pb-10 mb-0'>
<div className='flex flex-col flex-1'>
< div className="flex flex-col lg:flex-row gap-5 pb-10 mb-0" >
<div className="flex flex-col flex-1">
<div>
<a href="https://vcci-hcm.org.vn/wp-content/uploads/2022/11/MEDIA-KIT_VCCI-HCM-2022-Final.pdf">
<img src="/home/Standard-Banner-1-2024.png.webp" alt="banner" />
......@@ -336,34 +373,39 @@ const Page = () => {
<section className="flex flex-col md:flex-row gap-5 pt-8">
<div className="flex-1">
<div className="flex justify-between items-center">
<a href="/xuc-tien-thuong-mai/co-hoi-kinh-doanh/" className="text-[18px] sm:text-[20px] font-bold uppercase text-blue-900">
<a
href="/xuc-tien-thuong-mai/co-hoi-kinh-doanh/"
className="text-[18px] sm:text-[20px] font-bold uppercase text-[#063e8e]"
>
Cơ hội kinh doanh
</a>
<a href="/xuc-tien-thuong-mai/co-hoi-kinh-doanh/" className="text-blue-900 text-sm sm:text-base">
{'>>'}
<a
href="/xuc-tien-thuong-mai/co-hoi-kinh-doanh/"
className="text-[#063e8e] text-sm sm:text-base"
>
<ChevronsRight />
</a>
</div>
<hr className="border-blue-900 mb-4" />
<hr className="border-[#063e8e] mb-4" />
<div className="pt-2">
{newsData?.responseData.rows.slice(0, 1).map((news: NewsAdminItem) => (
<a
key={news.id}
href={`${news.id}`}
>
<div className="w-full aspect-3/2 relative overflow-hidden mb-5">
<img
src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
alt={news.title}
className="w-full h-full object-cover"
/>
<div className="absolute bg-white opacity-80 bottom-5 left-5 right-5 p-5">
<p className="text-blue-900 font-semibold text-sm sm:text-base z-10 line-clamp-3">
{news.title}
</p>
{newsData?.responseData.rows
.slice(0, 1)
.map((news: NewsAdminItem) => (
<a key={news.id} href={`${news.id}`}>
<div className="w-full aspect-3/2 relative overflow-hidden mb-5">
<img
src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
alt={news.title}
className="w-full h-full object-cover"
/>
<div className="absolute bg-white opacity-80 bottom-5 left-5 right-5 p-5">
<p className="text-[#063e8e] font-semibold text-sm sm:text-base z-10 line-clamp-3">
{news.title}
</p>
</div>
</div>
</div>
</a>
))}
</a>
))}
{rows.slice(0, 3).map((news) => (
<CardNews key={news.id} news={news} />
......@@ -372,34 +414,39 @@ const Page = () => {
</div>
<div className="flex-1">
<div className="flex justify-between items-center">
<a href="/thong-tin-truyen-thong/thong-tin-chinh-sach-va-phap-luat" className="text-[18px] sm:text-[20px] font-bold uppercase text-blue-900">
<a
href="/thong-tin-truyen-thong/thong-tin-chinh-sach-va-phap-luat"
className="text-[18px] sm:text-[20px] font-bold uppercase text-[#063e8e]"
>
Chính sách & pháp luật
</a>
<a href="/thong-tin-truyen-thong/thong-tin-chinh-sach-va-phap-luat" className="text-blue-900 text-sm sm:text-base">
{'>>'}
<a
href="/thong-tin-truyen-thong/thong-tin-chinh-sach-va-phap-luat"
className="text-[#063e8e] text-sm sm:text-base"
>
<ChevronsRight />
</a>
</div>
<hr className="border-blue-900 mb-4" />
<hr className="border-[#063e8e] mb-4" />
<div className="pt-2">
{newsData?.responseData.rows.slice(0, 1).map((news: NewsAdminItem) => (
<a
key={news.id}
href={`${news.id}`}
>
<div className="w-full aspect-3/2 relative overflow-hidden mb-5">
<img
src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
alt={news.title}
className="w-full h-full object-cover"
/>
<div className="absolute bg-white opacity-80 bottom-5 left-5 right-5 p-5">
<p className="text-blue-900 font-semibold text-sm sm:text-base z-10 line-clamp-3">
{news.title}
</p>
{newsData?.responseData.rows
.slice(0, 1)
.map((news: NewsAdminItem) => (
<a key={news.id} href={`${news.id}`}>
<div className="w-full aspect-3/2 relative overflow-hidden mb-5">
<img
src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
alt={news.title}
className="w-full h-full object-cover"
/>
<div className="absolute bg-white opacity-80 bottom-5 left-5 right-5 p-5">
<p className="text-[#063e8e] font-semibold text-sm sm:text-base z-10 line-clamp-3">
{news.title}
</p>
</div>
</div>
</div>
</a>
))}
</a>
))}
{rows.slice(0, 3).map((news) => (
<CardNews key={news.id} news={news} />
......@@ -408,7 +455,7 @@ const Page = () => {
</div>
</section>
</div>
<div className='w-full lg:w-[30%] justify-center items-start flex'>
<div className="w-full lg:w-[30%] justify-center items-start flex">
<a href="https://smartgara.ecaraid.com/">
<img src="/home/eCarAid_web_banner_600x400.webp" alt="banner" />
</a>
......@@ -420,21 +467,23 @@ const Page = () => {
{/* left */}
< aside className="w-full lg:w-1/3 flex-1 bg-[#e8c518] p-5" >
<div className="flex justify-between items-center mb-3">
<h2 className="text-xl font-bold uppercase text-blue-900">Hội viên tiêu biểu</h2>
<h2 className="text-xl font-bold uppercase text-[#063e8e]">
Hội viên tiêu biểu
</h2>
<a
href="#"
className="text-blue-900 hover:underline text-sm font-medium"
className="text-[#063e8e] hover:underline text-sm font-medium"
>
{'>>'}
<ChevronsRight />
</a>
</div>
<hr className="border-blue-900 mb-5" />
<hr className="border-[#063e8e] mb-5" />
<div>
<Swiper
modules={[Autoplay, Grid]}
autoplay={{ delay: 4000, disableOnInteraction: false }}
loop
grid={{ rows: 1, fill: 'row' }}
grid={{ rows: 1, fill: "row" }}
slidesPerGroup={3}
breakpoints={{
0: { slidesPerView: 2, spaceBetween: 10 },
......@@ -461,21 +510,23 @@ const Page = () => {
{/* right */}
< aside className="w-full lg:w-[30%] py-5" >
<div className="flex justify-between items-center mb-3">
<h2 className="text-xl font-bold uppercase text-blue-900">Kết nối hội viên</h2>
<h2 className="text-xl font-bold uppercase text-[#063e8e]">
Kết nối hội viên
</h2>
<a
href="#"
className="text-blue-900 hover:underline text-sm font-medium"
className="text-[#063e8e] hover:underline text-sm font-medium"
>
{'>>'}
<ChevronsRight />
</a>
</div>
<hr className="border-blue-900 mb-5" />
<hr className="border-[#063e8e] mb-5" />
<div className="pb-10">
<Swiper
modules={[Autoplay, Grid]}
autoplay={{ delay: 4000, disableOnInteraction: false }}
loop
grid={{ rows: 2, fill: 'row' }}
grid={{ rows: 2, fill: "row" }}
slidesPerGroup={3}
breakpoints={{
0: { slidesPerView: 2, spaceBetween: 10 },
......@@ -505,24 +556,26 @@ const Page = () => {
{/* left */}
< div className="flex flex-col flex-1" >
<div className="flex justify-between items-center mb-3">
<h2 className="text-xl font-bold uppercase text-blue-900">Video</h2>
<h2 className="text-xl font-bold uppercase text-[#063e8e]">
Video
</h2>
<a
href="#"
className="text-blue-900 hover:underline text-sm font-medium"
className="text-[#063e8e] hover:underline text-sm font-medium"
>
{'>>'}
<ChevronsRight />
</a>
</div>
<hr className="border-blue-900 mb-5" />
<hr className="border-[#063e8e] mb-5" />
<div className="flex flex-col md:flex-row gap-4 md:gap-6">
{[
{
src: 'https://www.youtube.com/embed/J0Iz0iGuAXY',
title: 'VCCI-HCM 2024 IN REVIEW (ENGLISH VERSION)',
src: "https://www.youtube.com/embed/J0Iz0iGuAXY",
title: "VCCI-HCM 2024 IN REVIEW (ENGLISH VERSION)",
},
{
src: 'https://www.youtube.com/embed/_OnnGWv2ehM',
title: 'Hội nghị Hội viên VCCI - Gala Mừng Xuân Ất Tỵ 2025',
src: "https://www.youtube.com/embed/_OnnGWv2ehM",
title: "Hội nghị Hội viên VCCI - Gala Mừng Xuân Ất Tỵ 2025",
},
].map((video, i) => (
<div key={i} className="w-full md:w-1/2">
......@@ -537,7 +590,9 @@ const Page = () => {
allowFullScreen
/>
</div>
<p className="mt-2 text-sm text-gray-700 font-medium">{video.title}</p>
<p className="mt-2 text-sm text-gray-700 font-medium">
{video.title}
</p>
</div>
))}
</div>
......@@ -546,21 +601,23 @@ const Page = () => {
{/* right */}
< aside className="w-full lg:w-[30%]" >
<div className="flex justify-between items-center mb-3">
<h2 className="text-xl font-bold uppercase text-blue-900">Đối tác</h2>
<h2 className="text-xl font-bold uppercase text-[#063e8e]">
Đối tác
</h2>
<a
href="#"
className="text-blue-900 hover:underline text-sm font-medium"
className="text-[#063e8e] hover:underline text-sm font-medium"
>
{'>>'}
<ChevronsRight />
</a>
</div>
<hr className="border-blue-900 mb-5" />
<hr className="border-[#063e8e] mb-5" />
<div className="pb-10">
<Swiper
modules={[Autoplay, Grid]}
autoplay={{ delay: 4000, disableOnInteraction: false }}
loop
grid={{ rows: 2, fill: 'row' }}
grid={{ rows: 2, fill: "row" }}
slidesPerGroup={3}
breakpoints={{
0: { slidesPerView: 2, spaceBetween: 10 },
......@@ -587,7 +644,7 @@ const Page = () => {
</div >
</>
)
)
}
);
};
export default Page
export default Page;
src/app/(main)/_lib/layout/ScrollToTopButton.tsx 0 → 100644
View file @ ee2ee642
"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
View file @ ee2ee642
......@@ -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
View file @ ee2ee642
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
View file @ ee2ee642
......@@ -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
View file @ ee2ee642
......@@ -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
View file @ ee2ee642
......@@ -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
View file @ ee2ee642
......@@ -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
View file @ ee2ee642
......@@ -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
View file @ ee2ee642
......@@ -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
View file @ ee2ee642
......@@ -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
View file @ ee2ee642
......@@ -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
View file @ ee2ee642
......@@ -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
View file @ ee2ee642
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>
);
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment