forked from UKSOURCE/ipv6
fix: agenda, qrcode, carousel
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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" },
|
||||
|
||||
Reference in New Issue
Block a user