63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import { Avatar, Badge, Card, Flex, Separator, Text } from "@radix-ui/themes";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { useAtomValue } from "jotai";
|
|
import { userAtom } from "../../AtomStore/AtomStore";
|
|
import { axiosLocalhost } from "../../api/axios/axios";
|
|
|
|
type TUserCard = {
|
|
username?: string;
|
|
userId?: string;
|
|
};
|
|
|
|
export default function UserCard(props: TUserCard) {
|
|
const user = useAtomValue(userAtom);
|
|
|
|
const { data } = useQuery({
|
|
queryKey: [`userCard${props.userId}`],
|
|
queryFn: async () => {
|
|
const response = await axiosLocalhost.get(`/users/${props.userId}`);
|
|
return response.data;
|
|
},
|
|
enabled: !!props.userId,
|
|
});
|
|
|
|
const getInitials = (username: string): string => {
|
|
const result = username
|
|
.split(" ")
|
|
.map((word) => word[0].toUpperCase())
|
|
.join("");
|
|
|
|
return result;
|
|
};
|
|
|
|
const getUsername = (): string => {
|
|
if (!user || props.username) return props.username || "Nothing";
|
|
return user.username;
|
|
};
|
|
|
|
return (
|
|
<Card>
|
|
<Flex gap={"2"} direction={"column"}>
|
|
<Flex direction={"row"} gap={"2"} align={"center"}>
|
|
<Avatar
|
|
fallback={<div>{getInitials(getUsername())}</div>}
|
|
radius="full"
|
|
/>
|
|
<Flex className="flex-col ">
|
|
<Text>Test User</Text>
|
|
<Text size={"1"} color={"gray"}>
|
|
@testuser123
|
|
</Text>
|
|
</Flex>
|
|
</Flex>
|
|
<Separator size={"4"} />
|
|
<Flex gap={"2"}>
|
|
<Badge>test</Badge>
|
|
<Badge color="amber">user</Badge>
|
|
<Badge color="red">admin</Badge>
|
|
</Flex>
|
|
</Flex>
|
|
</Card>
|
|
);
|
|
}
|