'init'

app/components/MentionList/MentionRow.tsx

@@ -0,0 +1,39 @@
+import { Avatar, Flex, Text, useMantineTheme } from "@mantine/core";
+import { useRosettaColors } from "@/app/hooks/useRosettaColors";
+import { useAvatars } from "@/app/providers/AvatarProvider/useAvatars";
+import { Mention } from "./MentionList";
+
+interface MentionRowProps extends Mention {
+    selected?: boolean;
+}
+
+export function MentionRow(props : MentionRowProps) {
+    const colors = useRosettaColors();
+    const avatars = useAvatars(props.publicKey, false);
+    const theme = useMantineTheme();
+
+    return (
+        <Flex align={'center'} bg={props.selected ? theme.colors.blue[8] + "10" : undefined} style={{
+            cursor: 'pointer'
+        }} gap={'sm'} p={'xs'} direction={'row'}>
+            {props.username == 'all' && <Avatar title="@" variant="filled" color={colors.brandColor}>@</Avatar>}
+            {props.username == 'admin' && <Avatar title="@" variant="filled" color={colors.error}>@</Avatar>}
+            {props.username != 'all' && props.username != 'admin' && <Avatar 
+                title={props.title} 
+                variant="filled" 
+                color="initials"
+                src={avatars.length > 0 ? avatars[0].avatar : null}
+            ></Avatar>}
+            <Flex direction={'column'}>
+                <Flex justify={'row'} align={'center'} gap={3}>
+                    <Text size="sm" fw={500}>
+                        {props.username == 'all' && 'All users'}
+                        {props.username == 'admin' && 'Administrator'}
+                        {props.username != 'all' && props.username != 'admin' && props.title}
+                    </Text>
+                </Flex>
+                <Text size={'xs'} c={'dimmed'}>@{props.username}</Text>
+            </Flex>
+        </Flex>
+    )
+}