Skip to content

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

update/font, slider, dayjs, padding

parent baecb1a1
Show whitespace changes
Inline Side-by-side
Showing with 159 additions and 39 deletions
pnpm-lock.yaml
View file @ d2009c3f
...@@ -41,6 +41,9 @@ importers: ...@@ -41,6 +41,9 @@ importers:
clsx: clsx:
specifier: ^2.1.1 specifier: ^2.1.1
version: 2.1.1 version: 2.1.1
dayjs:
specifier: ^1.11.19
version: 1.11.19
lucide-react: lucide-react:
specifier: ^0.548.0 specifier: ^0.548.0
version: 0.548.0(react@19.2.0) version: 0.548.0(react@19.2.0)
...@@ -1711,6 +1714,9 @@ packages: ...@@ -1711,6 +1714,9 @@ packages:
resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==} resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
engines: {node: '>= 0.4'} engines: {node: '>= 0.4'}
dayjs@1.11.19:
resolution: {integrity: sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==}
debug@3.2.7: debug@3.2.7:
resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==} resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
peerDependencies: peerDependencies:
...@@ -5045,6 +5051,8 @@ snapshots: ...@@ -5045,6 +5051,8 @@ snapshots:
es-errors: 1.3.0 es-errors: 1.3.0
is-data-view: 1.0.2 is-data-view: 1.0.2
dayjs@1.11.19: {}
debug@3.2.7: debug@3.2.7:
dependencies: dependencies:
ms: 2.1.3 ms: 2.1.3
......
src/app/(main)/(home)/components/news-content/NewsContent.tsx 0 → 100644
View file @ d2009c3f
import { NewsItem } from '../../page.type'
// import BASE_URL from '#/config'
import dayjs from 'dayjs';
// import { AppEditorContent } from '#/components';
function NewsContent({ news }: { news: NewsItem }) {
return (
<a
href={`/tin-tuc/${news.id}`}
className='flex flex-col sm:flex-row gap-4 mb-3 bg-white rounded-lg shadow-sm p-3'
>
<img
// src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
src={news.thumbnail}
alt={news.title}
className='w-full sm:w-[120px] h-[80px] object-cover rounded-sm'
/>
<div className='flex-1'>
<p className='text-[#0056b3] font-semibold text-base hover:underline line-clamp-2'>
{news.title}
</p>
<div className='text-gray-500 text-sm my-1'>{dayjs(news.release_at).format('DD/MM/YYYY')}</div>
{/* <AppEditorContent className='line-clamp-4' value={news.description} /> */}
</div>
</a>
);
}
export default NewsContent;
\ No newline at end of file
src/app/(main)/(home)/page.tsx
View file @ d2009c3f
...@@ -9,7 +9,9 @@ import { Swiper as SwiperType } from 'swiper/types' ...@@ -9,7 +9,9 @@ import { Swiper as SwiperType } from 'swiper/types'
import 'swiper/css' import 'swiper/css'
import 'swiper/css/navigation' import 'swiper/css/navigation'
import 'swiper/css/pagination' import 'swiper/css/pagination'
import { is } from 'zod/v4/locales' import { id, is, th } from 'zod/v4/locales'
import NewsContent from './components/news-content/NewsContent'
import { extend } from 'dayjs'
const Home = () => { const Home = () => {
// states // states
...@@ -63,8 +65,75 @@ const Home = () => { ...@@ -63,8 +65,75 @@ const Home = () => {
return () => window.removeEventListener('resize', update) return () => window.removeEventListener('resize', update)
}, []) }, [])
// demo //demo
const isLoading = false const isLoading = false
const allData = {
responseData: {
rows: [
{
id: 1,
title: 'News Title 1',
thumbnail: 'https://media.istockphoto.com/id/814423752/vi/anh/con-m%E1%BA%AFt-c%E1%BB%A7a-ng%C6%B0%E1%BB%9Di-m%E1%BA%ABu-v%E1%BB%9Bi-trang-%C4%91i%E1%BB%83m-ngh%E1%BB%87-thu%E1%BA%ADt-%C4%91%E1%BA%A7y-m%C3%A0u-s%E1%BA%AFc-c%E1%BA%ADn-c%E1%BA%A3nh.jpg?s=1024x1024&w=is&k=20&c=g9JektNW0igwf2u2mT9uqSLkhzR91ZYviuVLXuhy2JQ='
},
{
id: 2,
title: 'News Title 2',
thumbnail: 'https://media.istockphoto.com/id/814423752/vi/anh/con-m%E1%BA%AFt-c%E1%BB%A7a-ng%C6%B0%E1%BB%9Di-m%E1%BA%ABu-v%E1%BB%9Bi-trang-%C4%91i%E1%BB%83m-ngh%E1%BB%87-thu%E1%BA%ADt-%C4%91%E1%BA%A7y-m%C3%A0u-s%E1%BA%AFc-c%E1%BA%ADn-c%E1%BA%A3nh.jpg?s=1024x1024&w=is&k=20&c=g9JektNW0igwf2u2mT9uqSLkhzR91ZYviuVLXuhy2JQ='
},
{
id: 3,
title: 'News Title 3',
thumbnail: 'https://media.istockphoto.com/id/814423752/vi/anh/con-m%E1%BA%AFt-c%E1%BB%A7a-ng%C6%B0%E1%BB%9Di-m%E1%BA%ABu-v%E1%BB%9Bi-trang-%C4%91i%E1%BB%83m-ngh%E1%BB%87-thu%E1%BA%ADt-%C4%91%E1%BA%A7y-m%C3%A0u-s%E1%BA%AFc-c%E1%BA%ADn-c%E1%BA%A3nh.jpg?s=1024x1024&w=is&k=20&c=g9JektNW0igwf2u2mT9uqSLkhzR91ZYviuVLXuhy2JQ='
},
{
id: 4,
title: 'News Title 4',
thumbnail: 'https://media.istockphoto.com/id/814423752/vi/anh/con-m%E1%BA%AFt-c%E1%BB%A7a-ng%C6%B0%E1%BB%9Di-m%E1%BA%ABu-v%E1%BB%9Bi-trang-%C4%91i%E1%BB%83m-ngh%E1%BB%87-thu%E1%BA%ADt-%C4%91%E1%BA%A7y-m%C3%A0u-s%E1%BA%AFc-c%E1%BA%ADn-c%E1%BA%A3nh.jpg?s=1024x1024&w=is&k=20&c=g9JektNW0igwf2u2mT9uqSLkhzR91ZYviuVLXuhy2JQ='
},
{
id: 5,
title: 'News Title 5',
thumbnail: 'https://media.istockphoto.com/id/814423752/vi/anh/con-m%E1%BA%AFt-c%E1%BB%A7a-ng%C6%B0%E1%BB%9Di-m%E1%BA%ABu-v%E1%BB%9Bi-trang-%C4%91i%E1%BB%83m-ngh%E1%BB%87-thu%E1%BA%ADt-%C4%91%E1%BA%A7y-m%C3%A0u-s%E1%BA%AFc-c%E1%BA%ADn-c%E1%BA%A3nh.jpg?s=1024x1024&w=is&k=20&c=g9JektNW0igwf2u2mT9uqSLkhzR91ZYviuVLXuhy2JQ='
}
]
}
}
const data = {
responseData: {
rows: [
{
id: '1',
title: 'News Title 1',
thumbnail: 'https://media.istockphoto.com/id/814423752/vi/anh/con-m%E1%BA%AFt-c%E1%BB%A7a-ng%C6%B0%E1%BB%9Di-m%E1%BA%ABu-v%E1%BB%9Bi-trang-%C4%91i%E1%BB%83m-ngh%E1%BB%87-thu%E1%BA%ADt-%C4%91%E1%BA%A7y-m%C3%A0u-s%E1%BA%AFc-c%E1%BA%ADn-c%E1%BA%A3nh.jpg?s=1024x1024&w=is&k=20&c=g9JektNW0igwf2u2mT9uqSLkhzR91ZYviuVLXuhy2JQ=',
external_link: 'https://vcci-hcm.org.vn/asdfasdf',
description: 'Description for News Title 1',
release_at: '2023-10-01',
is_active: true,
created_at: '2023-09-01',
created_by: 'Admin',
updated_at: '2023-09-02',
updated_by: 'Admin',
mode: 'NOW',
category: 'General'
},
{
id: '2',
title: 'News Title 2',
thumbnail: 'https://media.istockphoto.com/id/814423752/vi/anh/con-m%E1%BA%AFt-c%E1%BB%A7a-ng%C6%B0%E1%BB%9Di-m%E1%BA%ABu-v%E1%BB%9Bi-trang-%C4%91i%E1%BB%83m-ngh%E1%BB%87-thu%E1%BA%ADt-%C4%91%E1%BA%A7y-m%C3%A0u-s%E1%BA%AFc-c%E1%BA%ADn-c%E1%BA%A3nh.jpg?s=1024x1024&w=is&k=20&c=g9JektNW0igwf2u2mT9uqSLkhzR91ZYviuVLXuhy2JQ=',
external_link: 'https://vcci-hcm.org.vn/asdfasdf',
description: 'Description for News Title 2',
release_at: '2023-10-01',
is_active: true,
created_at: '2023-09-01',
created_by: 'Admin',
updated_at: '2023-09-02',
updated_by: 'Admin',
mode: 'NOW',
category: 'General'
}
]
}
}
//template //template
return ( return (
...@@ -80,7 +149,7 @@ const Home = () => { ...@@ -80,7 +149,7 @@ const Home = () => {
alt="Banner" alt="Banner"
className='w-full' className='w-full'
/> />
<div className='app-container'> <div className='container'>
{/* Featured News */} {/* Featured News */}
<div className='pt-10'> <div className='pt-10'>
<div className='flex justify-center items-center w-full text-center'> <div className='flex justify-center items-center w-full text-center'>
...@@ -112,11 +181,12 @@ const Home = () => { ...@@ -112,11 +181,12 @@ const Home = () => {
setCurrentIndex(typeof swiper.realIndex === 'number' ? swiper.realIndex : swiper.activeIndex) setCurrentIndex(typeof swiper.realIndex === 'number' ? swiper.realIndex : swiper.activeIndex)
}} }}
> >
{/* {allData?.responseData.rows.map((news) => ( {allData?.responseData.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='block bg-white shadow-md overflow-hidden relative'>
<AppImage <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 h-48 sm:h-56 md:h-64 object-cover' className='w-full h-48 sm:h-56 md:h-64 object-cover'
/> />
...@@ -134,29 +204,7 @@ const Home = () => { ...@@ -134,29 +204,7 @@ const Home = () => {
</div> </div>
</a> </a>
</SwiperSlide> </SwiperSlide>
))} */} ))}
<SwiperSlide>
<a href={`#`} className='block bg-white shadow-md overflow-hidden relative'>
<img
src={`https://media.istockphoto.com/id/814423752/vi/anh/con-m%E1%BA%AFt-c%E1%BB%A7a-ng%C6%B0%E1%BB%9Di-m%E1%BA%ABu-v%E1%BB%9Bi-trang-%C4%91i%E1%BB%83m-ngh%E1%BB%87-thu%E1%BA%ADt-%C4%91%E1%BA%A7y-m%C3%A0u-s%E1%BA%AFc-c%E1%BA%ADn-c%E1%BA%A3nh.jpg?s=1024x1024&w=is&k=20&c=g9JektNW0igwf2u2mT9uqSLkhzR91ZYviuVLXuhy2JQ=`}
alt={'image'}
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='w-full overflow-hidden'
style={{
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical'
}}
>
title
</div>
</div>
</a>
</SwiperSlide>
</Swiper> </Swiper>
</div> </div>
</div> </div>
...@@ -200,12 +248,12 @@ const Home = () => { ...@@ -200,12 +248,12 @@ const Home = () => {
</div> </div>
{/* News list */} {/* News list */}
{/* <div className='pb-5 overflow-hidden'> <div className='pb-5 overflow-hidden'>
{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 className='w-full flex justify-center mt-4'> {/* <div className='w-full flex justify-center mt-4'>
<AppPagination <AppPagination
page={Math.floor(currentIndex / Math.max(slidesPerView, 1)) + 1} page={Math.floor(currentIndex / Math.max(slidesPerView, 1)) + 1}
count={Math.ceil((data?.responseData.rows?.length ?? 0) / Math.max(slidesPerView, 1))} count={Math.ceil((data?.responseData.rows?.length ?? 0) / Math.max(slidesPerView, 1))}
...@@ -214,11 +262,11 @@ const Home = () => { ...@@ -214,11 +262,11 @@ const Home = () => {
swiperRef.current?.slideTo(toIndex) swiperRef.current?.slideTo(toIndex)
}} }}
/> />
</div>
</div> */} </div> */}
</div> </div>
</div> </div>
</div> </div>
</div>
{/* quick links section */} {/* quick links section */}
<div className='w-[33%]'> <div className='w-[33%]'>
......
src/app/(main)/(home)/page.type.ts 0 → 100644
View file @ d2009c3f
export interface NewsItem {
id: string
title: string
thumbnail: string
external_link: string
description: string
release_at: string
is_active: boolean
created_at: string
created_by: string | null
updated_at: string
updated_by: string | null
mode: 'NOW' | string
category: string
}
export interface NewsResponseData {
count: number
rows: NewsItem[]
totalPages: number
currentPage: number
}
export interface GetNewsResponseType {
message: string
message_en: string
responseData: NewsResponseData
status: 'success' | 'error'
timeStamp: string
violations: any | null
}
\ No newline at end of file
src/styles/_base.css
View file @ d2009c3f
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
color utility to any element that depends on these defaults. color utility to any element that depends on these defaults.
*/ */
@layer base { @layer base {
*, *,
::after, ::after,
::before, ::before,
......
src/styles/_components.css
View file @ d2009c3f
@layer components { @layer components {
/* Header */ /* Header */
.header-base { .header-base {
@apply z-20; @apply z-20;
......
src/styles/_utilities.css
View file @ d2009c3f
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
.container { .container {
@apply mr-auto ml-auto px-4; @apply mr-auto ml-auto px-4;
@media (width >= 80rem) { @media (width >=80rem) {
@apply px-5; @apply px-20;
} }
} }
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
} }
.sun-editor-editable { .sun-editor-editable {
font-family: 'Be Vietnam Pro', sans-serif; font-family: 'Roboto', sans-serif;
font-size: 16px; font-size: 16px;
background-color: transparent; background-color: transparent;
} }
......
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