Skip to content

V
VCCI-News
Commit e0c56a2e authored by Phạm Quang Bảo's avatar Phạm Quang Bảo
Browse files
Options

update/responsive home page and members page

parent 5dc31199
Show whitespace changes
Inline Side-by-side
Showing with 359 additions and 329 deletions
src/app/(main)/(home)/components/news-content/NewsContent.tsx → src/app/(main)/(home)/components/card-news/index.tsx
View file @ e0c56a2e
...@@ -3,16 +3,16 @@ import BASE_URL from '@/links' ...@@ -3,16 +3,16 @@ import BASE_URL from '@/links'
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import AppEditorContent from '@/components/shared/editor-content'; import AppEditorContent from '@/components/shared/editor-content';
function NewsContent({ news }: { news: NewsAdminItem }) { function CardNews({ news }: { news: NewsAdminItem }) {
return ( return (
<a <a
href={`${news.id}`} href={`${news.id}`}
className='flex flex-col sm:flex-row gap-3 mb-3 border border-gray-200 bg-white rounded-md p-3' className='flex flex-row gap-3 mb-3 border border-gray-200 bg-white rounded-md p-3'
> >
<img <img
src={`${BASE_URL.imageEndpoint}${news.thumbnail}`} src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
alt={news.title} alt={news.title}
className='w-full sm:w-[120px] h-20 object-cover rounded-sm' className='w-[120px] h-20 object-cover rounded-sm'
/> />
<div className='flex-1'> <div className='flex-1'>
<p className='text-[#0056b3] font-bold text-sm line-clamp-2'> <p className='text-[#0056b3] font-bold text-sm line-clamp-2'>
...@@ -27,4 +27,4 @@ function NewsContent({ news }: { news: NewsAdminItem }) { ...@@ -27,4 +27,4 @@ function NewsContent({ news }: { news: NewsAdminItem }) {
); );
} }
export default NewsContent; export default CardNews;
\ No newline at end of file \ No newline at end of file
src/app/(main)/(home)/components/news-content/index.tsx deleted 100644 → 0
View file @ 5dc31199
export { default } from './NewsContent';
\ No newline at end of file
src/app/(main)/(home)/page.tsx
View file @ e0c56a2e
...@@ -9,7 +9,7 @@ import 'swiper/css' ...@@ -9,7 +9,7 @@ import 'swiper/css'
import 'swiper/css/navigation' import 'swiper/css/navigation'
import 'swiper/css/pagination' import 'swiper/css/pagination'
import BASE_URL from '@/links/index' import BASE_URL from '@/links/index'
import NewsContent from './components/news-content/NewsContent' import NewsContent from './components/card-news'
import { Spinner } from '@/components/ui' import { Spinner } from '@/components/ui'
import { useGetCategory } from '@/api/endpoints/category' import { useGetCategory } from '@/api/endpoints/category'
import { useGetNews } from '@/api/endpoints/news' import { useGetNews } from '@/api/endpoints/news'
...@@ -18,159 +18,138 @@ import { GetNewsAdminResponseType } from '@/api/types/news' ...@@ -18,159 +18,138 @@ import { GetNewsAdminResponseType } from '@/api/types/news'
import EventCalendar from './components/event-calendar' import EventCalendar from './components/event-calendar'
const Home = () => { const Home = () => {
// states
const [tab, setTab] = useState('all') const [tab, setTab] = useState('all')
const [search, setSearch] = useState('') const [search, setSearch] = useState('')
const [submitSearch, setSubmitSearch] = useState('') const [submitSearch, setSubmitSearch] = useState('')
const [currentIndex, setCurrentIndex] = useState(0) const [currentIndex, setCurrentIndex] = useState(0)
// responsive slidesPerView used to compute pagination pages
const [slidesPerView, setSlidesPerView] = useState<number>(3) const [slidesPerView, setSlidesPerView] = useState<number>(3)
// Refs
const swiperRef = useRef<SwiperType | null>(null) const swiperRef = useRef<SwiperType | null>(null)
// server const { data: categoryData } = useGetCategory<GetCategoryAdminResponseType>()
const { data: categoryData } = useGetCategory<GetCategoryAdminResponseType>();
const { data: allData, isLoading } = useGetNews<GetNewsAdminResponseType>({ const { data: allData, isLoading } = useGetNews<GetNewsAdminResponseType>({
pageSize: '999', pageSize: '999',
filters: submitSearch ? `title @=${submitSearch}` : undefined, filters: submitSearch ? `title @=${submitSearch}` : undefined,
}) })
//tab filter const rows = allData?.responseData?.rows ?? []
const rows = allData?.responseData?.rows ?? []; const filteredRows = tab === 'all' ? rows : rows.filter((n) => n.category === tab)
const filteredRows = tab === 'all'
? rows
: rows.filter(news => news.category === tab);
// update slidesPerView on resize to match the Swiper breakpoints
useEffect(() => { useEffect(() => {
const getSlides = (w: number) => { const getSlides = (w: number) => {
if (w >= 1024) return 3 if (w >= 1024) return 3
if (w >= 640) return 2 if (w >= 640) return 2
return 1 return 1
} }
const update = () => setSlidesPerView(getSlides(window.innerWidth)) const update = () => setSlidesPerView(getSlides(window.innerWidth))
// run once on mount
update() update()
window.addEventListener('resize', update) window.addEventListener('resize', update)
return () => window.removeEventListener('resize', update) return () => window.removeEventListener('resize', update)
}, []) }, [])
//template if (isLoading)
return ( return (
isLoading ? ( <div className="w-full h-[80vh] flex justify-center items-center">
<div className='w-full h-[80vh] flex justify-center items-center'>
<Spinner /> <Spinner />
</div> </div>
) : ( )
return (
<> <>
{/* Banner */} {/* Banner */}
<Swiper <Swiper
modules={[Autoplay]} modules={[Autoplay]}
// navigation
autoplay={{ delay: 4000, disableOnInteraction: false }} autoplay={{ delay: 4000, disableOnInteraction: false }}
loop loop
slidesPerView={1} slidesPerView={1}
onSwiper={(swiper) => { onSwiper={(s) => (swiperRef.current = s)}
swiperRef.current = swiper onSlideChange={(s) =>
}} setCurrentIndex(typeof s.realIndex === 'number' ? s.realIndex : s.activeIndex)
onSlideChange={(swiper) => { }
setCurrentIndex(typeof swiper.realIndex === 'number' ? swiper.realIndex : swiper.activeIndex)
}}
> >
<SwiperSlide> <SwiperSlide>
<img <img
src="https://vcci-hcm.org.vn/wp-content/uploads/2025/10/1.1.-Hero-Banner-CEO-2025-Bi-Sai-Nam-2025-Nhe-2560x720-Px.jpg" src="https://vcci-hcm.org.vn/wp-content/uploads/2025/10/1.1.-Hero-Banner-CEO-2025-Bi-Sai-Nam-2025-Nhe-2560x720-Px.jpg"
alt="Banner" alt="Banner"
className='w-full' className="w-full h-[200px] sm:h-[300px] md:h-[400px] lg:h-[500px] object-cover"
/> />
</SwiperSlide> </SwiperSlide>
<SwiperSlide> <SwiperSlide>
<img <img
src="https://vcci-hcm.org.vn/wp-content/uploads/2022/07/Landscape-HCM_3-01.png" src="https://vcci-hcm.org.vn/wp-content/uploads/2022/07/Landscape-HCM_3-01.png"
alt="Banner" alt="Banner"
className='w-full' className="w-full h-[200px] sm:h-[300px] md:h-[400px] lg:h-[500px] object-cover"
/> />
</SwiperSlide> </SwiperSlide>
</Swiper> </Swiper>
<div className='container'> <div className="container mx-auto px-3 sm:px-6 lg:px-10 space-y-12">
{/* slider */} {/* Featured News */}
<div className='pb-10'> <section>
<div className='flex py-10 justify-center items-center w-full text-center'> <div className="flex flex-col items-center py-8 text-center">
<hr className='border-blue-900 w-full' /> <h1 className="text-app-blue text-[20px] sm:text-[24px] md:text-[28px] uppercase font-bold text-blue-900">
<h1 className='text-app-blue text-[28px] leading-normal uppercase font-bold w-full text-blue-900'>
Tin Nổi Bật Tin Nổi Bật
</h1> </h1>
<hr className='border-blue-900 w-full' /> <div className="w-16 h-[3px] bg-blue-900 mt-2 rounded-full"></div>
</div> </div>
<div>
<Swiper <Swiper
modules={[Autoplay]} modules={[Autoplay]}
// navigation
autoplay={{ delay: 4000, disableOnInteraction: false }} autoplay={{ delay: 4000, disableOnInteraction: false }}
loop loop
spaceBetween={30}
breakpoints={{ breakpoints={{
0: { slidesPerView: 1 }, 0: { slidesPerView: 1.1, spaceBetween: 10 },
640: { slidesPerView: 2 }, 640: { slidesPerView: 2, spaceBetween: 16 },
1024: { slidesPerView: 3 } 1024: { slidesPerView: 3, spaceBetween: 24 },
}}
onSwiper={(swiper) => {
swiperRef.current = swiper
}}
onSlideChange={(swiper) => {
setCurrentIndex(typeof swiper.realIndex === 'number' ? swiper.realIndex : swiper.activeIndex)
}} }}
className="pb-5"
> >
{allData?.responseData?.rows.map((news) => ( {rows.map((news) => (
<SwiperSlide key={news.id}> <SwiperSlide key={news.id}>
<a href={`/tin-tuc/${news.id}`} className='block bg-white shadow-md overflow-hidden relative'> <a
href={`/tin-tuc/${news.id}`}
className="relative block bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"
>
<img <img
src={`${BASE_URL.imageEndpoint}${news.thumbnail}`} src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
alt={news.title} alt={news.title}
className='w-full h-48 sm:h-56 md:h-64 object-cover' className="w-full h-48 sm:h-56 md:h-64 object-cover"
/> />
<div className="absolute bottom-0 left-0 right-0 h-20 bg-linear-to-t from-black/90 to-transparent text-white px-4 font-semibold text-base flex items-center justify-center text-center md:h-24"> <div className="absolute bottom-0 left-0 right-0 h-20 md:h-24 bg-linear-to-t from-black/80 to-transparent flex items-center justify-center p-3">
<div <p className="text-white text-center font-semibold line-clamp-2 text-sm sm:text-base leading-snug">
className="w-full overflow-hidden"
style={{
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
}}
>
{news.title} {news.title}
</div> </p>
</div> </div>
</a> </a>
</SwiperSlide> </SwiperSlide>
))} ))}
</Swiper> </Swiper>
</div> </section>
</div>
{/* content 1 */} {/* Tin tức + Liên kết nhanh */}
<div className='flex flex-row gap-[30px] pb-10'> <section className="flex flex-col lg:flex-row gap-8">
<div className='w-[68.5%]'> {/* Left */}
<div className='pb-5'> <div className="flex-1">
<div className="flex flex-row justify-between items-center"> <div className="pb-4 flex justify-between items-center">
<a href="#" className="text-[20px] font-bold uppercase text-blue-900"> <h2 className="text-[18px] sm:text-[20px] font-bold uppercase text-blue-900">
Tin tức Tin tức
</h2>
<a href="#" className="text-blue-900 hover:underline text-sm sm:text-base">
{'>>'}
</a> </a>
<a href="#" className="text-blue-900">{'>>'}</a>
</div> </div>
<hr className="border-blue-900" /> <hr className="border-blue-900 mb-4" />
</div>
<div className='flex flex-row gap-[30px]'> <div className="flex flex-col md:flex-row gap-4 md:gap-6">
<div className="w-full bg-gray-500 flex items-center justify-center rounded-md"> <div className="w-full md:w-1/2 bg-gray-500 flex items-center justify-center rounded-lg p-4 min-h-[180px] sm:min-h-[220px]">
<p className="text-white">khung tin tức vip</p> <p className="text-white text-center">Khung tin tức VIP</p>
</div> </div>
<div className="w-full overflow-hidden">
<div className="flex mb-3 flex-wrap justify-between"> <div className="w-full md:w-1/2">
<div className="flex flex-wrap gap-2 sm:gap-3 mb-3">
<button <button
className={`w-22 cursor-pointer hover:bg-border-blue-700 hover:bg-blue-50 px-4 py-1 rounded-md border ${'all' === tab ? 'border-blue-700 bg-blue-50' : 'border-gray-300 bg-white' 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'
}`} }`}
onClick={() => setTab('all')} onClick={() => setTab('all')}
> >
...@@ -179,7 +158,9 @@ const Home = () => { ...@@ -179,7 +158,9 @@ const Home = () => {
{categoryData?.responseData.rows.slice(0, 3).map((category) => ( {categoryData?.responseData.rows.slice(0, 3).map((category) => (
<button <button
key={category.id} key={category.id}
className={`w-22 cursor-pointer hover:bg-border-blue-700 hover:bg-blue-50 px-4 py-1 rounded-md border ${category.name === tab ? 'border-blue-700 bg-blue-50' : 'border-gray-300 bg-white' 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)} onClick={() => setTab(category.name)}
> >
...@@ -187,112 +168,110 @@ const Home = () => { ...@@ -187,112 +168,110 @@ const Home = () => {
</button> </button>
))} ))}
</div> </div>
{allData?.responseData.rows.slice(0, 5).map((news) => (
{filteredRows.slice(0, 5).map((news) => (
<NewsContent key={news.id} news={news} /> <NewsContent key={news.id} news={news} />
))} ))}
</div> </div>
</div> </div>
</div> </div>
<div className='w-[33%]'> {/* Right */}
<div className='pb-5'> <aside className="w-full lg:w-1/3">
<div className="flex flex-row justify-between items-center"> <div className="pb-4 flex justify-between items-center">
<a href="#" className="text-[20px] font-bold uppercase text-blue-900"> <h2 className="text-[18px] sm:text-[20px] font-bold uppercase text-blue-900">
Liên kết nhanh Liên kết nhanh
</h2>
<a href="#" className="text-blue-900 hover:underline text-sm sm:text-base">
{'>>'}
</a> </a>
<a href="#" className="text-blue-900">{'>>'}</a>
</div>
<hr className="border-blue-900" />
</div> </div>
<div> <hr className="border-blue-900 mb-4" />
<p>🔗 Cẩm nang Hướng dẫn đầu tư kinh doanh tại Việt Nam</p> <div className="space-y-2 text-blue-900 text-sm md:text-base">
<p>🔗 Cẩm nang hướng dẫn đầu tư kinh doanh tại Việt Nam</p>
<p>🔗 Doanh nghiệp kiến nghị về chính sách và pháp luật</p> <p>🔗 Doanh nghiệp kiến nghị về chính sách và pháp luật</p>
</div> </div>
</div> </aside>
</div> </section>
{/* content 2 */} {/* Sự kiện */}
<div className='flex flex-row gap-[30px] pb-10'> <section className="flex flex-col lg:flex-row gap-8">
<div className='w-[68.5%]'> <div className="flex-1">
<div className='pb-5'> <div className="pb-4 flex justify-between items-center">
<div className="flex flex-row justify-between items-center"> <h2 className="text-[18px] sm:text-[20px] font-bold uppercase text-blue-900">
<a href="#" className="text-[20px] font-bold uppercase text-blue-900">
Sự kiện sắp diễn ra Sự kiện sắp diễn ra
</h2>
<a href="#" className="text-blue-900 hover:underline text-sm sm:text-base">
{'>>'}
</a> </a>
<a href="#" className="text-blue-900">{'>>'}</a>
</div> </div>
<hr className="border-blue-900" /> <hr className="border-blue-900 mb-4" />
</div>
<div className='flex flex-row gap-[30px]'> <div className="flex flex-col md:flex-row gap-4 md:gap-6">
<div className="w-full bg-gray-500 flex items-center justify-center rounded-md"> <div className="w-full md:w-1/2 bg-gray-500 flex items-center justify-center rounded-lg p-4 min-h-[180px] sm:min-h-[220px]">
<p className="text-white">khung tin tức vip</p> <p className="text-white">Khung tin tức VIP</p>
</div> </div>
<div className="w-full overflow-hidden"> <div className="w-full md:w-1/2">
{allData?.responseData.rows.slice(0, 5).map((news) => ( {rows.slice(0, 5).map((news) => (
<NewsContent key={news.id} news={news} /> <NewsContent key={news.id} news={news} />
))} ))}
</div> </div>
</div> </div>
</div> </div>
<div className='w-[33%]'> <aside className="w-full lg:w-1/3">
<div className='pb-5'> <div className="pb-4 flex justify-between items-center">
<div className="flex flex-row justify-between items-center"> <h2 className="text-[18px] sm:text-[20px] font-bold uppercase text-blue-900">
<a href="#" className="text-[20px] font-bold uppercase text-blue-900">
Lịch sự kiện Lịch sự kiện
</h2>
<a href="#" className="text-blue-900 hover:underline text-sm sm:text-base">
{'>>'}
</a> </a>
<a href="#" className="text-blue-900">{'>>'}</a>
</div>
<hr className="border-blue-900" />
</div> </div>
<hr className="border-blue-900 mb-4" />
<EventCalendar /> <EventCalendar />
</div> </aside>
</div> </section>
{/* content 3 */} {/* Cơ hội kinh doanh + Chính sách */}
< div className='flex flex-row gap-[30px] pb-10' > <section className="flex flex-col md:flex-row gap-6 lg:gap-10 border-t border-gray-200 pt-8 pb-16">
{/* Cơ hội kinh doanh */} <div className="flex-1">
< div className='flex flex-col' > <div className="flex justify-between items-center">
<div> <h2 className="text-[18px] sm:text-[20px] font-bold uppercase text-blue-900">
<div className='flex justify-between items-center w-full'>
<a href='#' className='text-[20px] font-bold uppercase text-blue-900'>
Cơ hội kinh doanh Cơ hội kinh doanh
</h2>
<a href="#" className="text-blue-900 hover:underline text-sm sm:text-base">
{'>>'}
</a> </a>
<a href='#' className='text-blue-900'>{'>>'}</a>
</div>
<hr className=' border-blue-900' />
</div> </div>
<hr className="border-blue-900 mb-4" />
<div className='pt-5'> <div className="pt-2 space-y-3">
{allData?.responseData.rows.slice(0, 5).map((news) => ( {rows.slice(0, 5).map((news) => (
<NewsContent key={news.id} news={news} /> <NewsContent key={news.id} news={news} />
))} ))}
</div> </div>
</div > </div>
{/* Chính sách & pháp luật */} <div className="flex-1">
< div className='flex flex-col' > <div className="flex justify-between items-center">
<div> <h2 className="text-[18px] sm:text-[20px] font-bold uppercase text-blue-900">
<div className='flex justify-between items-center w-full'>
<a href='#' className='text-[20px] font-bold uppercase text-blue-900'>
Chính sách & pháp luật Chính sách & pháp luật
</h2>
<a href="#" className="text-blue-900 hover:underline text-sm sm:text-base">
{'>>'}
</a> </a>
<a href='#' className='text-blue-900'>{'>>'}</a>
</div>
<hr className=' border-blue-900' />
</div> </div>
<hr className="border-blue-900 mb-4" />
<div className='pt-5'> <div className="pt-2 space-y-3">
{allData?.responseData.rows.slice(0, 5).map((news) => ( {rows.slice(0, 5).map((news) => (
<NewsContent key={news.id} news={news} /> <NewsContent key={news.id} news={news} />
))} ))}
</div> </div>
</div > </div>
</div > </section>
</div > </div>
</> </>
) )
)
} }
export default Home export default Home
src/app/(main)/hoi-vien/components/card-news/index.tsx
View file @ e0c56a2e
import { NewsAdminItem } from '@/api/types/news'
import { NewsItem } from '@app/dai-dien-gioi-chu/lib/types/NewsPage.type'; import BASE_URL from '@/links'
import Links from '@links/index'
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import AppEditorContent from '@/components/shared/editor-content';
import parse from 'html-react-parser' import parse from 'html-react-parser'
function NewsContent({ news }: { news: NewsItem }) {
function CardNews({ news }: { news: NewsAdminItem }) {
return ( return (
<a <a
href={`/tin-tuc/${news.id}`} href={`${news.id}`}
className="flex flex-col hover:no-underline sm:flex-row gap-2 mb-6 bg-white rounded-lg shadow-sm p-4 border items-start min-w-0" className="flex flex-col sm:flex-row gap-3 mb-3 border border-gray-200 bg-white rounded-md p-3 hover:shadow-md transition"
> >
<img <img
src={`${Links.imageEndpoint}${news.thumbnail}`} src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
alt={news.title} alt={news.title}
className="w-full sm:w-56 md:w-64 h-40 md:h-36 object-cover shrink-0" className="w-full sm:w-40 h-40 sm:h-28 object-cover rounded-md"
/> />
<div className="flex-1 min-w-0 pl-0 sm:pl-4"> <div className="flex-1">
<p className="text-primary font-semibold text-base md:text-lg hover:underline line-clamp-2 wrap-break-word hover:no-underline"> <p className="text-[#0056b3] font-bold text-sm sm:text-base line-clamp-2">
{news.title} {news.title}
</p> </p>
<p className="text-gray-500 text-xs sm:text-sm my-1">
<div className="text-sm my-2 text-[#00AED5]">{dayjs(news.release_at).format('DD/MM/YYYY')}</div> {dayjs(news.release_at).format('DD/MM/YYYY')}
</p>
<div className="text-sm text-[#777] line-clamp-3"> <div className="text-xs sm:text-sm text-[#777] line-clamp-3 prose tiptap">
<div className="text-sm prose tiptap">{parse(news.description)}</div> {parse(news.description)}
</div> </div>
</div> </div>
</a> </a>
) );
} }
export default NewsContent; export default CardNews;
\ No newline at end of file \ No newline at end of file
src/app/(main)/hoi-vien/components/list-category/index.tsx
View file @ e0c56a2e
"use client" "use client"
import Link from "next/link" import Link from "next/link"
import { usePathname } from "next/navigation" import { usePathname, useRouter } from "next/navigation"
import React from "react" import React from "react"
type Category = { type Category = {
...@@ -18,17 +18,23 @@ const CATEGORIES: Category[] = [ ...@@ -18,17 +18,23 @@ const CATEGORIES: Category[] = [
const ListCategory: React.FC = () => { const ListCategory: React.FC = () => {
const pathname = usePathname() || "" const pathname = usePathname() || ""
const router = useRouter()
const isActive = (href: string) => { const isActive = (href: string) => {
if (href === "/hoi-vien") return pathname === "/hoi-vien" if (href === "/hoi-vien") return pathname === "/hoi-vien"
return pathname === href return pathname === href
} }
const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
router.push(e.target.value)
}
return ( return (
<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="max-w-7xl mx-auto"> <div className="max-w-7xl mx-auto">
<nav aria-label="Danh mục" className="py-3"> <nav aria-label="Danh mục" className="py-3">
<ul className="flex items-center"> {/* --- Desktop view --- */}
<ul className="hidden sm:flex items-center">
{CATEGORIES.map((c) => { {CATEGORIES.map((c) => {
const active = isActive(c.href) const active = isActive(c.href)
return ( return (
...@@ -38,8 +44,8 @@ const ListCategory: React.FC = () => { ...@@ -38,8 +44,8 @@ const ListCategory: React.FC = () => {
className={ className={
"text-sm font-bold py-3.5 px-5 transition-colors duration-150 " + "text-sm font-bold py-3.5 px-5 transition-colors duration-150 " +
(active (active
? "text-yellow-500 font-semibold decoration-yellow-300 " ? "text-yellow-500 font-semibold decoration-yellow-300"
: "text-gray-600 hover:text-yellow-500 ") : "text-gray-600 hover:text-yellow-500")
} }
> >
{c.title} {c.title}
...@@ -48,6 +54,21 @@ const ListCategory: React.FC = () => { ...@@ -48,6 +54,21 @@ const ListCategory: React.FC = () => {
) )
})} })}
</ul> </ul>
{/* --- Mobile view (Dropdown) --- */}
<div className="sm:hidden">
<select
value={pathname}
onChange={handleChange}
className="w-full border border-gray-300 rounded-md px-3 py-2 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-400"
>
{CATEGORIES.map((c) => (
<option key={c.href} value={c.href}>
{c.title}
</option>
))}
</select>
</div>
</nav> </nav>
</div> </div>
</div> </div>
......
src/app/(main)/hoi-vien/dang-ky-hoi-vien/page.tsx
View file @ e0c56a2e
'use client' 'use client'
import React from "react"; import React from "react";
import ListCategory from "./../components/list-category"; import ListCategory from "./../components/list-category";
const Page = () => { const Page = () => {
return ( return (
<div className="min-h-screen container mx-auto pb-4"> <div className="min-h-screen container mx-auto px-4 sm:px-6 lg:px-8 pb-6">
<div className="w-full flex flex-col gap-5"> <div className="flex flex-col gap-5">
<ListCategory /> <ListCategory />
<div className="gap-6"> <main className="bg-white border rounded-md p-5 sm:p-7 lg:py-10 lg:px-40">
{/* Main content */} <h1 className="text-center mb-4 text-xl sm:text-2xl font-bold text-[#153e8e]">
<main className="lg:col-span-2 bg-white border rounded-md p-7 px-40"> THỦ TỤC GIA NHẬP HỘI VIÊN CHÍNH THỨC
<div> </h1>
<h1 className="text-center mb-4 text-2xl font-bold text-[#153e8e]">THỦ TỤC GIA NHẬP HỘI VIÊN CHÍNH THỨC</h1>
<p className="text-justify leading-7 mb3"> <p className="text-justify leading-7 mb-3">
Điều lệ sửa đổi của Liên đoàn Thương mại và Công nghiệp Việt Nam (VCCI) được Đại hội đại biểu toàn quốc VCCI lần thứ VII thông qua và được Thủ tướng Chính phủ Phê duyệt tại Quyết định số 1496/QĐ-TTg ngày 30/11/2022 đã quy định tất cả các doanh nghiệp, các tổ chức sản xuất, kinh doanh, người sử dụng lao động, các hiệp hội doanh nghiệp có đăng ký và hoạt động hợp pháp ở Việt Nam đều có thể trở thành hội viên của VCCI. Điều lệ sửa đổi của Liên đoàn Thương mại và Công nghiệp Việt Nam (VCCI) được Đại hội đại biểu toàn quốc VCCI lần thứ VII thông qua và được Thủ tướng Chính phủ Phê duyệt tại Quyết định số 1496/QĐ-TTg ngày 30/11/2022 đã quy định tất cả các doanh nghiệp, các tổ chức sản xuất, kinh doanh, người sử dụng lao động, các hiệp hội doanh nghiệp có đăng ký và hoạt động hợp pháp ở Việt Nam đều có thể trở thành hội viên của VCCI.
</p> </p>
<p className="text-justify leading-7 mb-3"> <p className="text-justify leading-7 mb-3">
Để trở thành hội viên chính thức, tổ chức quan tâm cần gởi VCCI tại Hà Nội hoặc các Chi nhánh, Văn phòng đại diện của VCCI hồ sơ gia nhập gồm: Để trở thành hội viên chính thức, tổ chức quan tâm cần gửi VCCI tại Hà Nội hoặc các Chi nhánh, Văn phòng đại diện của VCCI hồ sơ gia nhập gồm:
</p> </p>
<ul className="list-disc pl-10 space-y-1 font-bold">
<li className="text-justify leading-7">Đơn xin gia nhập làm hội viên chính thức VCCI (2 bản theo mẫu của VCCI)</li> <ul className="list-disc pl-6 sm:pl-10 space-y-1 font-bold">
<li className="text-justify leading-7">Giấy phép đăng ký kinh doanh, hoặc giấy phép thành lập hoặc quyết định thành lập (2 bản sao).</li> <li className="text-justify leading-7">
Đơn xin gia nhập làm hội viên chính thức VCCI (2 bản theo mẫu của VCCI)
</li>
<li className="text-justify leading-7">
Giấy phép đăng ký kinh doanh, hoặc giấy phép thành lập hoặc quyết định thành lập (2 bản sao).
</li>
</ul> </ul>
<p className="text-justify leading-7 my-3"> <p className="text-justify leading-7 my-3">
Khi nhận được đơn, Ban Thường trực sẽ xét và thông báo cho tổ chức liên quan về quyết định kết nạp. Trong vòng 1 tháng kể từ ngày nhận thông báo, tổ chức phải thực hiện đóng lệ phí gia nhập. Chỉ khi nào tổ chức đóng lệ phí gia nhập mới được coi là hội viên chính thức. Theo quyết định của Ban chấp hành VCCI, lệ phí hiện hành được tính như sau: Khi nhận được đơn, Ban Thường trực sẽ xét và thông báo cho tổ chức liên quan về quyết định kết nạp. Trong vòng 1 tháng kể từ ngày nhận thông báo, tổ chức phải thực hiện đóng lệ phí gia nhập. Chỉ khi nào tổ chức đóng lệ phí gia nhập mới được coi là hội viên chính thức.
</p> </p>
<p className="text-justify leading-7 my-3"> <p className="text-justify leading-7 my-3">
Mức lệ phí gia nhập bằng mức hội phí hàng năm, được tính căn cứ vào doanh số của tổ chức trong năm trước theo các mức: Mức lệ phí gia nhập bằng mức hội phí hàng năm, được tính căn cứ vào doanh số của tổ chức trong năm trước theo các mức:
</p> </p>
<ul className="list-disc pl-10 space-y-1 font-bold">
<li className="text-justify leading-7">Doanh số dưới 10 tỉ đồng đóng 3 triệu đồng/năm</li> <ul className="list-disc pl-6 sm:pl-10 space-y-1 font-bold">
<li className="text-justify leading-7">Doanh số từ 10 {`-`} 50 tỉ đồng đóng 7 triệu đồng/năm</li> <li className="text-justify leading-7">
<li className="text-justify leading-7">Doanh số trên 50 tỉ đồng đóng 15 triệu đồng/năm</li> Doanh số dưới 10 tỉ đồng đóng 3 triệu đồng/năm
</li>
<li className="text-justify leading-7">
Doanh số từ 10 - 50 tỉ đồng đóng 7 triệu đồng/năm
</li>
<li className="text-justify leading-7">
Doanh số trên 50 tỉ đồng đóng 15 triệu đồng/năm
</li>
</ul> </ul>
<p className="text-justify leading-7 my-3"> <p className="text-justify leading-7 my-3">
Mức lệ phí gia nhập và hội phí trên có thể được điều chỉnh bởi quyết định của Ban chấp hành VCCI trong từng thời gian cụ thể. Mức lệ phí gia nhập và hội phí trên có thể được điều chỉnh bởi quyết định của Ban chấp hành VCCI trong từng thời gian cụ thể.
</p> </p>
<div>
<div className="my-4">
<p className="text-[#063e8e] mb-3"> <p className="text-[#063e8e] mb-3">
Để biết thêm thông tin chi tiết, vui lòng liên hệ: Để biết thêm thông tin chi tiết, vui lòng liên hệ:
</p> </p>
<p className="text-[#063e8e]"> <p className="text-[#063e8e]">
<b>Phòng Hội viên Đào tạo và Truyền thông</b> <b>Phòng Hội viên Đào tạo và Truyền thông</b>
<br /> <br />
<b>C. Thúy {`-`} DĐ: 0903 909 756</b> <b>C. Thúy - ĐĐ: 0903 909 756</b>
<span className="block"> <span className="block">
Email: luuthanhthuy72@yahoo.com; hoivien@vcci-hcm.org.vn; Email: luuthanhthuy72@yahoo.com; hoivien@vcci-hcm.org.vn;
</span> </span>
<span className="block"> <span className="block">
Điện thoại: 028.3932.0611 {`-`} Fax: 028.3932.5472 Điện thoại: 028.3932.0611 - Fax: 028.3932.5472
</span> </span>
<span className="block"> <span className="block">
Địa chỉ: P. 306, Lầu 3, Tòa nhà VCCI, 171 Võ Thị Sáu, Phường Xuân Hoà, TP. Hồ Chí Minh </span> Địa chỉ: P. 306, Lầu 3, Tòa nhà VCCI, 171 Võ Thị Sáu, Phường Xuân Hoà, TP. Hồ Chí Minh
</span>
</p> </p>
</div> </div>
<p className="text-justify leading-7 my-3">
Biểu mẫu đính kèm <p className="text-justify leading-7 my-3 font-semibold">
Biểu mẫu đính kèm:
</p> </p>
<ul className="list-disc pl-10 space-y-1">
<li className="text-justify leading-7 "> <ul className="list-disc pl-6 sm:pl-10 space-y-1">
<a href="https://vcci-hcm.org.vn/wp-content/uploads/2025/08/Don-dang-ky-tham-gia-nhap-hoi-vien-VCCI_Mau-Doanh-nghiep-1.docx" className="text-[#063e8e] hover:text-yellow-500 italic" download> <li className="text-justify leading-7">
Đơn đăng ký tham gia nhập hội viên VCCI (Mẫu Doanh nghiệp) <a
href="https://vcci-hcm.org.vn/wp-content/uploads/2025/08/Don-dang-ky-tham-gia-nhap-hoi-vien-VCCI_Mau-Doanh-nghiep-1.docx"
className="text-[#063e8e] hover:text-yellow-500 italic"
download
>
Đơn đăng ký tham gia nhập hội viên VCCI (Mẫu Doanh nghiệp)
</a> </a>
</li> </li>
<li className="text-justify leading-7"> <li className="text-justify leading-7">
<a href="https://vcci-hcm.org.vn/wp-content/uploads/2025/08/Don-dang-ky-tham-gia-nhap-hoi-vien-VCCI_Mau-Hiep-hoi.docx" className="text-[#063e8e] hover:text-yellow-500 italic" download> <a
Đơn đăng ký tham gia nhập hội viên VCCI (Mẫu Hiệp hội) href="https://vcci-hcm.org.vn/wp-content/uploads/2025/08/Don-dang-ky-tham-gia-nhap-hoi-vien-VCCI_Mau-Hiep-hoi.docx"
className="text-[#063e8e] hover:text-yellow-500 italic"
download
>
Đơn đăng ký tham gia nhập hội viên VCCI (Mẫu Hiệp hội)
</a> </a>
</li> </li>
<li className="text-justify leading-7"> <li className="text-justify leading-7">
<a href="https://vcci-hcm.org.vn/wp-content/uploads/2025/08/Huong-dan-ho-so-dang-ky-Hoi-vien-VCCI.docx" className="text-[#063e8e] hover:text-yellow-500 italic" download> <a
Hướng dẫn hồ sơ đăng ký Hội viên VCCI href="https://vcci-hcm.org.vn/wp-content/uploads/2025/08/Huong-dan-ho-so-dang-ky-Hoi-vien-VCCI.docx"
className="text-[#063e8e] hover:text-yellow-500 italic"
download
>
Hướng dẫn hồ sơ đăng ký Hội viên VCCI
</a> </a>
</li> </li>
</ul> </ul>
</div >
</main> </main>
</div > </div>
</div > </div>
</div >
); );
}; };
......
src/app/(main)/hoi-vien/ket-noi-hoi-vien/page.tsx
View file @ e0c56a2e
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import React, { useState } from "react"; import React, { useState } from "react";
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 NewsContent from "./../components/card-news"; import CardNews from "./../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'
...@@ -27,7 +27,7 @@ export default function Page() { ...@@ -27,7 +27,7 @@ export default function Page() {
<main className="lg:col-span-2 bg-background"> <main className="lg:col-span-2 bg-background">
<div className='pb-5 overflow-hidden'> <div className='pb-5 overflow-hidden'>
{allData?.responseData.rows.map((news) => ( {allData?.responseData.rows.map((news) => (
<NewsContent key={news.id} news={news} /> <CardNews key={news.id} news={news} />
))} ))}
<div className='w-full flex justify-center mt-4'> <div className='w-full flex justify-center mt-4'>
......
src/app/(main)/hoi-vien/tin-hoi-vien/page.tsx
View file @ e0c56a2e
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import React, { useState } from "react"; import React, { useState } from "react";
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 NewsContent from "./../components/card-news"; import CardNews from "./../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'
...@@ -27,7 +27,7 @@ export default function Page() { ...@@ -27,7 +27,7 @@ export default function Page() {
<main className="lg:col-span-2 bg-background"> <main className="lg:col-span-2 bg-background">
<div className='pb-5 overflow-hidden'> <div className='pb-5 overflow-hidden'>
{allData?.responseData.rows.map((news) => ( {allData?.responseData.rows.map((news) => (
<NewsContent key={news.id} news={news} /> <CardNews key={news.id} news={news} />
))} ))}
<div className='w-full flex justify-center mt-4'> <div className='w-full flex justify-center mt-4'>
......
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