70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
import type { CmsPartnerContent } from "@/types/cms-landing";
|
|
|
|
const FALLBACK: { name: string; src: string }[] = [
|
|
{ name: "Tableau", src: "/image/tableu.png" },
|
|
{ name: "TVU Networks", src: "/image/tvu.png" },
|
|
{ name: "AWS", src: "/image/aws.png" },
|
|
{ name: "Dell", src: "/image/dell.png" },
|
|
{ name: "Zenlayer", src: "/image/zen.png" },
|
|
{ name: "Ui", src: "/image/uipath.png" },
|
|
];
|
|
|
|
export default function Technology({
|
|
partners,
|
|
}: {
|
|
partners?: CmsPartnerContent[] | null;
|
|
}) {
|
|
const list =
|
|
partners && partners.length > 0
|
|
? partners.map((p) => ({
|
|
name: p.primary_title,
|
|
src: p.image_url || p.image_path || "",
|
|
}))
|
|
: FALLBACK;
|
|
|
|
const loop = [...list, ...list];
|
|
|
|
return (
|
|
<section className="relative overflow-hidden bg-gradient-to-r from-[#faf6ee] to-[#f4efe6] py-14">
|
|
<div className="container mx-auto px-6">
|
|
<p className="mb-8 text-center text-lg font-semibold tracking-widest text-gray-500">
|
|
TECHNOLOGY PARTNERS
|
|
</p>
|
|
|
|
<div className="relative w-full overflow-hidden">
|
|
<div className="flex w-max animate-tech-scroll gap-2">
|
|
{loop.map((tech, index) => (
|
|
<div
|
|
key={`${tech.name}-${index}`}
|
|
className="flex min-w-[140px] items-center justify-center opacity-80 transition hover:opacity-100"
|
|
>
|
|
{tech.src && /^https?:\/\//i.test(tech.src) ? (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={tech.src}
|
|
alt={tech.name}
|
|
width={120}
|
|
height={80}
|
|
className="max-h-[80px] object-contain"
|
|
/>
|
|
) : tech.src ? (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={tech.src}
|
|
alt={tech.name}
|
|
width={120}
|
|
height={50}
|
|
className="object-contain"
|
|
/>
|
|
) : (
|
|
<span className="text-sm text-gray-500">{tech.name}</span>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|