'init'

app/components/SearchRow/SearchRow.tsx

@@ -0,0 +1,31 @@
+import { PacketSearchUser } from "@/app/providers/ProtocolProvider/protocol/packets/packet.search";
+import { Avatar, Flex, Text } from "@mantine/core";
+import classes from './SearchRow.module.css'
+import { VerifiedBadge } from "../VerifiedBadge/VerifiedBadge";
+import { useAvatars } from "@/app/providers/AvatarProvider/useAvatars";
+
+interface SearchRowProps {
+    user: PacketSearchUser;
+    onDialogClick: (publicKey: string) => void;
+}
+
+export function SearchRow(props: SearchRowProps) {
+    const avatars = useAvatars(props.user.publicKey, false);
+    return (
+        <Flex onContextMenu={() => props.onDialogClick(props.user.publicKey)} onClick={() => props.onDialogClick(props.user.publicKey)} className={classes.search_item} p={'sm'} direction={'row'} gap={'sm'}>
+            <Avatar
+                size={'md'}
+                color={'initials'}
+                name={props.user.title || props.user.publicKey}
+                src={avatars.length > 0 ? avatars[0].avatar : undefined}
+            ></Avatar>
+            <Flex direction={'column'}>
+                <Flex gap={3} align={'center'}>
+                    <Text fz={12}>{props.user.title || props.user.publicKey.slice(0, 10)}</Text>
+                    {props.user.verified > 0 && <VerifiedBadge hideTooltip size={15} verified={props.user.verified}></VerifiedBadge>}
+                </Flex>
+                <Text fz={10} c="dimmed">@{props.user.username || props.user.publicKey.slice(0, 10) +  "..."}</Text>
+            </Flex>
+        </Flex>
+    )
+}