'init'

app/components/UserRow/UserRow.tsx

@@ -0,0 +1,70 @@
+import { useRosettaColors } from "@/app/hooks/useRosettaColors";
+import { useAvatars } from "@/app/providers/AvatarProvider/useAvatars";
+import { useUserInformation } from "@/app/providers/InformationProvider/useUserInformation";
+import { Avatar, Flex, MantineColor, Text } from "@mantine/core";
+import { VerifiedBadge } from "../VerifiedBadge/VerifiedBadge";
+import { OnlineState } from "@/app/providers/ProtocolProvider/protocol/packets/packet.onlinestate";
+import { UserInformation } from "@/app/providers/InformationProvider/InformationProvider";
+
+export enum AdditionalType {
+    ONLINE,
+    USERNAME
+}
+
+export interface UserRowProps {
+    publicKey: string;
+    rightSection?: (publicKey: string) => React.ReactNode;
+    onClick?: (userInfo: UserInformation) => void;
+    renderCondition?: (userInfo: UserInformation) => boolean;
+    additionalType?: AdditionalType;
+    bg?: MantineColor;
+}
+
+export function UserRow(props: UserRowProps) {
+    const [userInfo] = useUserInformation(props.publicKey);
+    const avatars = useAvatars(props.publicKey, false);
+    const colors = useRosettaColors();
+
+    if(props.renderCondition && !props.renderCondition(userInfo)) {
+        return null;
+    }
+
+    return (
+        <Flex justify={'space-between'} bg={props.bg} align={'center'} p={'xs'} 
+            style={{ 
+                borderBottom: '1px solid var(--rosetta-border-color)',
+                cursor: props.onClick ? 'pointer' : 'default' 
+            }}>
+            <Flex align={'center'} direction={'row'} gap={10}>
+                <Avatar
+                    radius="xl"
+                    name={userInfo.title}
+                    color={'initials'}
+                    src={avatars.length > 0 ? avatars[0].avatar : undefined}
+                />
+                <Flex direction={'column'}>
+                    <Flex justify={'row'} align={'center'} gap={3}>
+                        <Text size="sm" fw={500}>{userInfo.title}</Text>
+                        <VerifiedBadge size={17} verified={userInfo.verified}></VerifiedBadge>
+                    </Flex>
+                    {!props.additionalType && (
+                        <Text size={'xs'} c={userInfo.online == OnlineState.ONLINE ? colors.success : 'dimmed'}>{userInfo.online == OnlineState.ONLINE ? 'online' : 'offline'}</Text>
+                    )}
+                    {props.additionalType === AdditionalType.ONLINE && (
+                        <Text size={'xs'} c={userInfo.online == OnlineState.ONLINE ? colors.success : 'dimmed'}>{userInfo.online == OnlineState.ONLINE ? 'online' : 'offline'}</Text>
+                    )}
+                    {props.additionalType === AdditionalType.USERNAME && (
+                        <Text size={'xs'} c={'dimmed'}>@{userInfo.username}</Text>
+                    )}
+                </Flex>
+            </Flex>
+            {props.rightSection && (
+                <Flex align={'center'} style={{
+                    cursor: 'pointer'
+                }} gap={'xs'} justify={'center'}>
+                    {props.rightSection(props.publicKey)}
+                </Flex>
+            )}
+        </Flex>
+    );
+}