yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { UsersIcon } from "@heroicons/react/24/outline";
2import type { AccountFragment } from "@hey/indexer";
3import { motion } from "motion/react";
4import { Virtualizer } from "virtua";
5import DismissRecommendedAccount from "@/components/Shared/Account/DismissRecommendedAccount";
6import SingleAccount from "@/components/Shared/Account/SingleAccount";
7import { EmptyState } from "@/components/Shared/UI";
8import cn from "@/helpers/cn";
9import { useAccountStore } from "@/store/persisted/useAccountStore";
10import { accountsList } from "@/variants";
11
12interface SuggestedProps {
13 accounts: AccountFragment[];
14}
15
16const Suggested = ({ accounts }: SuggestedProps) => {
17 const { currentAccount } = useAccountStore();
18
19 if (!accounts.length) {
20 return (
21 <EmptyState
22 hideCard
23 icon={<UsersIcon className="size-8" />}
24 message="Nothing to suggest"
25 />
26 );
27 }
28
29 return (
30 <div className="max-h-[80vh] overflow-y-auto">
31 <Virtualizer>
32 {accounts.slice(5).map((account, index) => (
33 <motion.div
34 animate="visible"
35 className={cn(
36 "divider flex items-start space-x-3 p-5",
37 index === accounts.slice(5).length - 1 && "border-b-0"
38 )}
39 initial="hidden"
40 key={account.address}
41 variants={accountsList}
42 >
43 <div className="w-full">
44 <SingleAccount
45 account={account}
46 hideFollowButton={currentAccount?.address === account.address}
47 hideUnfollowButton={currentAccount?.address === account.address}
48 showBio
49 showUserPreview={false}
50 />
51 </div>
52 <div className="mt-3.5">
53 <DismissRecommendedAccount account={account} />
54 </div>
55 </motion.div>
56 ))}
57 </Virtualizer>
58 </div>
59 );
60};
61
62export default Suggested;