kopia lustrzana https://github.com/bugout-dev/moonstream
88 wiersze
1.8 KiB
JavaScript
88 wiersze
1.8 KiB
JavaScript
import React from "react";
|
|
import {
|
|
Heading,
|
|
Avatar,
|
|
Box,
|
|
Center,
|
|
Text,
|
|
Stack,
|
|
Badge,
|
|
useColorModeValue,
|
|
} from "@chakra-ui/react";
|
|
|
|
export default function SocialProfileSimple({
|
|
avatarURL,
|
|
avatarAlt,
|
|
name,
|
|
atName,
|
|
content,
|
|
badges,
|
|
isOnline,
|
|
buttons,
|
|
}) {
|
|
const badgeBg = useColorModeValue("gray.50", "gray.800");
|
|
return (
|
|
<Center py={6}>
|
|
<Box
|
|
maxW={"320px"}
|
|
h="420px"
|
|
w={"full"}
|
|
borderRadius="20px"
|
|
border="1px solid white"
|
|
p={6}
|
|
textAlign={"center"}
|
|
>
|
|
<Avatar
|
|
size={"xl"}
|
|
src={avatarURL}
|
|
alt={avatarAlt}
|
|
mb={4}
|
|
pos={"relative"}
|
|
bg="white"
|
|
_after={
|
|
isOnline && {
|
|
content: '""',
|
|
w: 4,
|
|
h: 4,
|
|
bg: "green.300",
|
|
border: "2px solid white",
|
|
rounded: "full",
|
|
pos: "absolute",
|
|
bottom: 0,
|
|
right: 3,
|
|
}
|
|
}
|
|
/>
|
|
<Heading fontSize={"2xl"} fontFamily={"body"}>
|
|
{name}
|
|
</Heading>
|
|
<Text fontWeight={600} color={"blue.850"} mb={4}>
|
|
{atName}
|
|
</Text>
|
|
<Text textAlign={"center"} px={3}>
|
|
{content}
|
|
</Text>
|
|
|
|
<Stack align={"center"} justify={"center"} direction={"row"} mt={6}>
|
|
{badges &&
|
|
badges.map((badgeContent, idx) => (
|
|
<Badge
|
|
key={`badge-card-${name}-${idx}`}
|
|
px={2}
|
|
py={1}
|
|
bg={badgeBg}
|
|
fontWeight={"400"}
|
|
>
|
|
{badgeContent}
|
|
</Badge>
|
|
))}
|
|
</Stack>
|
|
|
|
<Stack mt={8} direction={"row"} spacing={4}>
|
|
{buttons}
|
|
</Stack>
|
|
</Box>
|
|
</Center>
|
|
);
|
|
}
|