Skip to content

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

Merge branch 'feat/home_page' into 'develop' 

Feat/home page

See merge request !8
parents 4d628084 e83b5a22
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 275 additions and 142 deletions
src/api/types/event.ts 0 → 100644
View file @ 227363b8
export type EventStatus = {
id: string;
name: string;
name_en: string;
code: string;
};
export type EventOrganization = {
id: string;
organization_id: string | null;
event_id: string;
status: string | null;
created_at: string;
updated_at: string | null;
created_by: string;
updated_by: string | null;
role: string;
guest_name: string;
guest_image: string;
org_table_count: number | null;
org_counter_count: number | null;
add_info: unknown | null;
organization: unknown | null;
};
export type EventItem = {
id: string;
name: string;
start_time: string;
end_time: string;
created_at: string;
created_by: string;
updated_at: string | null;
updated_by: string | null;
status: string;
image: string;
description: string;
location: string;
province: string;
table_count: number;
counter_count: number;
seo_text: string;
seo_text_en: string | null;
table_cost: number;
counter_cost: number;
table_min_pick: number | null;
counter_min_pick: number | null;
table_max_pick: number | null;
counter_max_pick: number | null;
org_support_titles: string[];
accept_entries: boolean;
type: string;
introduction: string;
host_club: string | null;
config: unknown | null;
event_organizations: EventOrganization[];
status_status: EventStatus;
};
export type EventResponseData = {
count: number;
rows: EventItem[];
totalPages: number;
currentPage: number;
};
export type EventApiResponse = {
message: string;
message_en: string;
responseData: EventResponseData;
status: string;
timeStamp: string;
violations: null | unknown;
};
\ No newline at end of file
src/app/(main)/(home)/[id]/page.tsx
View file @ 227363b8
...@@ -12,6 +12,9 @@ import { GetNewsDetailResponseType } from './page.type'; ...@@ -12,6 +12,9 @@ import { GetNewsDetailResponseType } from './page.type';
import { Link, CalendarFold, Book } from 'lucide-react'; import { Link, CalendarFold, Book } from 'lucide-react';
import { useEffect, useMemo } from 'react'; import { useEffect, useMemo } from 'react';
import { useParams } from 'next/navigation' import { useParams } from 'next/navigation'
import ListCategory from '@/components/base/list-category'
import { MEDIA_INFORMATION_CATEGORIES } from '@/constants/categories'
import EventCalendar from '@/components/base/event-calendar'
// import { t } from 'i18next' // import { t } from 'i18next'
// Component // Component
...@@ -33,82 +36,34 @@ const NewsDetailPage = () => { ...@@ -33,82 +36,34 @@ const NewsDetailPage = () => {
<Spinner /> <Spinner />
) : ( ) : (
<div> <div>
{/* Banner */} <div className='container flex flex-col gap-5'>
<img className='w-full h-100' src={`${BASE_URLS.imageEndpoint}${data?.responseData?.thumbnail}`} alt='Banner' /> <ListCategory categories={MEDIA_INFORMATION_CATEGORIES} />
{/* Breadcrumb */} <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
<div className='container py-10'> {/* Main content */}
<div className='flex gap-4 items-stretch'> <main className="lg:col-span-2 bg-white border rounded-md p-7">
{/* <Breadcrumbs aria-label='breadcrumb'> <div className='pb-5 text-blue-900 text-2xl leading-normal font-medium'>
<Link {data?.responseData?.title}
underline='hover'
color='inherit'
href='/'
className='!text-app-blue-secondary !text-sm !leading-normal'
>
{t('breadcrumbHomePage')}
<p>Trang chủ</p>
</Link>
<Link
underline='hover'
color='inherit'
href='/tin-tuc'
className='!text-app-blue-secondary !text-sm !leading-normal'
>
{t('breadcrumbNewsPage')}
<p>Tin tức</p>
</Link>
<Typography className='!text-sm !text-black !leading-normal'>
{t('breadcrumbNewsDetailPage')}
<p>Chi tiết</p>
</Typography>
</Breadcrumbs> */}
</div>
</div>
<div className='container bg-gray-100 rounded p-10 flex flex-col gap-10'>
{/* Heading */}
<div className='text-blue-900 text-[32px] leading-normal font-medium text-center'>{data?.responseData?.title}</div>
{/* body */}
<div className='flex items-start gap-8 flex-col lg:flex-row'>
{/* Info */}
<div className='lg:w-[332px] bg-white p-4 rounded shadow-app-quaternary flex flex-col gap-2'>
<div className='text-base text-app-grey font-semibold leading-normal text-center'>
{/* {t('information')} */}
</div> </div>
<div className='flex items-center gap-2 text-sm mb-4'>
{/* date */}
<div className='flex items-center gap-2 text-app-grey'>
<CalendarFold /> <CalendarFold />
<span className='text-base'>{dayjs(data?.responseData?.created_at).format('DD/MM/YYYY')}</span> <span className='text-base text-blue-700'>{dayjs(data?.responseData?.created_at).format('DD/MM/YYYY')}</span>
</div> </div>
<div className='py-5' >
{/* author */} <hr />
{/* <div className='flex items-center gap-2 text-app-grey'>
<PersonIcon />
<span className='text-base'>{data?.responseData?.created_by}</span>
</div> */}
{/* Category */}
<div className='flex items-center gap-2 text-app-grey'>
<Book />
<span className='text-base'>{data?.responseData?.category}</span>
</div> </div>
</div> <div className='flex-1 text-app-grey text-base overflow-hidden'>
<AppEditorContent value={data?.responseData?.description ?? ''} />
{/* Content */} </div>
<div className='flex-1 text-app-grey text-base overflow-hidden'> </main>
<AppEditorContent value={data?.responseData?.description ?? ''} /> {/* Sidebar */}
</div> <aside className="space-y-6">
<EventCalendar />
</aside>
</div> </div>
</div> </div>
{/* Related News */}
{/* <RelatedNews newsQuery={getRelatedNewsQuery} lang={lang} newsId={infoNews.id} /> */}
</div> </div>
)} )}
</div> </div >
) )
} }
......
src/app/(main)/(home)/components/card-event/index.tsx 0 → 100644
View file @ 227363b8
import { EventItem } from '@/api/types/event'
import BASE_URL from '@/links'
import dayjs from 'dayjs';
import AppEditorContent from '@/components/shared/editor-content';
function CardEvent({ event }: { event: EventItem }) {
return (
<a
href={`${event.id}`}
className='flex flex-row gap-2 mb-2 sm:gap-3 sm:mb-3 p-2 sm:p-3 border border-gray-200 bg-white rounded-md'
>
<img
src={`${BASE_URL.imageEndpoint}${event.image}`}
alt={event.name}
className='w-[100px] md:w-[130px] aspect-3/2 object-cover'
/>
<div className='flex-1'>
<p className='text-[#0056b3] font-bold text-sm line-clamp-2'>
{event.name}
</p>
<p className='text-gray-500 text-sm my-1'>
{dayjs(event.start_time).format('DD/MM/YYYY')}
</p>
{/* <AppEditorContent className='line-clamp-2' value={event.description} /> */}
</div>
</a>
);
}
export default CardEvent;
\ No newline at end of file
src/app/(main)/(home)/components/card-news/index.tsx
View file @ 227363b8
...@@ -7,12 +7,12 @@ function CardNews({ news }: { news: NewsAdminItem }) { ...@@ -7,12 +7,12 @@ function CardNews({ news }: { news: NewsAdminItem }) {
return ( return (
<a <a
href={`${news.id}`} href={`${news.id}`}
className='flex flex-row gap-3 mb-3 border border-gray-200 bg-white rounded-md p-3' className='flex flex-row gap-2 mb-2 sm:gap-3 sm:mb-3 p-2 sm:p-3 border border-gray-200 bg-white rounded-md'
> >
<img <img
src={`${BASE_URL.imageEndpoint}${news.thumbnail}`} src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
alt={news.title} alt={news.title}
className='w-[120px] h-20 object-cover rounded-sm' className='w-[100px] md:w-[130px] aspect-3/2 object-cover'
/> />
<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'>
......
src/app/(main)/(home)/page.tsx
View file @ 227363b8
This diff is collapsed.
src/components/base/card-news/index.tsx
View file @ 227363b8
...@@ -3,7 +3,7 @@ import { NewsItem } from '@app/dai-dien-gioi-chu/lib/types/NewsPage.type'; ...@@ -3,7 +3,7 @@ import { NewsItem } from '@app/dai-dien-gioi-chu/lib/types/NewsPage.type';
import Links from '@links/index' import Links from '@links/index'
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import parse from 'html-react-parser' import parse from 'html-react-parser'
function NewsContent({ news ,link}: { news: NewsItem ,link:string}) { function NewsContent({ news, link }: { news: NewsItem, link: string }) {
return ( return (
<a <a
...@@ -14,14 +14,13 @@ function NewsContent({ news ,link}: { news: NewsItem ,link:string}) { ...@@ -14,14 +14,13 @@ function NewsContent({ news ,link}: { news: NewsItem ,link:string}) {
src={`${Links.imageEndpoint}${news.thumbnail}`} src={`${Links.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-56 md:w-64 h-40 md:h-36 object-cover shrink-0"
onError={(e) => { onError={(e) => {
e.currentTarget.src = "/img-error.png" e.currentTarget.src = "/img-error.png"
}} }}
/> />
<div className="flex-1 min-w-0 pl-0 sm:pl-4"> <div className="flex-1 min-w-0 pl-0 sm:pl-4">
<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-primary font-semibold text-base md:text-lg line-clamp-2 wrap-break-word hover:no-underline">
{news.title} {news.title}
</p> </p>
......
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