Skip to content

V
VCCI-News
Commit 878bfb2f authored by Lê Bảo Hồng Đức's avatar Lê Bảo Hồng Đức ☄
Browse files
Options

fix

parent 357bf7d7
Hide whitespace changes
Inline Side-by-side
Showing with 74 additions and 123 deletions
src/app/(main)/(home)/components/business-opportunities/index.tsx
View file @ 878bfb2f
...@@ -7,9 +7,7 @@ import Link from "next/link"; ...@@ -7,9 +7,7 @@ import Link from "next/link";
function BusinessOpportunities() { function BusinessOpportunities() {
const { businessPosts, categoryLinks, categoryNames } = useHomePosts(); const { businessPosts, categoryLinks, categoryNames } = useHomePosts();
const businessItems = businessPosts; const listSlots = Array.from({ length: 4 }, (_, index) => businessPosts[index] ?? null);
const [featuredItem, ...listItems] = businessItems;
const listSlots = Array.from({ length: 3 }, (_, index) => listItems[index] ?? null);
const sectionLink = const sectionLink =
categoryLinks.get(categoryNames.coHoiKinhDoanh.toLowerCase()) ?? categoryLinks.get(categoryNames.coHoiKinhDoanh.toLowerCase()) ??
"/xuc-tien-thuong-mai/co-hoi-kinh-doanh"; "/xuc-tien-thuong-mai/co-hoi-kinh-doanh";
...@@ -32,58 +30,49 @@ function BusinessOpportunities() { ...@@ -32,58 +30,49 @@ function BusinessOpportunities() {
</Link> </Link>
</div> </div>
<div className="flex min-h-[270px] flex-1 flex-col justify-between gap-3"> <div className="flex min-h-[270px] flex-1 flex-col gap-2.5">
{featuredItem ? ( {listSlots.map((item, index) =>
<Link item ? (
href={featuredItem.externalLink} <Link
className="block rounded-[18px] bg-[#f5f7fb] px-4 py-3.5 transition-colors hover:bg-[#eef3fb]" key={item.id}
> href={item.externalLink}
<h3 className="line-clamp-2 text-[16px] font-bold leading-[1.45] text-[#264798] md:text-[17px]"> className={`group flex min-h-[58px] gap-3 rounded-[18px] px-4 py-3 transition-all duration-200 hover:bg-[#f5f7fb] hover:shadow-[0_10px_24px_rgba(36,70,156,0.08)] ${
{featuredItem.title} index === 0 ? "pt-3.5" : ""
</h3> }`}
<p className="mt-2 text-[13px] text-[#9aa8c1]"> >
{dayjs(featuredItem.publishedAt || featuredItem.createdAt).format("DD/MM/YYYY")} <span className="mt-1 h-[40px] w-[2px] shrink-0 rounded-full bg-[#f7b500] transition-opacity duration-200 group-hover:opacity-0" />
</p>
</Link>
) : (
<div className="rounded-[18px] bg-[#f5f7fb] px-4 py-3.5">
<div className="h-6 w-5/6 rounded bg-white" />
<div className="mt-2 h-4 w-24 rounded bg-white/80" />
</div>
)}
<div className="flex flex-col gap-2.5"> <div className="hidden min-w-0 group-hover:block">
{listSlots.map((item, index) => <h3 className="line-clamp-2 text-[16px] font-bold leading-[1.45] text-[#264798] md:text-[17px]">
item ? ( {item.title}
<Link </h3>
key={item.id} <p className="mt-2 text-[13px] text-[#9aa8c1]">
href={item.externalLink} {dayjs(item.publishedAt || item.createdAt).format("DD/MM/YYYY")}
className="flex min-h-[58px] gap-3 rounded-[14px] px-0.5 py-1 transition-colors hover:bg-[#f8fafe]" </p>
>
<span className="mt-1 h-[40px] w-[2px] shrink-0 rounded-full bg-[#f7b500]" />
<div className="min-w-0">
<h4 className="line-clamp-2 text-[15px] leading-[1.45] text-[#264798]">
{item.title}
</h4>
<p className="mt-1.5 text-[13px] text-[#9aa8c1]">
{dayjs(item.publishedAt || item.createdAt).format("DD/MM/YYYY")}
</p>
</div>
</Link>
) : (
<div
key={`business-placeholder-${index}`}
className="flex min-h-[58px] gap-3 rounded-[14px] px-0.5 py-1"
>
<span className="mt-1 h-[40px] w-[2px] shrink-0 rounded-full bg-[#f7b500]/40" />
<div className="min-w-0 flex-1">
<div className="h-5 w-5/6 rounded bg-[#eef3fb]" />
<div className="mt-1.5 h-4 w-24 rounded bg-[#f4f7fb]" />
</div>
</div> </div>
),
)} <div className="min-w-0 group-hover:hidden">
</div> <h3 className="line-clamp-2 text-[15px] leading-[1.45] text-[#264798] md:text-[16px]">
{item.title}
</h3>
<p className="mt-1.5 text-[13px] text-[#9aa8c1]">
{dayjs(item.publishedAt || item.createdAt).format("DD/MM/YYYY")}
</p>
</div>
</Link>
) : (
<div
key={`business-placeholder-${index}`}
className={`flex min-h-[58px] gap-3 rounded-[14px] px-0.5 py-1 ${index === 0 ? "pt-0.5" : ""}`}
>
<span className="mt-1 h-[40px] w-[2px] shrink-0 rounded-full bg-[#f7b500]/40" />
<div className="min-w-0 flex-1">
<div className="h-5 w-5/6 rounded bg-[#eef3fb]" />
<div className="mt-1.5 h-4 w-24 rounded bg-[#f4f7fb]" />
</div>
</div>
),
)}
</div> </div>
</section> </section>
); );
......
src/app/(main)/(home)/components/events-calendar/index.tsx
View file @ 878bfb2f
...@@ -37,14 +37,21 @@ function EventsCalendar({ ...@@ -37,14 +37,21 @@ function EventsCalendar({
className?: string; className?: string;
compact?: boolean; compact?: boolean;
}) { }) {
const today = dayjs();
const todayKey = today.format("YYYY-MM-DD");
const todayMonth = today.month();
const todayYear = today.year();
const [currentMonth, setCurrentMonth] = useState(new Date()); const [currentMonth, setCurrentMonth] = useState(new Date());
const [selectedDateKey, setSelectedDateKey] = useState<string | null>(null); const [selectedDateKey, setSelectedDateKey] = useState<string | null>(null);
const eventCalendarQuery = useEventCalendarPosts(currentMonth); const eventCalendarQuery = useEventCalendarPosts(currentMonth);
const monthEvents = eventCalendarQuery.data ?? []; const monthEvents = eventCalendarQuery.data ?? [];
useEffect(() => { useEffect(() => {
setSelectedDateKey(null); const viewingCurrentMonth =
}, [currentMonth]); currentMonth.getMonth() === todayMonth && currentMonth.getFullYear() === todayYear;
setSelectedDateKey(viewingCurrentMonth ? todayKey : null);
}, [currentMonth, todayKey, todayMonth, todayYear]);
const days = useMemo(() => { const days = useMemo(() => {
const monthStart = startOfMonth(currentMonth); const monthStart = startOfMonth(currentMonth);
...@@ -80,7 +87,6 @@ function EventsCalendar({ ...@@ -80,7 +87,6 @@ function EventsCalendar({
const selectedEvents = selectedDateKey ? eventMap.get(selectedDateKey) ?? [] : []; const selectedEvents = selectedDateKey ? eventMap.get(selectedDateKey) ?? [] : [];
const highlightedEvents = selectedEvents.length > 0 ? selectedEvents : monthEvents.slice(0, 1); const highlightedEvents = selectedEvents.length > 0 ? selectedEvents : monthEvents.slice(0, 1);
const todayKey = dayjs().format("YYYY-MM-DD");
return ( return (
<aside <aside
...@@ -173,16 +179,14 @@ function EventsCalendar({ ...@@ -173,16 +179,14 @@ function EventsCalendar({
isToday && inMonth && !selectable && "bg-[#eef3fb] font-semibold text-[#24469c] ring-2 ring-[#d7e2f5]", isToday && inMonth && !selectable && "bg-[#eef3fb] font-semibold text-[#24469c] ring-2 ring-[#d7e2f5]",
variant === "training" && "bg-[#ffbc11] font-semibold text-[#163b73]", variant === "training" && "bg-[#ffbc11] font-semibold text-[#163b73]",
variant === "event" && "bg-[#1e3f9a] font-semibold text-white", variant === "event" && "bg-[#1e3f9a] font-semibold text-white",
variant === "mixed" && variant === "mixed" && "bg-[#1e3f9a] font-semibold text-white",
"bg-[#1e3f9a] font-semibold text-white ring-2 ring-[#ffbc11] ring-offset-2 ring-offset-white",
selectable selectable
? "cursor-pointer hover:scale-[1.04] hover:shadow-[0_10px_20px_rgba(36,70,156,0.16)]" ? "cursor-pointer hover:scale-[1.04] hover:shadow-[0_10px_20px_rgba(36,70,156,0.16)]"
: "cursor-default", : "cursor-default",
selected && variant !== "mixed" && "ring-2 ring-[#f7b500] ring-offset-2 ring-offset-white", selected && "ring-2 ring-[#f7b500] ring-offset-2 ring-offset-white",
isToday && isToday &&
selectable && selectable &&
!selected && !selected &&
variant !== "mixed" &&
"ring-2 ring-[#9fb3db] ring-offset-2 ring-offset-white", "ring-2 ring-[#9fb3db] ring-offset-2 ring-offset-white",
)} )}
> >
......
src/app/(main)/(home)/components/policies-and-laws/index.tsx
View file @ 878bfb2f
...@@ -7,8 +7,7 @@ import Link from "next/link"; ...@@ -7,8 +7,7 @@ import Link from "next/link";
function PolicyAndLaws() { function PolicyAndLaws() {
const { policyPosts, categoryLinks, categoryNames } = useHomePosts(); const { policyPosts, categoryLinks, categoryNames } = useHomePosts();
const policyItems = policyPosts; const listSlots = Array.from({ length: 4 }, (_, index) => policyPosts[index] ?? null);
const listSlots = Array.from({ length: 4 }, (_, index) => policyItems[index] ?? null);
const sectionLink = const sectionLink =
categoryLinks.get(categoryNames.chinhSachPhapLuat.toLowerCase()) ?? categoryLinks.get(categoryNames.chinhSachPhapLuat.toLowerCase()) ??
"/thong-tin-truyen-thong/thong-tin-chinh-sach-va-phap-luat"; "/thong-tin-truyen-thong/thong-tin-chinh-sach-va-phap-luat";
...@@ -31,18 +30,28 @@ function PolicyAndLaws() { ...@@ -31,18 +30,28 @@ function PolicyAndLaws() {
</Link> </Link>
</div> </div>
<div className="flex min-h-[270px] flex-1 flex-col justify-between gap-2.5"> <div className="flex min-h-[270px] flex-1 flex-col gap-2.5">
{listSlots.map((item, index) => {listSlots.map((item, index) =>
item ? ( item ? (
<Link <Link
key={item.id} key={item.id}
href={item.externalLink} href={item.externalLink}
className={`flex min-h-[58px] gap-3 rounded-[14px] px-0.5 py-1 transition-colors hover:bg-[#f8fafe] ${ className={`group flex min-h-[58px] gap-3 rounded-[18px] px-4 py-3 transition-all duration-200 hover:bg-[#f5f7fb] hover:shadow-[0_10px_24px_rgba(36,70,156,0.08)] ${
index === 0 ? "pt-0.5" : "" index === 0 ? "pt-3.5" : ""
}`} }`}
> >
<span className="mt-1 h-[40px] w-[2px] shrink-0 rounded-full bg-[#f7b500]" /> <span className="mt-1 h-[40px] w-[2px] shrink-0 rounded-full bg-[#f7b500] transition-opacity duration-200 group-hover:opacity-0" />
<div className="min-w-0">
<div className="hidden min-w-0 group-hover:block">
<h3 className="line-clamp-2 text-[16px] font-bold leading-[1.45] text-[#264798] md:text-[17px]">
{item.title}
</h3>
<p className="mt-2 text-[13px] text-[#9aa8c1]">
{dayjs(item.publishedAt || item.createdAt).format("DD/MM/YYYY")}
</p>
</div>
<div className="min-w-0 group-hover:hidden">
<h3 className="line-clamp-2 text-[15px] leading-[1.45] text-[#264798] md:text-[16px]"> <h3 className="line-clamp-2 text-[15px] leading-[1.45] text-[#264798] md:text-[16px]">
{item.title} {item.title}
</h3> </h3>
......
src/app/(main)/[...slug]/templates/information-pages/MarketProfilePage.tsx
View file @ 878bfb2f
...@@ -234,8 +234,7 @@ export default function MarketProfilePage({ post }: MarketProfilePageProps) { ...@@ -234,8 +234,7 @@ export default function MarketProfilePage({ post }: MarketProfilePageProps) {
</p> </p>
<div className="mt-7 overflow-hidden rounded-[30px] border border-[#dce7f7] bg-white shadow-[0_18px_42px_rgba(17,24,39,0.06)]"> <div className="mt-7 overflow-hidden rounded-[30px] border border-[#dce7f7] bg-white shadow-[0_18px_42px_rgba(17,24,39,0.06)]">
<div className="grid gap-0 lg:grid-cols-[minmax(0,1.2fr)_minmax(280px,0.8fr)]"> <div className="relative min-h-[280px] bg-[#f3f7ff] p-4 sm:p-5">
<div className="relative min-h-[320px] bg-[#f3f7ff] p-4 sm:p-6">
<div className="absolute inset-x-4 top-4 z-10 flex flex-wrap gap-2 sm:inset-x-6 sm:top-6"> <div className="absolute inset-x-4 top-4 z-10 flex flex-wrap gap-2 sm:inset-x-6 sm:top-6">
{activeRegion.markets.map((item) => ( {activeRegion.markets.map((item) => (
<a <a
...@@ -256,60 +255,10 @@ export default function MarketProfilePage({ post }: MarketProfilePageProps) { ...@@ -256,60 +255,10 @@ export default function MarketProfilePage({ post }: MarketProfilePageProps) {
alt={activeRegion.imageAlt} alt={activeRegion.imageAlt}
width={1200} width={1200}
height={900} height={900}
className="h-full min-h-[320px] w-full rounded-[24px] object-cover transition-all duration-300" className="h-full min-h-[280px] w-full rounded-[24px] object-cover object-center transition-all duration-300"
/> />
</div> </div>
<div className="flex flex-col justify-between bg-linear-to-br from-[#0f418f] to-[#1a2f65] p-6 text-white">
<div>
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-white/72">
Tài liệu tham khảo
</p>
<h2 className="mt-3 text-[28px] font-bold leading-tight">
Tra cứu nhanh theo từng thị trường
</h2>
<p className="mt-4 text-sm leading-7 text-white/82">
Dữ liệu mẫu được dựng từ nguồn website bạn gửi, cho phép chuyển nhanh giữa các khu vực để thay đổi phần hình ảnh và nhóm thị trường đang hiển thị.
</p>
</div>
<div className="mt-6 space-y-3">
{activeRegion.featuredDocument ? (
<a
href={activeRegion.featuredDocument.href}
target="_blank"
rel="noreferrer"
className="flex items-center justify-between rounded-[22px] bg-white/10 px-4 py-3 transition-colors hover:bg-white/16"
>
<div>
<p className="text-sm font-semibold text-white">
{activeRegion.featuredDocument.title}
</p>
<p className="mt-1 text-xs text-white/70">
{activeRegion.featuredDocument.description}
</p>
</div>
<ArrowDownToLine className="h-5 w-5 shrink-0 text-[#ffca4f]" />
</a>
) : (
<div className="rounded-[22px] bg-white/10 px-4 py-3">
<p className="text-sm font-semibold text-white">Nguồn tài liệu</p>
<p className="mt-1 text-xs leading-6 text-white/74">
Khu vực này hiện đã có khối chuyển hình ảnh và danh sách thị trường; tài liệu chi tiết sẽ được bổ sung khi có nguồn riêng tương ứng.
</p>
</div>
)}
<div className="rounded-[22px] border border-white/12 bg-white/8 px-4 py-3">
<p className="text-sm font-semibold text-white">Gợi ý sử dụng</p>
<p className="mt-1 text-xs leading-6 text-white/74">
Khi API của trang có nội dung thật, phần UI mẫu này sẽ tự nhường chỗ cho dữ liệu bài viết từ hệ thống.
</p>
</div>
</div>
</div>
</div> </div>
</div>
</div> </div>
<aside className="rounded-[28px] border border-[#e6eefb] bg-[#fbfcff] p-6 shadow-[0_18px_42px_rgba(17,24,39,0.05)] xl:sticky xl:top-24"> <aside className="rounded-[28px] border border-[#e6eefb] bg-[#fbfcff] p-6 shadow-[0_18px_42px_rgba(17,24,39,0.05)] xl:sticky xl:top-24">
......
src/app/(main)/_lib/layout/footer.tsx
View file @ 878bfb2f
...@@ -70,9 +70,9 @@ const getSocialIcon = (key: string): React.ReactNode => { ...@@ -70,9 +70,9 @@ const getSocialIcon = (key: string): React.ReactNode => {
const quickLinks = [ const quickLinks = [
{ label: "Giới thiệu", href: "/gioi-thieu" }, { label: "Giới thiệu", href: "/gioi-thieu" },
{ label: "Hội viên", href: "/danh-ba-hoi-vien" }, { label: "Hội viên", href: "/hoi-vien/loi-ich-hoi-vien-vcci" },
{ label: "Hoạt động", href: "/hoat-dong/tin-tuc" }, { label: "Hoạt động", href: "/hoat-dong/su-kien" },
{ label: "Xúc tiến Thương mại", href: "/xuc-tien-thuong-mai/co-hoi/" }, { label: "Xúc tiến Thương mại", href: "/xuc-tien-thuong-mai/ho-so-thi-truong" },
]; ];
const isValidEmail = (value: string) => const isValidEmail = (value: string) =>
......
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