import Image from "next/image"; import { useTheme } from "next-themes"; // assets import DarkImage1 from "public/empty-state/dashboard/dark/recent-collaborators-1.svg"; import DarkImage2 from "public/empty-state/dashboard/dark/recent-collaborators-2.svg"; import DarkImage3 from "public/empty-state/dashboard/dark/recent-collaborators-3.svg"; import LightImage1 from "public/empty-state/dashboard/light/recent-collaborators-1.svg"; import LightImage2 from "public/empty-state/dashboard/light/recent-collaborators-2.svg"; import LightImage3 from "public/empty-state/dashboard/light/recent-collaborators-3.svg"; export const RecentCollaboratorsEmptyState = () => { // next-themes const { resolvedTheme } = useTheme(); const image1 = resolvedTheme === "dark" ? DarkImage1 : LightImage1; const image2 = resolvedTheme === "dark" ? DarkImage2 : LightImage2; const image3 = resolvedTheme === "dark" ? DarkImage3 : LightImage3; return ( <div className="mt-7 mb-16 px-36 flex flex-col lg:flex-row items-center justify-between gap-x-24 gap-y-16"> <p className="text-sm font-medium text-custom-text-300 lg:w-2/5 flex-shrink-0 text-center lg:text-left"> Compare your activities with the top <br /> seven in your project. </p> <div className="flex items-center justify-evenly gap-20 lg:w-3/5 flex-shrink-0"> <div className="h-24 w-24 flex-shrink-0"> <Image src={image1} className="w-full h-full" alt="Recent collaborators" /> </div> <div className="h-24 w-24 flex-shrink-0"> <Image src={image2} className="w-full h-full" alt="Recent collaborators" /> </div> <div className="h-24 w-24 flex-shrink-0 hidden xl:block"> <Image src={image3} className="w-full h-full" alt="Recent collaborators" /> </div> </div> </div> ); };