plane/web/components/dashboard/widgets/empty-states/recent-collaborators.tsx
Aaryan Khandelwal 53b41481a2
chore: dashboard empty states, fetching logic (#3455)
* chore: remove one-time fetching

* chore: update empty states

* chore: updated icons

* chore: empty state content
2024-01-24 19:41:02 +05:30

40 lines
1.8 KiB
TypeScript

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>
);
};