adilallo
74 lines
1.4 KiB
TypeScript
74 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { memo, useState, useEffect, useMemo } from "react";
|
|
import LogoWallView from "./LogoWall.view";
|
|
import type { LogoWallProps } from "./LogoWall.types";
|
|
|
|
const defaultLogos = [
|
|
{
|
|
src: "/assets/logo-1.svg",
|
|
alt: "Partner Logo 1",
|
|
width: 120,
|
|
height: 40,
|
|
},
|
|
{
|
|
src: "/assets/logo-2.svg",
|
|
alt: "Partner Logo 2",
|
|
width: 120,
|
|
height: 40,
|
|
},
|
|
{
|
|
src: "/assets/logo-3.svg",
|
|
alt: "Partner Logo 3",
|
|
width: 120,
|
|
height: 40,
|
|
},
|
|
{
|
|
src: "/assets/logo-4.svg",
|
|
alt: "Partner Logo 4",
|
|
width: 120,
|
|
height: 40,
|
|
},
|
|
{
|
|
src: "/assets/logo-5.svg",
|
|
alt: "Partner Logo 5",
|
|
width: 120,
|
|
height: 40,
|
|
},
|
|
{
|
|
src: "/assets/logo-6.svg",
|
|
alt: "Partner Logo 6",
|
|
width: 120,
|
|
height: 40,
|
|
},
|
|
];
|
|
|
|
const LogoWallContainer = memo<LogoWallProps>(
|
|
({ logos, className = "" }) => {
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
|
|
const displayLogos = useMemo(() => logos || defaultLogos, [logos]);
|
|
|
|
useEffect(() => {
|
|
// Trigger fade-in animation after component mounts
|
|
const timer = setTimeout(() => {
|
|
setIsVisible(true);
|
|
}, 100);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
return (
|
|
<LogoWallView
|
|
isVisible={isVisible}
|
|
displayLogos={displayLogos}
|
|
className={className}
|
|
/>
|
|
);
|
|
},
|
|
);
|
|
|
|
LogoWallContainer.displayName = "LogoWall";
|
|
|
|
export default LogoWallContainer;
|