Commit 8c3aefaa authored by Vũ Đình Nguyên's avatar Vũ Đình Nguyên

feat(layout-page): creat page layout page

parent c61429cb
...@@ -35,7 +35,7 @@ function footer() { ...@@ -35,7 +35,7 @@ function footer() {
return ( return (
<div className="overflow-hidden"> <div className="overflow-hidden">
<div className="p-5 bg-[#e3e3e3]"> <div className="p-5 bg-[#e3e3e3]">
<div className="max-w-[1200px] w-full flex m-auto flex-wrap relative"> <div className="container w-full flex m-auto flex-wrap relative">
<div className="z-10 w-full lg:w-1/3 flex flex-col gap-5 p-5"> <div className="z-10 w-full lg:w-1/3 flex flex-col gap-5 p-5">
<h2 className="text-[#063E8E] text-[20px] font-[500]"> <h2 className="text-[#063E8E] text-[20px] font-[500]">
ĐĂNG KÝ NHẬN THÔNG TIN VCCI ĐĂNG KÝ NHẬN THÔNG TIN VCCI
......
...@@ -57,7 +57,7 @@ function Header() { ...@@ -57,7 +57,7 @@ function Header() {
</div> </div>
<div className="sticky top-0 z-50 bg-[#ededed] shadow-md"> <div className="sticky top-0 z-50 bg-[#ededed] shadow-md">
<div className="max-w-[1200px] m-auto"> <div className="container m-auto">
<div className="w-full flex justify-between items-center"> <div className="w-full flex justify-between items-center">
{/* Logo */} {/* Logo */}
<a href="/" className="flex items-center"> <a href="/" className="flex items-center">
......
"use client"; "use client";
import React, { useState } from "react"; import React, { useState } from "react";
import { PATHS } from "@constants/paths";
import ListCategory from "@app/dai-dien-gioi-chu/components/list-category"; import ListCategory from "@app/dai-dien-gioi-chu/components/list-category";
import ListFilter from "@app/dai-dien-gioi-chu/components/list-filter"; import ListFilter from "@app/dai-dien-gioi-chu/components/list-filter";
import NewsContent from "@app/dai-dien-gioi-chu/components/card-news"; import NewsContent from "@app/dai-dien-gioi-chu/components/card-news";
import { Pagination} from "@components/base/pagination"; import { Pagination } from "@components/base/pagination";
import Image from "next/image"; import Image from "next/image";
import { useGetNews } from "@api/endpoints/news"; import { useGetNews } from "@api/endpoints/news";
import { GetNewsResponseType } from "@api/types/NewsPage.type"; import { GetNewsResponseType } from "@api/types/NewsPage.type";
...@@ -20,7 +21,23 @@ export default function Page() { ...@@ -20,7 +21,23 @@ export default function Page() {
return ( return (
<div className="min-h-screen container mx-auto p-4"> <div className="min-h-screen container mx-auto p-4">
<div className="w-full flex flex-col gap-5"> <div className="w-full flex flex-col gap-5">
<ListCategory /> <ListCategory
categories={[
{
title: "Chức năng Đại diện Người sử dụng lao động",
href: `${PATHS.ownerRepresentatives}`,
},
{
title: "Sự kiện – Tập huấn NSDLĐ",
href: `${PATHS.ownerRepresentatives}/tap-huan-nsdld`,
},
{
title: "Tin liên quan",
href: `${PATHS.ownerRepresentatives}/tin-lien-quan`,
},
{ title: "Chủ đề", href: `${PATHS.ownerRepresentatives}/chu-de` },
]}
/>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Main content */} {/* Main content */}
...@@ -36,7 +53,14 @@ export default function Page() { ...@@ -36,7 +53,14 @@ export default function Page() {
page={Number(allData?.responseData.currentPage ?? page)} page={Number(allData?.responseData.currentPage ?? page)}
onChangePage={(p) => setPage(p)} onChangePage={(p) => setPage(p)}
onGoToPreviousPage={() => setPage(Math.max(1, page - 1))} onGoToPreviousPage={() => setPage(Math.max(1, page - 1))}
onGoToNextPage={() => setPage(Math.min(Number(allData?.responseData.totalPages ?? 1), page + 1))} onGoToNextPage={() =>
setPage(
Math.min(
Number(allData?.responseData.totalPages ?? 1),
page + 1
)
)
}
/> />
</div> </div>
</div> </div>
......
...@@ -81,6 +81,7 @@ export const EventFilter: React.FC<{ onFilter?: (payload: FilterPayload) => void ...@@ -81,6 +81,7 @@ export const EventFilter: React.FC<{ onFilter?: (payload: FilterPayload) => void
placeholder="Tên sự kiện ..." placeholder="Tên sự kiện ..."
value={query} value={query}
onChange={(e) => setQuery(e.target.value)} onChange={(e) => setQuery(e.target.value)}
className='text-black placeholder:text-gray-400 rounded-none py-2.5 px-2'
/> />
</div> </div>
...@@ -104,8 +105,8 @@ export const EventFilter: React.FC<{ onFilter?: (payload: FilterPayload) => void ...@@ -104,8 +105,8 @@ export const EventFilter: React.FC<{ onFilter?: (payload: FilterPayload) => void
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Button onClick={handleFilter} className="flex-1">Lọc sự kiện</Button> <Button onClick={handleFilter} className="flex-1 rounded-none font-medium text-lg text-white hover:bg-muted-foreground hover:outline-1 outline-primary hover:text-primary">Lọc sự kiện</Button>
<Button variant="outline" onClick={handleReset} className="flex-1">Bỏ lọc</Button> <Button onClick={handleReset} className="flex-1 rounded-none font-medium text-lg text-white hover:bg-muted-foreground hover:outline-1 outline-primary hover:text-primary">Bỏ lọc</Button>
</div> </div>
</aside> </aside>
) )
......
...@@ -3,7 +3,6 @@ ...@@ -3,7 +3,6 @@
import { usePathname } from "next/navigation" import { usePathname } from "next/navigation"
import React from "react" import React from "react"
import { MenuItem } from '../menu-category' import { MenuItem } from '../menu-category'
import {PATHS} from '@constants/paths'
// Local Menu shape compatible with MenuItem // Local Menu shape compatible with MenuItem
type Menu = { type Menu = {
id: string | number id: string | number
...@@ -16,15 +15,9 @@ type Category = { ...@@ -16,15 +15,9 @@ type Category = {
href: string href: string
} }
const CATEGORIES: Category[] = [ // Default categories removed — component now accepts `categories` via props.
{ title: "Chức năng Đại diện Người sử dụng lao động", href: "/dai-dien-gioi-chu" },
{ title: "Sự kiện – Tập huấn NSDLĐ", href: `${PATHS.ownerRepresentatives}/su-kien` },
{ title: "Tin liên quan", href: `${PATHS.ownerRepresentatives}/tin-lien-quan` },
{ title: "Chủ đề", href: `${PATHS.ownerRepresentatives}/chu-de` },
] const ListCategory: React.FC<{ categories?: Category[] }> = ({ categories = [] }) => {
const ListCategory: React.FC<{ categories?: Category[] }> = ({ categories = CATEGORIES }) => {
const pathname = usePathname() || "" const pathname = usePathname() || ""
const isActive = (href: string) => { const isActive = (href: string) => {
...@@ -37,7 +30,7 @@ const ListCategory: React.FC<{ categories?: Category[] }> = ({ categories = CATE ...@@ -37,7 +30,7 @@ const ListCategory: React.FC<{ categories?: Category[] }> = ({ categories = CATE
<div className="border-t border-gray-200 bg-white p-2.5"> <div className="border-t border-gray-200 bg-white p-2.5">
<div className="w-full px-4 sm:px-6 lg:px-8"> <div className="w-full px-4 sm:px-6 lg:px-8">
<div className="py-3"> <div className="py-3">
<div className="flex flex-wrap gap-4 sm:gap-8 items-center max-w-full overflow-x-auto"> <div className="flex flex-wrap items-center max-w-full overflow-x-auto">
{categories.map((c) => { {categories.map((c) => {
const menu: Menu = { id: c.href, name: c.title, link: c.href } const menu: Menu = { id: c.href, name: c.title, link: c.href }
const active = isActive(c.href) const active = isActive(c.href)
......
...@@ -11,16 +11,7 @@ const DEFAULT_CATEGORIES: Category[] = [ ...@@ -11,16 +11,7 @@ const DEFAULT_CATEGORIES: Category[] = [
{ id: 'policy', title: 'Hỏi đáp về chính sách', count: 0 }, { id: 'policy', title: 'Hỏi đáp về chính sách', count: 0 },
{ id: 'biz', title: 'Tin Doanh Nghiệp', count: 9 }, { id: 'biz', title: 'Tin Doanh Nghiệp', count: 9 },
{ id: 'member', title: 'Tin Hội Viên', count: 17 }, { id: 'member', title: 'Tin Hội Viên', count: 17 },
{ id: 'law1', title: 'Văn bản Pháp luật sắp có hiệu lực', count: 30 }, { id: 'law', title: 'Văn bản Pháp luật sắp có hiệu lực', count: 30 },
{ id: 'law2', title: 'Văn bản Pháp luật sắp có hiệu lực', count: 30 },
{ id: 'law3', title: 'Văn bản Pháp luật sắp có hiệu lực', count: 30 },
{ id: 'law4', title: 'Văn bản Pháp luật sắp có hiệu lực', count: 30 },
{ id: 'law5', title: 'Văn bản Pháp luật sắp có hiệu lực', count: 30 },
{ id: 'law6', title: 'Văn bản Pháp luật sắp có hiệu lực', count: 30 },
{ id: 'law7', title: 'Văn bản Pháp luật sắp có hiệu lực', count: 30 },
{ id: 'law8', title: 'Văn bản Pháp luật sắp có hiệu lực', count: 30 },
{ id: 'law9', title: 'Văn bản Pháp luật sắp có hiệu lực', count: 30 },
{ id: 'law51', title: 'Văn bản Pháp luật sắp có hiệu lực', count: 30 },
] ]
export const ListFilter: React.FC<{ export const ListFilter: React.FC<{
......
...@@ -3,15 +3,30 @@ ...@@ -3,15 +3,30 @@
import Image from "next/image"; import Image from "next/image";
import ListCategory from "./components/list-category"; import ListCategory from "./components/list-category";
import ListFilter from "./components/list-filter"; import ListFilter from "./components/list-filter";
import parse from 'html-react-parser' import parse from "html-react-parser";
import {SAMPLE_HTML} from './lib/sampleHtml' import { SAMPLE_HTML } from "./lib/sampleHtml";
import { PATHS } from "@constants/paths";
const Page: React.FC = () => { const Page: React.FC = () => {
return ( return (
<div className="min-h-screen container mx-auto p-4"> <div className="min-h-screen w-full container mx-auto p-4">
<div className="w-full flex flex-col gap-5"> <div className="w-full flex flex-col gap-5">
<ListCategory /> <ListCategory
categories={[
{
title: "Chức năng Đại diện Người sử dụng lao động",
href: `${PATHS.ownerRepresentatives}`,
},
{
title: "Sự kiện – Tập huấn NSDLĐ",
href: `${PATHS.ownerRepresentatives}/tap-huan-nsdld`,
},
{
title: "Tin liên quan",
href: `${PATHS.ownerRepresentatives}/tin-lien-quan`,
},
{ title: "Chủ đề", href: `${PATHS.ownerRepresentatives}/chu-de` },
]}
/>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Main content */} {/* Main content */}
......
"use client";
import React, { useState } from "react";
import ListCategory from "@app/dai-dien-gioi-chu/components/list-category";
import { PATHS } from "@constants/paths";
import ListFilter from "@app/dai-dien-gioi-chu/components/list-filter";
import NewsContent from "@app/dai-dien-gioi-chu/components/card-news";
import { Pagination } from "@components/base/pagination";
import Image from "next/image";
import { useGetNews } from "@api/endpoints/news";
import { GetNewsResponseType } from "@api/types/NewsPage.type";
export default function Page() {
const [submitSearch] = useState("");
const [page, setPage] = useState(1);
const pageSize = 5;
const { data: allData } = useGetNews<GetNewsResponseType>({
pageSize: String(pageSize),
currentPage: String(page),
filters: submitSearch ? `title @=${submitSearch}` : undefined,
});
return (
<div className="min-h-screen container mx-auto p-4">
<div className="w-full flex flex-col gap-5">
<ListCategory
categories={[
{
title: "Chức năng Đại diện Người sử dụng lao động",
href: `${PATHS.ownerRepresentatives}`,
},
{
title: "Sự kiện – Tập huấn NSDLĐ",
href: `${PATHS.ownerRepresentatives}/tap-huan-nsdld`,
},
{
title: "Tin liên quan",
href: `${PATHS.ownerRepresentatives}/tin-lien-quan`,
},
{ title: "Chủ đề", href: `${PATHS.ownerRepresentatives}/chu-de` },
]}
/>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Main content */}
<main className="lg:col-span-2 bg-background ">
<div className="pb-5 overflow-hidden">
{allData?.responseData.rows.map((news) => (
<NewsContent key={news.id} news={news} />
))}
<div className="w-full flex justify-center mt-4">
<Pagination
pageCount={Number(allData?.responseData.totalPages ?? 1)}
page={Number(allData?.responseData.currentPage ?? page)}
onChangePage={(p) => setPage(p)}
onGoToPreviousPage={() => setPage(Math.max(1, page - 1))}
onGoToNextPage={() =>
setPage(
Math.min(
Number(allData?.responseData.totalPages ?? 1),
page + 1
)
)
}
/>
</div>
</div>
</main>
{/* Sidebar */}
<aside className="space-y-6">
<ListFilter />
<div className="bg-white border rounded-md overflow-hidden">
<div className="w-full h-56 relative bg-gray-100">
<Image
src="/banner.webp"
alt="Quảng cáo"
fill
className="object-cover"
/>
</div>
</div>
</aside>
</div>
</div>
</div>
);
}
...@@ -23,9 +23,19 @@ export default function Page() { ...@@ -23,9 +23,19 @@ export default function Page() {
<div className="w-full flex flex-col gap-5"> <div className="w-full flex flex-col gap-5">
<ListCategory <ListCategory
categories={[ categories={[
{ title: 'Tin liên quan', href: `${PATHS.ownerRepresentatives}/tin-lien-quan` }, {
{ title: 'Sự kiện', href: `${PATHS.ownerRepresentatives}/su-kien` }, title: "Chức năng Đại diện Người sử dụng lao động",
{ title: 'Chủ đề', href: `${PATHS.ownerRepresentatives}/chu-de` }, href: `${PATHS.ownerRepresentatives}`,
},
{
title: "Sự kiện – Tập huấn NSDLĐ",
href: `${PATHS.ownerRepresentatives}/tap-huan-nsdld`,
},
{
title: "Tin liên quan",
href: `${PATHS.ownerRepresentatives}/tin-lien-quan`,
},
{ title: "Chủ đề", href: `${PATHS.ownerRepresentatives}/chu-de` },
]} ]}
/> />
......
"use client";
import React from "react";
type Region = { id: string; name: string; image?: string };
export const DEFAULT_REGIONS: Region[] = [
{ id: "dong-nam-a", name: "Đông Nam Á", image: "/Dong-Nam-A-scaled.webp" },
{ id: "dong-bac-a", name: "Đông Bắc Á", image: "/Dong-Bac-A-scaled.webp" },
{ id: "nam-a", name: "Nam Á", image: "/Nam-a-scaled.webp" },
{ id: "tay-a", name: "Tây Á", image: "/Tay-a-scaled.webp" },
{ id: "bac-my", name: "Bắc Mỹ", image: "/Bac-My-1-scaled.webp" },
{ id: "nam-my", name: "Nam Mỹ", image: "/Nam-My-1-scaled.webp" },
{ id: "chau-au", name: "Châu Âu", image: "/Chau-Au-scaled.jpg.webp" },
{ id: "chau-uc", name: "Châu Úc", image: "/Chau-Uc-scaled.jpg.webp" },
{ id: "chau-phi", name: "Châu Phi", image: "/Chau-Phi-1-scaled.jpg.webp" },
];
type Props = {
imageSrc?: string; // relative to /public — default `images/map-se-asia.png`
regions?: Region[];
// controlled props (optional)
active?: string | null;
onSelect?: (id: string) => void;
};
export default function MapRegion({
imageSrc = "/images/map-se-asia.png",
regions = DEFAULT_REGIONS,
active: activeProp,
}: Props) {
// controlled usage: prefer activeProp; fallback to first region id
const active = activeProp ?? regions[0]?.id ?? null;
const activeRegion = regions.find((r) => r.id === active);
const displayedImage = activeRegion?.image ?? imageSrc;
return (
<div className="max-w-6xl mx-auto">
<div className="bg-white shadow-sm rounded-md overflow-hidden p-6">
<div className="flex flex-col gap-6">
<div>
<h3 className="text-2xl font-semibold text-primary mb-0">{activeRegion?.name ?? ""}</h3>
</div>
<div className="w-full flex items-center justify-center">
<div className="w-full max-w-3xl">
<div className="bg-gray-50 p-4 flex items-center justify-center">
<img
src={displayedImage}
alt={activeRegion?.name ?? "Map"}
className="w-full h-auto object-contain block mx-auto"
style={{ maxHeight: 520 }}
/>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
"use client"
import MapRegion, { DEFAULT_REGIONS } from "./components/map-region"
import React, { useState } from "react";
import ListCategory from "@app/dai-dien-gioi-chu/components/list-category";
import { PATHS } from '@constants/paths'
import EventFilter from "@app/dai-dien-gioi-chu/components/event-filter";
import NewsContent from "@app/dai-dien-gioi-chu/components/card-news";
import { Pagination} from "@components/base/pagination";
import Image from "next/image";
export default function Page() {
const [active, setActive] = useState<string | null>(DEFAULT_REGIONS[0]?.id ?? null)
return (
<div className="min-h-screen container mx-auto p-4">
<div className="w-full flex flex-col gap-5">
<ListCategory
categories={[
{
title: "Hồ sơ thị trường",
href: `${PATHS.marketProfile}/`,
},
{
title: "Môi trường kinh doanh",
href: `${PATHS.tradePromotion}/moi-truong-kinh-doanh`,
},
{
title: "Cơ hội kinh doanh",
href: `${PATHS.tradePromotion}/co-hoi-kinh-doanh`,
},
{
title: "Hỗ trợ kinh doanh",
href: `${PATHS.tradePromotion}/ho-tro-kinh-doanh`,
},
]}
/>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Main content */}
<main className="lg:col-span-2 bg-background ">
<div className="pb-5 overflow-hidden">
<MapRegion active={active} />
</div>
</main>
{/* Sidebar */}
<aside className="space-y-6">
<div className="bg-white border rounded-md p-6">
<h3 className="text-2xl font-semibold text-primary mb-3">KHU VỰC</h3>
<nav aria-label="Khu vực" className="space-y-2">
{DEFAULT_REGIONS.map((r) => {
const isActive = r.id === active
return (
<button
key={r.id}
onClick={() => setActive(r.id)}
className={`w-full text-left px-3 py-2 flex items-center justify-between transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-primary-foreground ${
isActive
? "border-2 border-primary-foreground"
: "hover:bg-muted hover:text-primary-foreground"
}`}
aria-current={isActive ? "true" : undefined}
>
<span className={`text-sm ${isActive ? "text-primary-foreground font-semibold" : "text-primary"}`}>
{r.name}
</span>
</button>
)
})}
</nav>
</div>
</aside>
</div>
</div>
</div>
)
}
"use client";
import React, { useState } from "react";
import ListCategory from "@app/dai-dien-gioi-chu/components/list-category";
import { PATHS } from '@constants/paths'
import EventFilter from "@app/dai-dien-gioi-chu/components/event-filter";
import NewsContent from "@app/dai-dien-gioi-chu/components/card-news";
import { Pagination} from "@components/base/pagination";
import Image from "next/image";
import { useGetNews } from "@api/endpoints/news";
import { GetNewsResponseType } from "@api/types/NewsPage.type";
export default function Page() {
const [submitSearch] = useState("");
const [page, setPage] = useState(1);
const pageSize = 5;
const { data: allData } = useGetNews<GetNewsResponseType>({
pageSize: String(pageSize),
currentPage: String(page),
filters: submitSearch ? `title @=${submitSearch}` : undefined,
});
return (
<div className="min-h-screen container mx-auto p-4">
<div className="w-full flex flex-col gap-5">
<ListCategory
categories={[
{
title: "Sự kiện",
href: `${PATHS.event}/su-kien`,
},
{
title: "Đào tạo",
href: `${PATHS.event}/dao-tao`,
},
]}
/>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Main content */}
<main className="lg:col-span-2 bg-background ">
<div className="pb-5 overflow-hidden">
{allData?.responseData.rows.map((news) => (
<NewsContent key={news.id} news={news} />
))}
<div className="w-full flex justify-center mt-4">
<Pagination
pageCount={Number(allData?.responseData.totalPages ?? 1)}
page={Number(allData?.responseData.currentPage ?? page)}
onChangePage={(p) => setPage(p)}
onGoToPreviousPage={() => setPage(Math.max(1, page - 1))}
onGoToNextPage={() => setPage(Math.min(Number(allData?.responseData.totalPages ?? 1), page + 1))}
/>
</div>
</div>
</main>
{/* Sidebar */}
<aside className="space-y-6">
<EventFilter />
<div className="bg-white border rounded-md overflow-hidden">
<div className="w-full h-56 relative bg-gray-100">
<Image
src="/banner.webp"
alt="Quảng cáo"
fill
className="object-cover"
/>
</div>
</div>
</aside>
</div>
</div>
</div>
);
}
"use client";
import React, { useState } from "react";
import ListCategory from "@app/dai-dien-gioi-chu/components/list-category";
import { PATHS } from '@constants/paths'
import EventFilter from "@app/dai-dien-gioi-chu/components/event-filter";
import NewsContent from "@app/dai-dien-gioi-chu/components/card-news";
import { Pagination} from "@components/base/pagination";
import Image from "next/image";
import { useGetNews } from "@api/endpoints/news";
import { GetNewsResponseType } from "@api/types/NewsPage.type";
export default function Page() {
const [submitSearch] = useState("");
const [page, setPage] = useState(1);
const pageSize = 5;
const { data: allData } = useGetNews<GetNewsResponseType>({
pageSize: String(pageSize),
currentPage: String(page),
filters: submitSearch ? `title @=${submitSearch}` : undefined,
});
return (
<div className="min-h-screen container mx-auto p-4">
<div className="w-full flex flex-col gap-5">
<ListCategory
categories={[
{
title: "Sự kiện",
href: `${PATHS.event}/su-kien`,
},
{
title: "Đào tạo",
href: `${PATHS.event}/dao-tao`,
},
]}
/>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Main content */}
<main className="lg:col-span-2 bg-background ">
<div className="pb-5 overflow-hidden">
{allData?.responseData.rows.map((news) => (
<NewsContent key={news.id} news={news} />
))}
<div className="w-full flex justify-center mt-4">
<Pagination
pageCount={Number(allData?.responseData.totalPages ?? 1)}
page={Number(allData?.responseData.currentPage ?? page)}
onChangePage={(p) => setPage(p)}
onGoToPreviousPage={() => setPage(Math.max(1, page - 1))}
onGoToNextPage={() => setPage(Math.min(Number(allData?.responseData.totalPages ?? 1), page + 1))}
/>
</div>
</div>
</main>
{/* Sidebar */}
<aside className="space-y-6">
<EventFilter />
<div className="bg-white border rounded-md overflow-hidden">
<div className="w-full h-56 relative bg-gray-100">
<Image
src="/banner.webp"
alt="Quảng cáo"
fill
className="object-cover"
/>
</div>
</div>
</aside>
</div>
</div>
</div>
);
}
"use client";
import React, { useState } from "react";
import ListCategory from "@app/dai-dien-gioi-chu/components/list-category";
import { PATHS } from '@constants/paths'
import EventFilter from "@app/dai-dien-gioi-chu/components/event-filter";
import NewsContent from "@app/dai-dien-gioi-chu/components/card-news";
import { Pagination} from "@components/base/pagination";
import Image from "next/image";
import { useGetNews } from "@api/endpoints/news";
import { GetNewsResponseType } from "@api/types/NewsPage.type";
export default function Page() {
const [submitSearch] = useState("");
const [page, setPage] = useState(1);
const pageSize = 5;
const { data: allData } = useGetNews<GetNewsResponseType>({
pageSize: String(pageSize),
currentPage: String(page),
filters: submitSearch ? `title @=${submitSearch}` : undefined,
});
return (
<div className="min-h-screen container mx-auto p-4">
<div className="w-full flex flex-col gap-5">
<ListCategory
categories={[
{
title: "Tin VCCI",
href: `${PATHS.mediaInformation}/tin-vcci`,
},
{
title: "Tin kinh tế",
href: `${PATHS.mediaInformation}/tin-kinh-te`,
},
{
title: "Tin doanh nghiệp",
href: `${PATHS.mediaInformation}/tin-doanh-nghiep`,
},
{
title: "Chuyên đề",
href: `${PATHS.mediaInformation}/chuyen-de`,
},
{
title: "Thông tin chính sách và pháp luật",
href: `${PATHS.mediaInformation}/thong-tin-chinh-sach-va-phap-luat`,
},
{
title: "Ấn phẩm",
href: `${PATHS.mediaInformation}/an-pham`,
},
{
title: "Thư viện tài liệu",
href: `${PATHS.mediaInformation}/thu-vien-tai-lieu`,
},
]}
/>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Main content */}
<main className="lg:col-span-2 bg-background ">
<div className="pb-5 overflow-hidden">
{allData?.responseData.rows.map((news) => (
<NewsContent key={news.id} news={news} />
))}
<div className="w-full flex justify-center mt-4">
<Pagination
pageCount={Number(allData?.responseData.totalPages ?? 1)}
page={Number(allData?.responseData.currentPage ?? page)}
onChangePage={(p) => setPage(p)}
onGoToPreviousPage={() => setPage(Math.max(1, page - 1))}
onGoToNextPage={() => setPage(Math.min(Number(allData?.responseData.totalPages ?? 1), page + 1))}
/>
</div>
</div>
</main>
{/* Sidebar */}
<aside className="space-y-6">
<EventFilter />
<div className="bg-white border rounded-md overflow-hidden">
<div className="w-full h-56 relative bg-gray-100">
<Image
src="/banner.webp"
alt="Quảng cáo"
fill
className="object-cover"
/>
</div>
</div>
</aside>
</div>
</div>
</div>
);
}
"use client";
import React, { useState } from "react";
import ListCategory from "@app/dai-dien-gioi-chu/components/list-category";
import { PATHS } from '@constants/paths'
import EventFilter from "@app/dai-dien-gioi-chu/components/event-filter";
import NewsContent from "@app/dai-dien-gioi-chu/components/card-news";
import { Pagination} from "@components/base/pagination";
import Image from "next/image";
import { useGetNews } from "@api/endpoints/news";
import { GetNewsResponseType } from "@api/types/NewsPage.type";
export default function Page() {
const [submitSearch] = useState("");
const [page, setPage] = useState(1);
const pageSize = 5;
const { data: allData } = useGetNews<GetNewsResponseType>({
pageSize: String(pageSize),
currentPage: String(page),
filters: submitSearch ? `title @=${submitSearch}` : undefined,
});
return (
<div className="min-h-screen container mx-auto p-4">
<div className="w-full flex flex-col gap-5">
<ListCategory
categories={[
{
title: "Tin VCCI",
href: `${PATHS.mediaInformation}/tin-vcci`,
},
{
title: "Tin kinh tế",
href: `${PATHS.mediaInformation}/tin-kinh-te`,
},
{
title: "Tin doanh nghiệp",
href: `${PATHS.mediaInformation}/tin-doanh-nghiep`,
},
{
title: "Chuyên đề",
href: `${PATHS.mediaInformation}/chuyen-de`,
},
{
title: "Thông tin chính sách và pháp luật",
href: `${PATHS.mediaInformation}/thong-tin-chinh-sach-va-phap-luat`,
},
{
title: "Ấn phẩm",
href: `${PATHS.mediaInformation}/an-pham`,
},
{
title: "Thư viện tài liệu",
href: `${PATHS.mediaInformation}/thu-vien-tai-lieu`,
},
]}
/>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Main content */}
<main className="lg:col-span-2 bg-background ">
<div className="pb-5 overflow-hidden">
{allData?.responseData.rows.map((news) => (
<NewsContent key={news.id} news={news} />
))}
<div className="w-full flex justify-center mt-4">
<Pagination
pageCount={Number(allData?.responseData.totalPages ?? 1)}
page={Number(allData?.responseData.currentPage ?? page)}
onChangePage={(p) => setPage(p)}
onGoToPreviousPage={() => setPage(Math.max(1, page - 1))}
onGoToNextPage={() => setPage(Math.min(Number(allData?.responseData.totalPages ?? 1), page + 1))}
/>
</div>
</div>
</main>
{/* Sidebar */}
<aside className="space-y-6">
<EventFilter />
<div className="bg-white border rounded-md overflow-hidden">
<div className="w-full h-56 relative bg-gray-100">
<Image
src="/banner.webp"
alt="Quảng cáo"
fill
className="object-cover"
/>
</div>
</div>
</aside>
</div>
</div>
</div>
);
}
"use client";
import React, { useState } from "react";
import ListCategory from "@app/dai-dien-gioi-chu/components/list-category";
import { PATHS } from '@constants/paths'
import EventFilter from "@app/dai-dien-gioi-chu/components/event-filter";
import NewsContent from "@app/dai-dien-gioi-chu/components/card-news";
import { Pagination} from "@components/base/pagination";
import Image from "next/image";
import { useGetNews } from "@api/endpoints/news";
import { GetNewsResponseType } from "@api/types/NewsPage.type";
export default function Page() {
const [submitSearch] = useState("");
const [page, setPage] = useState(1);
const pageSize = 5;
const { data: allData } = useGetNews<GetNewsResponseType>({
pageSize: String(pageSize),
currentPage: String(page),
filters: submitSearch ? `title @=${submitSearch}` : undefined,
});
return (
<div className="min-h-screen container mx-auto p-4">
<div className="w-full flex flex-col gap-5">
<ListCategory
categories={[
{
title: "Tin VCCI",
href: `${PATHS.mediaInformation}/tin-vcci`,
},
{
title: "Tin kinh tế",
href: `${PATHS.mediaInformation}/tin-kinh-te`,
},
{
title: "Tin doanh nghiệp",
href: `${PATHS.mediaInformation}/tin-doanh-nghiep`,
},
{
title: "Chuyên đề",
href: `${PATHS.mediaInformation}/chuyen-de`,
},
{
title: "Thông tin chính sách và pháp luật",
href: `${PATHS.mediaInformation}/thong-tin-chinh-sach-va-phap-luat`,
},
{
title: "Ấn phẩm",
href: `${PATHS.mediaInformation}/an-pham`,
},
{
title: "Thư viện tài liệu",
href: `${PATHS.mediaInformation}/thu-vien-tai-lieu`,
},
]}
/>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Main content */}
<main className="lg:col-span-2 bg-background ">
<div className="pb-5 overflow-hidden">
{allData?.responseData.rows.map((news) => (
<NewsContent key={news.id} news={news} />
))}
<div className="w-full flex justify-center mt-4">
<Pagination
pageCount={Number(allData?.responseData.totalPages ?? 1)}
page={Number(allData?.responseData.currentPage ?? page)}
onChangePage={(p) => setPage(p)}
onGoToPreviousPage={() => setPage(Math.max(1, page - 1))}
onGoToNextPage={() => setPage(Math.min(Number(allData?.responseData.totalPages ?? 1), page + 1))}
/>
</div>
</div>
</main>
{/* Sidebar */}
<aside className="space-y-6">
<EventFilter />
<div className="bg-white border rounded-md overflow-hidden">
<div className="w-full h-56 relative bg-gray-100">
<Image
src="/banner.webp"
alt="Quảng cáo"
fill
className="object-cover"
/>
</div>
</div>
</aside>
</div>
</div>
</div>
);
}
"use client";
import React, { useState } from "react";
import ListCategory from "@app/dai-dien-gioi-chu/components/list-category";
import { PATHS } from '@constants/paths'
import EventFilter from "@app/dai-dien-gioi-chu/components/event-filter";
import NewsContent from "@app/dai-dien-gioi-chu/components/card-news";
import { Pagination} from "@components/base/pagination";
import Image from "next/image";
import { useGetNews } from "@api/endpoints/news";
import { GetNewsResponseType } from "@api/types/NewsPage.type";
export default function Page() {
const [submitSearch] = useState("");
const [page, setPage] = useState(1);
const pageSize = 5;
const { data: allData } = useGetNews<GetNewsResponseType>({
pageSize: String(pageSize),
currentPage: String(page),
filters: submitSearch ? `title @=${submitSearch}` : undefined,
});
return (
<div className="min-h-screen container mx-auto p-4">
<div className="w-full flex flex-col gap-5">
<ListCategory
categories={[
{
title: "Tin VCCI",
href: `${PATHS.mediaInformation}/tin-vcci`,
},
{
title: "Tin kinh tế",
href: `${PATHS.mediaInformation}/tin-kinh-te`,
},
{
title: "Tin doanh nghiệp",
href: `${PATHS.mediaInformation}/tin-doanh-nghiep`,
},
{
title: "Chuyên đề",
href: `${PATHS.mediaInformation}/chuyen-de`,
},
{
title: "Thông tin chính sách và pháp luật",
href: `${PATHS.mediaInformation}/thong-tin-chinh-sach-va-phap-luat`,
},
{
title: "Ấn phẩm",
href: `${PATHS.mediaInformation}/an-pham`,
},
{
title: "Thư viện tài liệu",
href: `${PATHS.mediaInformation}/thu-vien-tai-lieu`,
},
]}
/>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Main content */}
<main className="lg:col-span-2 bg-background ">
<div className="pb-5 overflow-hidden">
{allData?.responseData.rows.map((news) => (
<NewsContent key={news.id} news={news} />
))}
<div className="w-full flex justify-center mt-4">
<Pagination
pageCount={Number(allData?.responseData.totalPages ?? 1)}
page={Number(allData?.responseData.currentPage ?? page)}
onChangePage={(p) => setPage(p)}
onGoToPreviousPage={() => setPage(Math.max(1, page - 1))}
onGoToNextPage={() => setPage(Math.min(Number(allData?.responseData.totalPages ?? 1), page + 1))}
/>
</div>
</div>
</main>
{/* Sidebar */}
<aside className="space-y-6">
<EventFilter />
<div className="bg-white border rounded-md overflow-hidden">
<div className="w-full h-56 relative bg-gray-100">
<Image
src="/banner.webp"
alt="Quảng cáo"
fill
className="object-cover"
/>
</div>
</div>
</aside>
</div>
</div>
</div>
);
}
"use client";
import React, { useState } from "react";
import ListCategory from "@app/dai-dien-gioi-chu/components/list-category";
import { PATHS } from '@constants/paths'
import EventFilter from "@app/dai-dien-gioi-chu/components/event-filter";
import NewsContent from "@app/dai-dien-gioi-chu/components/card-news";
import { Pagination} from "@components/base/pagination";
import Image from "next/image";
import { useGetNews } from "@api/endpoints/news";
import { GetNewsResponseType } from "@api/types/NewsPage.type";
export default function Page() {
const [submitSearch] = useState("");
const [page, setPage] = useState(1);
const pageSize = 5;
const { data: allData } = useGetNews<GetNewsResponseType>({
pageSize: String(pageSize),
currentPage: String(page),
filters: submitSearch ? `title @=${submitSearch}` : undefined,
});
return (
<div className="min-h-screen container mx-auto p-4">
<div className="w-full flex flex-col gap-5">
<ListCategory
categories={[
{
title: "Tin VCCI",
href: `${PATHS.mediaInformation}/tin-vcci`,
},
{
title: "Tin kinh tế",
href: `${PATHS.mediaInformation}/tin-kinh-te`,
},
{
title: "Tin doanh nghiệp",
href: `${PATHS.mediaInformation}/tin-doanh-nghiep`,
},
{
title: "Chuyên đề",
href: `${PATHS.mediaInformation}/chuyen-de`,
},
{
title: "Thông tin chính sách và pháp luật",
href: `${PATHS.mediaInformation}/thong-tin-chinh-sach-va-phap-luat`,
},
{
title: "Ấn phẩm",
href: `${PATHS.mediaInformation}/an-pham`,
},
{
title: "Thư viện tài liệu",
href: `${PATHS.mediaInformation}/thu-vien-tai-lieu`,
},
]}
/>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Main content */}
<main className="lg:col-span-2 bg-background ">
<div className="pb-5 overflow-hidden">
{allData?.responseData.rows.map((news) => (
<NewsContent key={news.id} news={news} />
))}
<div className="w-full flex justify-center mt-4">
<Pagination
pageCount={Number(allData?.responseData.totalPages ?? 1)}
page={Number(allData?.responseData.currentPage ?? page)}
onChangePage={(p) => setPage(p)}
onGoToPreviousPage={() => setPage(Math.max(1, page - 1))}
onGoToNextPage={() => setPage(Math.min(Number(allData?.responseData.totalPages ?? 1), page + 1))}
/>
</div>
</div>
</main>
{/* Sidebar */}
<aside className="space-y-6">
<EventFilter />
<div className="bg-white border rounded-md overflow-hidden">
<div className="w-full h-56 relative bg-gray-100">
<Image
src="/banner.webp"
alt="Quảng cáo"
fill
className="object-cover"
/>
</div>
</div>
</aside>
</div>
</div>
</div>
);
}
"use client";
import React, { useState } from "react";
import ListCategory from "@app/dai-dien-gioi-chu/components/list-category";
import { PATHS } from '@constants/paths'
import EventFilter from "@app/dai-dien-gioi-chu/components/event-filter";
import NewsContent from "@app/dai-dien-gioi-chu/components/card-news";
import { Pagination} from "@components/base/pagination";
import Image from "next/image";
import { useGetNews } from "@api/endpoints/news";
import { GetNewsResponseType } from "@api/types/NewsPage.type";
export default function Page() {
const [submitSearch] = useState("");
const [page, setPage] = useState(1);
const pageSize = 5;
const { data: allData } = useGetNews<GetNewsResponseType>({
pageSize: String(pageSize),
currentPage: String(page),
filters: submitSearch ? `title @=${submitSearch}` : undefined,
});
return (
<div className="min-h-screen container mx-auto p-4">
<div className="w-full flex flex-col gap-5">
<ListCategory
categories={[
{
title: "Tin VCCI",
href: `${PATHS.mediaInformation}/tin-vcci`,
},
{
title: "Tin kinh tế",
href: `${PATHS.mediaInformation}/tin-kinh-te`,
},
{
title: "Tin doanh nghiệp",
href: `${PATHS.mediaInformation}/tin-doanh-nghiep`,
},
{
title: "Chuyên đề",
href: `${PATHS.mediaInformation}/chuyen-de`,
},
{
title: "Thông tin chính sách và pháp luật",
href: `${PATHS.mediaInformation}/thong-tin-chinh-sach-va-phap-luat`,
},
{
title: "Ấn phẩm",
href: `${PATHS.mediaInformation}/an-pham`,
},
{
title: "Thư viện tài liệu",
href: `${PATHS.mediaInformation}/thu-vien-tai-lieu`,
},
]}
/>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Main content */}
<main className="lg:col-span-2 bg-background ">
<div className="pb-5 overflow-hidden">
{allData?.responseData.rows.map((news) => (
<NewsContent key={news.id} news={news} />
))}
<div className="w-full flex justify-center mt-4">
<Pagination
pageCount={Number(allData?.responseData.totalPages ?? 1)}
page={Number(allData?.responseData.currentPage ?? page)}
onChangePage={(p) => setPage(p)}
onGoToPreviousPage={() => setPage(Math.max(1, page - 1))}
onGoToNextPage={() => setPage(Math.min(Number(allData?.responseData.totalPages ?? 1), page + 1))}
/>
</div>
</div>
</main>
{/* Sidebar */}
<aside className="space-y-6">
<EventFilter />
<div className="bg-white border rounded-md overflow-hidden">
<div className="w-full h-56 relative bg-gray-100">
<Image
src="/banner.webp"
alt="Quảng cáo"
fill
className="object-cover"
/>
</div>
</div>
</aside>
</div>
</div>
</div>
);
}
"use client";
import React, { useState } from "react";
import ListCategory from "@app/dai-dien-gioi-chu/components/list-category";
import { PATHS } from '@constants/paths'
import EventFilter from "@app/dai-dien-gioi-chu/components/event-filter";
import NewsContent from "@app/dai-dien-gioi-chu/components/card-news";
import { Pagination} from "@components/base/pagination";
import Image from "next/image";
import { useGetNews } from "@api/endpoints/news";
import { GetNewsResponseType } from "@api/types/NewsPage.type";
export default function Page() {
const [submitSearch] = useState("");
const [page, setPage] = useState(1);
const pageSize = 5;
const { data: allData } = useGetNews<GetNewsResponseType>({
pageSize: String(pageSize),
currentPage: String(page),
filters: submitSearch ? `title @=${submitSearch}` : undefined,
});
return (
<div className="min-h-screen container mx-auto p-4">
<div className="w-full flex flex-col gap-5">
<ListCategory
categories={[
{
title: "Tin VCCI",
href: `${PATHS.mediaInformation}/tin-vcci`,
},
{
title: "Tin kinh tế",
href: `${PATHS.mediaInformation}/tin-kinh-te`,
},
{
title: "Tin doanh nghiệp",
href: `${PATHS.mediaInformation}/tin-doanh-nghiep`,
},
{
title: "Chuyên đề",
href: `${PATHS.mediaInformation}/chuyen-de`,
},
{
title: "Thông tin chính sách và pháp luật",
href: `${PATHS.mediaInformation}/thong-tin-chinh-sach-va-phap-luat`,
},
{
title: "Ấn phẩm",
href: `${PATHS.mediaInformation}/an-pham`,
},
{
title: "Thư viện tài liệu",
href: `${PATHS.mediaInformation}/thu-vien-tai-lieu`,
},
]}
/>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Main content */}
<main className="lg:col-span-2 bg-background ">
<div className="pb-5 overflow-hidden">
{allData?.responseData.rows.map((news) => (
<NewsContent key={news.id} news={news} />
))}
<div className="w-full flex justify-center mt-4">
<Pagination
pageCount={Number(allData?.responseData.totalPages ?? 1)}
page={Number(allData?.responseData.currentPage ?? page)}
onChangePage={(p) => setPage(p)}
onGoToPreviousPage={() => setPage(Math.max(1, page - 1))}
onGoToNextPage={() => setPage(Math.min(Number(allData?.responseData.totalPages ?? 1), page + 1))}
/>
</div>
</div>
</main>
{/* Sidebar */}
<aside className="space-y-6">
<EventFilter />
<div className="bg-white border rounded-md overflow-hidden">
<div className="w-full h-56 relative bg-gray-100">
<Image
src="/banner.webp"
alt="Quảng cáo"
fill
className="object-cover"
/>
</div>
</div>
</aside>
</div>
</div>
</div>
);
}
"use client";
import React, { useState } from "react";
import ListCategory from "@app/dai-dien-gioi-chu/components/list-category";
import { PATHS } from "@constants/paths";
import ListFilter from "@app/dai-dien-gioi-chu/components/list-filter";
import NewsContent from "@app/dai-dien-gioi-chu/components/card-news";
import { Pagination } from "@components/base/pagination";
import Image from "next/image";
import { useGetNews } from "@api/endpoints/news";
import { GetNewsResponseType } from "@api/types/NewsPage.type";
export default function Page() {
const [submitSearch] = useState("");
const [page, setPage] = useState(1);
const pageSize = 5;
const { data: allData } = useGetNews<GetNewsResponseType>({
pageSize: String(pageSize),
currentPage: String(page),
filters: submitSearch ? `title @=${submitSearch}` : undefined,
});
return (
<div className="min-h-screen container mx-auto p-4">
<div className="w-full flex flex-col gap-5">
<ListCategory
categories={[
{
title: "Hồ sơ thị trường",
href: `${PATHS.marketProfile}/`,
},
{
title: "Môi trường kinh doanh",
href: `${PATHS.tradePromotion}/moi-truong-kinh-doanh`,
},
{
title: "Cơ hội kinh doanh",
href: `${PATHS.tradePromotion}/co-hoi-kinh-doanh`,
},
{
title: "Hỗ trợ kinh doanh",
href: `${PATHS.tradePromotion}/ho-tro-kinh-doanh`,
},
]}
/>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Main content */}
<main className="lg:col-span-2 bg-background ">
<div className="pb-5 overflow-hidden">
{allData?.responseData.rows.map((news) => (
<NewsContent key={news.id} news={news} />
))}
<div className="w-full flex justify-center mt-4">
<Pagination
pageCount={Number(allData?.responseData.totalPages ?? 1)}
page={Number(allData?.responseData.currentPage ?? page)}
onChangePage={(p) => setPage(p)}
onGoToPreviousPage={() => setPage(Math.max(1, page - 1))}
onGoToNextPage={() =>
setPage(
Math.min(
Number(allData?.responseData.totalPages ?? 1),
page + 1
)
)
}
/>
</div>
</div>
</main>
{/* Sidebar */}
<aside className="space-y-6">
<ListFilter />
<div className="bg-white border rounded-md overflow-hidden">
<div className="w-full h-56 relative bg-gray-100">
<Image
src="/banner.webp"
alt="Quảng cáo"
fill
className="object-cover"
/>
</div>
</div>
</aside>
</div>
</div>
</div>
);
}
"use client";
import React, { useState } from "react";
import ListCategory from "@app/dai-dien-gioi-chu/components/list-category";
import { PATHS } from "@constants/paths";
import ListFilter from "@app/dai-dien-gioi-chu/components/list-filter";
import NewsContent from "@app/dai-dien-gioi-chu/components/card-news";
import { Pagination } from "@components/base/pagination";
import Image from "next/image";
import { useGetNews } from "@api/endpoints/news";
import { GetNewsResponseType } from "@api/types/NewsPage.type";
export default function Page() {
const [submitSearch] = useState("");
const [page, setPage] = useState(1);
const pageSize = 5;
const { data: allData } = useGetNews<GetNewsResponseType>({
pageSize: String(pageSize),
currentPage: String(page),
filters: submitSearch ? `title @=${submitSearch}` : undefined,
});
return (
<div className="min-h-screen container mx-auto p-4">
<div className="w-full flex flex-col gap-5">
<ListCategory
categories={[
{
title: "Hồ sơ thị trường",
href: `${PATHS.marketProfile}/`,
},
{
title: "Môi trường kinh doanh",
href: `${PATHS.tradePromotion}/moi-truong-kinh-doanh`,
},
{
title: "Cơ hội kinh doanh",
href: `${PATHS.tradePromotion}/co-hoi-kinh-doanh`,
},
{
title: "Hỗ trợ kinh doanh",
href: `${PATHS.tradePromotion}/ho-tro-kinh-doanh`,
},
]}
/>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Main content */}
<main className="lg:col-span-2 bg-background ">
<div className="pb-5 overflow-hidden">
{allData?.responseData.rows.map((news) => (
<NewsContent key={news.id} news={news} />
))}
<div className="w-full flex justify-center mt-4">
<Pagination
pageCount={Number(allData?.responseData.totalPages ?? 1)}
page={Number(allData?.responseData.currentPage ?? page)}
onChangePage={(p) => setPage(p)}
onGoToPreviousPage={() => setPage(Math.max(1, page - 1))}
onGoToNextPage={() =>
setPage(
Math.min(
Number(allData?.responseData.totalPages ?? 1),
page + 1
)
)
}
/>
</div>
</div>
</main>
{/* Sidebar */}
<aside className="space-y-6">
<ListFilter />
<div className="bg-white border rounded-md overflow-hidden">
<div className="w-full h-56 relative bg-gray-100">
<Image
src="/banner.webp"
alt="Quảng cáo"
fill
className="object-cover"
/>
</div>
</div>
</aside>
</div>
</div>
</div>
);
}
"use client";
import React, { useState } from "react";
import ListCategory from "@app/dai-dien-gioi-chu/components/list-category";
import { PATHS } from "@constants/paths";
import ListFilter from "@app/dai-dien-gioi-chu/components/list-filter";
import NewsContent from "@app/dai-dien-gioi-chu/components/card-news";
import { Pagination } from "@components/base/pagination";
import Image from "next/image";
import { useGetNews } from "@api/endpoints/news";
import { GetNewsResponseType } from "@api/types/NewsPage.type";
export default function Page() {
const [submitSearch] = useState("");
const [page, setPage] = useState(1);
const pageSize = 5;
const { data: allData } = useGetNews<GetNewsResponseType>({
pageSize: String(pageSize),
currentPage: String(page),
filters: submitSearch ? `title @=${submitSearch}` : undefined,
});
return (
<div className="min-h-screen container mx-auto p-4">
<div className="w-full flex flex-col gap-5">
<ListCategory
categories={[
{
title: "Hồ sơ thị trường",
href: `${PATHS.marketProfile}/`,
},
{
title: "Môi trường kinh doanh",
href: `${PATHS.tradePromotion}/moi-truong-kinh-doanh`,
},
{
title: "Cơ hội kinh doanh",
href: `${PATHS.tradePromotion}/co-hoi-kinh-doanh`,
},
{
title: "Hỗ trợ kinh doanh",
href: `${PATHS.tradePromotion}/ho-tro-kinh-doanh`,
},
]}
/>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Main content */}
<main className="lg:col-span-2 bg-background ">
<div className="pb-5 overflow-hidden">
{allData?.responseData.rows.map((news) => (
<NewsContent key={news.id} news={news} />
))}
<div className="w-full flex justify-center mt-4">
<Pagination
pageCount={Number(allData?.responseData.totalPages ?? 1)}
page={Number(allData?.responseData.currentPage ?? page)}
onChangePage={(p) => setPage(p)}
onGoToPreviousPage={() => setPage(Math.max(1, page - 1))}
onGoToNextPage={() =>
setPage(
Math.min(
Number(allData?.responseData.totalPages ?? 1),
page + 1
)
)
}
/>
</div>
</div>
</main>
{/* Sidebar */}
<aside className="space-y-6">
<ListFilter />
<div className="bg-white border rounded-md overflow-hidden">
<div className="w-full h-56 relative bg-gray-100">
<Image
src="/banner.webp"
alt="Quảng cáo"
fill
className="object-cover"
/>
</div>
</div>
</aside>
</div>
</div>
</div>
);
}
"use client";
import React, { useState } from "react";
import ListCategory from "@app/dai-dien-gioi-chu/components/list-category";
import { PATHS } from "@constants/paths";
import ListFilter from "@app/dai-dien-gioi-chu/components/list-filter";
import NewsContent from "@app/dai-dien-gioi-chu/components/card-news";
import { Pagination } from "@components/base/pagination";
import Image from "next/image";
import { useGetNews } from "@api/endpoints/news";
import { GetNewsResponseType } from "@api/types/NewsPage.type";
export default function Page() {
const [submitSearch] = useState("");
const [page, setPage] = useState(1);
const pageSize = 5;
const { data: allData } = useGetNews<GetNewsResponseType>({
pageSize: String(pageSize),
currentPage: String(page),
filters: submitSearch ? `title @=${submitSearch}` : undefined,
});
return (
<div className="min-h-screen container mx-auto p-4">
<div className="w-full flex flex-col gap-5">
<ListCategory
categories={[
{
title: "Hồ sơ thị trường",
href: `${PATHS.marketProfile}/`,
},
{
title: "Môi trường kinh doanh",
href: `${PATHS.tradePromotion}/moi-truong-kinh-doanh`,
},
{
title: "Cơ hội kinh doanh",
href: `${PATHS.tradePromotion}/co-hoi-kinh-doanh`,
},
{
title: "Hỗ trợ kinh doanh",
href: `${PATHS.tradePromotion}/ho-tro-kinh-doanh`,
},
]}
/>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Main content */}
<main className="lg:col-span-2 bg-background ">
<div className="pb-5 overflow-hidden">
{allData?.responseData.rows.map((news) => (
<NewsContent key={news.id} news={news} />
))}
<div className="w-full flex justify-center mt-4">
<Pagination
pageCount={Number(allData?.responseData.totalPages ?? 1)}
page={Number(allData?.responseData.currentPage ?? page)}
onChangePage={(p) => setPage(p)}
onGoToPreviousPage={() => setPage(Math.max(1, page - 1))}
onGoToNextPage={() =>
setPage(
Math.min(
Number(allData?.responseData.totalPages ?? 1),
page + 1
)
)
}
/>
</div>
</div>
</main>
{/* Sidebar */}
<aside className="space-y-6">
<ListFilter />
<div className="bg-white border rounded-md overflow-hidden">
<div className="w-full h-56 relative bg-gray-100">
<Image
src="/banner.webp"
alt="Quảng cáo"
fill
className="object-cover"
/>
</div>
</div>
</aside>
</div>
</div>
</div>
);
}
...@@ -6,16 +6,16 @@ import links from "@links/index"; ...@@ -6,16 +6,16 @@ import links from "@links/index";
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'VCCI', title: 'Chức năng Đại diện Người sử dụng lao động - Liên đoàn Thương mại và Công nghiệp Việt Nam, CN TP.HCM',
description: 'Liên đoàn Thương mại và Công nghiệp Việt Nam - Chi nhánh TP.HCM', description: 'Chức năng Đại diện Người sử dụng lao động (NSDLĐ):',
metadataBase: new URL(links.siteURL), metadataBase: new URL(links.siteURL),
alternates: { canonical: links.siteURL }, alternates: { canonical: links.siteURL },
openGraph: { openGraph: {
title: 'VCCI - TP.HCM', title: 'Liên đoàn Thương mại và Công nghiệp Việt Nam, CN TP.HCM',
description: 'Tin tức và sự kiện từ Liên đoàn Thương mại và Công nghiệp Việt Nam - Chi nhánh TP.HCM', description: 'Phòng Thương mại và Công nghiệp Việt Nam (VCCI) là tổ chức quốc gia tập hợp và đại diện cho cộng đồng doanh nghiệp, doanh nhân, người sử dụng lao động...',
url: links.siteURL, url: links.siteURL,
siteName: 'VCCI HCM', siteName: 'Liên đoàn Thương mại và Công nghiệp Việt Nam, CN TP.HCM',
images: [ images: [
{ {
url: `${links.siteURL}/thumbnail.png`, url: `${links.siteURL}/thumbnail.png`,
...@@ -29,7 +29,7 @@ export const metadata: Metadata = { ...@@ -29,7 +29,7 @@ export const metadata: Metadata = {
}, },
twitter: { card: 'summary_large_image', title: 'VCCI HCM', description: 'Tin tức và sự kiện từ VCCI HCM', creator: '@vcci_hcm' }, twitter: { card: 'summary_large_image', title: 'VCCI HCM', description: 'Tin tức và sự kiện từ VCCI HCM', creator: '@vcci_hcm' },
robots: { index: true, follow: true, googleBot: { index: true, follow: true } } robots: { index: true, follow: true, googleBot: { index: true, follow: true } }
}; };
export default function RootLayout({ export default function RootLayout({
children, children,
......
...@@ -3,8 +3,10 @@ export const PATHS = { ...@@ -3,8 +3,10 @@ export const PATHS = {
general: '/gioi-thieu', general: '/gioi-thieu',
ownerRepresentatives: '/dai-dien-gioi-chu', ownerRepresentatives: '/dai-dien-gioi-chu',
serviceDetail: '/dich-vu/[id]', event:'/hoat-dong',
recruitment: '/tuyen-dung', marketProfile: '/ho-so-thi-truong',
tradePromotion: '/xuc-tien-thuong-mai',
mediaInformation:'/thong-tin-truyen-thong',
recruitmentDetail: '/tuyen-dung/[id]', recruitmentDetail: '/tuyen-dung/[id]',
newsPage: '/tin-tuc', newsPage: '/tin-tuc',
newsDetail: '/tin-tuc/[id]', newsDetail: '/tin-tuc/[id]',
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
@apply mr-auto ml-auto px-4; @apply mr-auto ml-auto px-4;
@media (width >= 80rem) { @media (width >= 80rem) {
@apply px-40; @apply px-15;
} }
} }
......
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