Skip to content

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

update/fix desgin and component news content

parent 3d99fb77
Hide whitespace changes
Inline Side-by-side
Showing with 77 additions and 57 deletions
src/app/(main)/(home)/components/news-content/NewsContent.tsx
View file @ 984d0f95
...@@ -4,24 +4,24 @@ import dayjs from 'dayjs'; ...@@ -4,24 +4,24 @@ import dayjs from 'dayjs';
import AppEditorContent from '@/components/shared/editor-content'; import AppEditorContent from '@/components/shared/editor-content';
function NewsContent({ news }: { news: NewsAdminItem }) { function NewsContent({ news }: { news: NewsAdminItem }) {
return ( return (
<a <a
href={`/tin-tuc/${news.id}`} href={`${news.id}`}
className='flex flex-col sm:flex-row gap-4 mb-3 bg-white rounded-lg shadow-sm p-3' className='flex flex-col sm:flex-row gap-3 mb-3 bg-gray-100 rounded-md p-3'
> >
<img <img
// src={`${BASE_URL.imageEndpoint}${news.thumbnail}`} src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
src={news.thumbnail}
alt={news.title} alt={news.title}
className='w-full sm:w-[120px] h-[80px] object-cover rounded-sm' className='w-full sm:w-[120px] h-20 object-cover rounded-sm'
/> />
<div className='flex-1'> <div className='flex-1'>
<p className='text-[#0056b3] font-semibold text-base hover:underline line-clamp-2'> <p className='text-[#0056b3] font-bold text-sm line-clamp-2'>
{news.title} {news.title}
</p> </p>
<div className='text-gray-500 text-sm my-1'>{dayjs(news.release_at).format('DD/MM/YYYY')}</div> <p className='text-gray-500 text-sm my-1'>
{/* <AppEditorContent className='line-clamp-4' value={news.description} /> */} {dayjs(news.release_at).format('DD/MM/YYYY')}
</p>
{/* <AppEditorContent className='line-clamp-2' value={news.description} /> */}
</div> </div>
</a> </a>
); );
......
src/app/(main)/(home)/page.tsx
View file @ 984d0f95
...@@ -35,6 +35,8 @@ const Home = () => { ...@@ -35,6 +35,8 @@ const Home = () => {
filters: submitSearch ? `title @=${submitSearch}` : undefined, filters: submitSearch ? `title @=${submitSearch}` : undefined,
}) })
console.log(BASE_URL.imageEndpoint, allData?.responseData.rows[0]?.thumbnail)
// //tab filter // //tab filter
let data let data
if (tab === 'all') { if (tab === 'all') {
...@@ -77,15 +79,38 @@ const Home = () => { ...@@ -77,15 +79,38 @@ const Home = () => {
) : ( ) : (
<> <>
{/* Banner */} {/* Banner */}
<img <Swiper
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" modules={[Autoplay]}
alt="Banner" autoplay={{ delay: 4000, disableOnInteraction: false }}
className='w-full' loop
/> slidesPerView={1}
onSwiper={(swiper) => {
swiperRef.current = swiper
}}
onSlideChange={(swiper) => {
setCurrentIndex(typeof swiper.realIndex === 'number' ? swiper.realIndex : swiper.activeIndex)
}}
>
<SwiperSlide>
<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"
alt="Banner"
className='w-full'
/>
</SwiperSlide>
<SwiperSlide>
<img
src="https://vcci-hcm.org.vn/wp-content/uploads/2022/07/Landscape-HCM_3-01.png"
alt="Banner"
className='w-full'
/>
</SwiperSlide>
</Swiper>
<div className='container'> <div className='container'>
{/* Featured News */} {/* Featured News */}
<div className='pt-10'> <div>
<div className='flex justify-center items-center w-full text-center'> <div className='flex py-10 justify-center items-center w-full text-center'>
<hr className='border-blue-900 w-full' /> <hr className='border-blue-900 w-full' />
<h1 className='text-app-blue text-[28px] leading-normal uppercase font-bold w-full 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
...@@ -94,14 +119,14 @@ const Home = () => { ...@@ -94,14 +119,14 @@ const Home = () => {
</div> </div>
{/* slider */} {/* slider */}
<div className='py-10'> <div>
<Swiper <Swiper
modules={[Autoplay]} modules={[Autoplay]}
// navigation // navigation
// pagination={{ clickable: true }} // pagination={{ clickable: true }}
autoplay={{ delay: 4000, disableOnInteraction: false }} autoplay={{ delay: 4000, disableOnInteraction: false }}
loop loop
spaceBetween={20} spaceBetween={30}
breakpoints={{ breakpoints={{
0: { slidesPerView: 1 }, 0: { slidesPerView: 1 },
640: { slidesPerView: 2 }, 640: { slidesPerView: 2 },
...@@ -122,13 +147,13 @@ const Home = () => { ...@@ -122,13 +147,13 @@ const Home = () => {
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 bg-black bg-opacity-50 text-white px-4 font-semibold text-base rounded-b-xl flex items-center justify-center text-center h-16 md:h-20'> <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 <div
className='w-full overflow-hidden' className="w-full overflow-hidden"
style={{ style={{
display: '-webkit-box', display: '-webkit-box',
WebkitLineClamp: 2, WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical' WebkitBoxOrient: 'vertical',
}} }}
> >
{news.title} {news.title}
...@@ -142,8 +167,8 @@ const Home = () => { ...@@ -142,8 +167,8 @@ const Home = () => {
</div> </div>
{/* news and quick links section */} {/* news and quick links section */}
<div className='flex flex-row gap-5'> <div className='flex flex-row gap-[30px] py-10'>
<div className='w-[67%]'> <div className='w-[71%]'>
<div> <div>
<div className='flex justify-between items-center'> <div className='flex justify-between items-center'>
<a href='#' className='text-[20px] font-bold uppercase text-blue-900'>Tin Tức</a> <a href='#' className='text-[20px] font-bold uppercase text-blue-900'>Tin Tức</a>
...@@ -152,18 +177,17 @@ const Home = () => { ...@@ -152,18 +177,17 @@ const Home = () => {
<hr className=' border-blue-900' /> <hr className=' border-blue-900' />
</div> </div>
<div className='flex flex-row justify-center gap-5 pt-5'> <div className='flex flex-row justify-center gap-[30px] pt-5'>
{/* special news section */} {/* special news section */}
<div className='bg-gray-500 w-[50%] flex items-center justify-center rounded-lg'> <div className='bg-gray-500 w-[50%] flex items-center justify-center rounded-lg'>
<p className='text-white'>khung tin tức vip</p> <p className='text-white'>khung tin tức vip</p>
</div> </div>
{/* news list section */}
<div className='w-[50%]'> <div className='w-[50%]'>
{/* category tabs */} {/* category tabs */}
<div className='flex gap-2 mb-5 flex-wrap'> <div className='flex mb-5 flex-wrap justify-between'>
<button <button
className={`px-4 py-1 rounded-md border ${'all' === tab ? 'border-blue-700 bg-blue-50' : 'border-gray-300 bg-white'}`} className={`w-22 cursor-pointer px-4 py-1 rounded-md border ${'all' === tab ? 'border-blue-700 bg-blue-50' : 'border-gray-300 bg-white'}`}
onClick={() => setTab('all')} onClick={() => setTab('all')}
> >
Tất cả Tất cả
...@@ -171,7 +195,7 @@ const Home = () => { ...@@ -171,7 +195,7 @@ 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={`px-4 py-1 rounded-md border ${category.name === tab ? 'border-blue-700 bg-blue-50' : 'border-gray-300 bg-white'}`} className={`w-22 cursor-pointer px-4 py-1 rounded-md border ${category.name === tab ? 'border-blue-700 bg-blue-50' : 'border-gray-300 bg-white'}`}
onClick={() => setTab(category.name)} onClick={() => setTab(category.name)}
> >
{category.name} {category.name}
...@@ -190,7 +214,7 @@ const Home = () => { ...@@ -190,7 +214,7 @@ const Home = () => {
</div> </div>
{/* quick links section */} {/* quick links section */}
<div className='w-[33%]'> <div>
<div> <div>
<div className='flex justify-between items-center'> <div className='flex justify-between items-center'>
<a href='#' className='text-[20px] font-bold uppercase text-blue-900'>Liên kết nhanh</a> <a href='#' className='text-[20px] font-bold uppercase text-blue-900'>Liên kết nhanh</a>
...@@ -198,7 +222,6 @@ const Home = () => { ...@@ -198,7 +222,6 @@ const Home = () => {
</div> </div>
<hr className=' border-blue-900' /> <hr className=' border-blue-900' />
</div> </div>
<div className='pt-5'> <div className='pt-5'>
<p>🔗 Cẩm nang Hướng dẫn đầu tư kinh doanh tại Việt Nam</p> <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>
...@@ -206,9 +229,9 @@ const Home = () => { ...@@ -206,9 +229,9 @@ const Home = () => {
</div> </div>
</div> </div>
{/* news and quick links section */} {/* content 2 */}
<div className='flex flex-row gap-5'> <div className='flex flex-row gap-[30px] pb-10'>
<div className='w-[67%]'> <div className='w-[71%]'>
<div> <div>
<div className='flex justify-between items-center'> <div className='flex justify-between items-center'>
<a href='#' className='text-[20px] font-bold uppercase text-blue-900'> <a href='#' className='text-[20px] font-bold uppercase text-blue-900'>
...@@ -219,26 +242,22 @@ const Home = () => { ...@@ -219,26 +242,22 @@ const Home = () => {
<hr className=' border-blue-900' /> <hr className=' border-blue-900' />
</div> </div>
<div className='flex flex-row justify-center gap-5 pt-5'> <div className='flex flex-row justify-center gap-[30px] pt-5'>
{/* special news section */} {/* special news section */}
<div className='bg-gray-500 w-[50%] flex items-center justify-center rounded-lg'> <div className='bg-gray-500 w-[50%] flex items-center justify-center rounded-lg'>
<p className='text-white'>khung tin tức vip</p> <p className='text-white'>khung tin tức vip</p>
</div> </div>
{/* News list */}
{/* news list section */} <div className='w-[50%] pb-5 overflow-hidden'>
<div className='w-[50%]'> {data?.responseData.rows.slice(0, 5).map((news) => (
{/* News list */} <NewsContent key={news.id} news={news} />
<div className='pb-5 overflow-hidden'> ))}
{data?.responseData.rows.slice(0, 5).map((news) => (
<NewsContent key={news.id} news={news} />
))}
</div>
</div> </div>
</div> </div>
</div> </div>
{/* quick links section */} {/* calendar */}
<div className='w-[33%]'> <div>
<div> <div>
<div className='flex justify-between items-center'> <div className='flex justify-between items-center'>
<a href='#' className='text-[20px] font-bold uppercase text-blue-900'>Lịch sự kiện</a> <a href='#' className='text-[20px] font-bold uppercase text-blue-900'>Lịch sự kiện</a>
...@@ -246,7 +265,6 @@ const Home = () => { ...@@ -246,7 +265,6 @@ const Home = () => {
</div> </div>
<hr className=' border-blue-900' /> <hr className=' border-blue-900' />
</div> </div>
<div className='pt-5'> <div className='pt-5'>
<p>🔗 Cẩm nang Hướng dẫn đầu tư kinh doanh tại Việt Nam</p> <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>
...@@ -254,20 +272,21 @@ const Home = () => { ...@@ -254,20 +272,21 @@ const Home = () => {
</div> </div>
</div> </div>
{/* news and quick links section */} {/* content 3 */}
<div className='flex flex-row gap-5'> <div className='flex flex-row gap-[30px] pb-10'>
{/* Cơ hội kinh doanh */} {/* Cơ hội kinh doanh */}
<div className='flex flex-col w-[33%]'> <div className='flex flex-col'>
<div className='flex flex-row gap-5'> <div>
<div className='flex justify-between items-center w-full'> <div className='flex justify-between items-center w-full'>
<a href='#' className='text-[20px] font-bold uppercase text-blue-900'> <a href='#' className='text-[20px] font-bold uppercase text-blue-900'>
Cơ hội kinh doanh Cơ hội kinh doanh
</a> </a>
<a href='#' className='text-blue-900'>{'>>'}</a> <a href='#' className='text-blue-900'>{'>>'}</a>
</div> </div>
<hr className=' border-blue-900' />
</div> </div>
<hr className=' border-blue-900' />
<div> <div className='pt-5'>
{data?.responseData.rows.slice(0, 5).map((news) => ( {data?.responseData.rows.slice(0, 5).map((news) => (
<NewsContent key={news.id} news={news} /> <NewsContent key={news.id} news={news} />
))} ))}
...@@ -275,24 +294,25 @@ const Home = () => { ...@@ -275,24 +294,25 @@ const Home = () => {
</div> </div>
{/* Chính sách & pháp luật */} {/* Chính sách & pháp luật */}
<div className='flex flex-col w-[33%]'> <div className='flex flex-col'>
<div className='flex flex-row gap-5'> <div>
<div className='flex justify-between items-center w-full'> <div className='flex justify-between items-center w-full'>
<a href='#' className='text-[20px] font-bold uppercase text-blue-900'> <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
</a> </a>
<a href='#' className='text-blue-900'>{'>>'}</a> <a href='#' className='text-blue-900'>{'>>'}</a>
</div> </div>
<hr className=' border-blue-900' />
</div> </div>
<hr className=' border-blue-900' />
<div> <div className='pt-5'>
{data?.responseData.rows.slice(0, 5).map((news) => ( {data?.responseData.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> </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