fix: agenda, qrcode, carousel

This commit is contained in:
2026-07-13 23:41:12 +07:00
parent c7a90c890c
commit b4f7b33758
10 changed files with 121 additions and 18 deletions
+50 -6
View File
@@ -5,6 +5,7 @@ type AgendaItem = {
time: string;
title: string;
description: string;
avatar?: string;
};
type Props = {
@@ -53,6 +54,25 @@ const renderFormattedText = (text: string) => {
};
export default function AgendaSection({ data }: Props) {
const base = process.env.NEXT_PUBLIC_BASE_PATH || "";
const renderAvatar = (avatarUrl: string, sizeClass: string) => (
<div className={`${sizeClass} rounded-full overflow-hidden border border-primary/20 bg-white/5 flex items-center justify-center backdrop-blur-sm shadow-inner shrink-0`}>
{avatarUrl.includes("placeholder") ? (
<svg className="w-1/2 h-1/2 text-primary/60" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
</svg>
) : (
// eslint-disable-next-line @next/next/no-img-element
<img
src={`${base}${avatarUrl}`}
alt="Speaker"
className="w-full h-full object-cover"
/>
)}
</div>
);
return (
<section className="py-16 lg:py-24 max-w-hd mx-auto px-[var(--spacing-gutter)]" id={data.id}>
{/* Section Header */}
@@ -108,12 +128,24 @@ export default function AgendaSection({ data }: Props) {
{item.time}
</span>
</div>
<h3 className="font-[var(--font-display-lg)] text-base lg:text-lg text-on-surface mb-3 leading-snug pr-8">
<h3 className="font-[var(--font-display-lg)] text-base lg:text-lg text-on-surface mb-3 leading-snug text-balance pr-8">
{renderFormattedText(item.title)}
</h3>
{!item.description && item.avatar && (
<div className="flex lg:justify-end justify-start mb-3">
{renderAvatar(item.avatar, "w-10 h-10 lg:w-12 lg:h-12")}
</div>
)}
{item.description && (
<div className="text-xs lg:text-sm text-on-surface-variant/75 leading-relaxed border-t border-primary/10 pt-3 mt-3">
{renderFormattedText(item.description)}
<div className="text-xs lg:text-sm text-on-surface-variant/75 leading-relaxed border-t border-primary/10 pt-3 mt-3 flex flex-row lg:flex-row-reverse items-center gap-4">
{item.avatar && (
<div className="shrink-0">
{renderAvatar(item.avatar, "w-10 h-10 lg:w-12 lg:h-12")}
</div>
)}
<div className="flex-1 lg:text-right">
{renderFormattedText(item.description)}
</div>
</div>
)}
</div>
@@ -147,12 +179,24 @@ export default function AgendaSection({ data }: Props) {
{item.time}
</span>
</div>
<h3 className="font-[var(--font-display-lg)] text-base lg:text-lg text-on-surface mb-3 leading-snug pr-8">
<h3 className="font-[var(--font-display-lg)] text-base lg:text-lg text-on-surface mb-3 leading-snug text-balance pr-8">
{renderFormattedText(item.title)}
</h3>
{!item.description && item.avatar && (
<div className="flex justify-start mb-3">
{renderAvatar(item.avatar, "w-10 h-10 lg:w-12 lg:h-12")}
</div>
)}
{item.description && (
<div className="text-xs lg:text-sm text-on-surface-variant/75 leading-relaxed border-t border-primary/10 pt-3 mt-3">
{renderFormattedText(item.description)}
<div className="text-xs lg:text-sm text-on-surface-variant/75 leading-relaxed border-t border-primary/10 pt-3 mt-3 flex flex-row items-center gap-4">
{item.avatar && (
<div className="shrink-0">
{renderAvatar(item.avatar, "w-10 h-10 lg:w-12 lg:h-12")}
</div>
)}
<div className="flex-1">
{renderFormattedText(item.description)}
</div>
</div>
)}
</div>
+1
View File
@@ -2,6 +2,7 @@
// Tên file chính xác trong public/assets/img/carousel/
const ROW_1 = [
{ name: "IEAS", file: "ieas.png" },
{ name: "NVIDIA", file: "Nvidia_logo.svg.png" },
{ name: "Maxis", file: "Maxis-logo.png" },
{ name: "Singtel", file: "Singtel_logo.svg.png" },