'init'

app/components/ProfileCard/ProfileCard.tsx

@@ -0,0 +1,27 @@
+import { Flex, Paper, Text } from "@mantine/core";
+import { VerifiedBadge } from "../VerifiedBadge/VerifiedBadge";
+import { ActionAvatar } from "../ActionAvatar/ActionAvatar";
+
+interface ProfileCardProps {
+    title: string;
+    publicKey: string;
+    username: string;
+    verified: number;
+}
+
+export function ProfileCard(props : ProfileCardProps) {
+    return (
+        <Paper radius="md" p="lg" bg={'transparent'}>
+            <ActionAvatar title={props.title} publicKey={props.publicKey} />
+            <Flex align={'center'} mt={'md'} justify={'center'} gap={5}>
+                <Text ta="center" fz="lg" fw={500}>{props.title.trim() || props.publicKey.slice(0, 10)}</Text>
+                {props.verified > 0 && <VerifiedBadge verified={props.verified}></VerifiedBadge>}
+            </Flex>
+            <Text ta="center" c="dimmed" fz="sm">
+                {props.username.trim() == "" ? "" :
+                 "@" + props.username + " •"} {props.publicKey.slice(0, 3) + "..." +
+                     props.publicKey.slice(-3)}
+            </Text>
+        </Paper>
+    );
+}