30 lines
1.3 KiB
JavaScript
30 lines
1.3 KiB
JavaScript
import { Card, CardBody, Image, Stack, Heading, Text, AspectRatio, LinkBox, LinkOverlay } from "@chakra-ui/react";
|
|
|
|
const CharacterCard = (props) => {
|
|
return (
|
|
<Card maxWidth="sm" h="100%">
|
|
<CardBody p="0">
|
|
<LinkBox>
|
|
<LinkOverlay href={"/chat/" + props.charId}>
|
|
<AspectRatio maxWidth="100%" ratio={1}>
|
|
<Image
|
|
src={props.image}
|
|
alt={props.alt}
|
|
borderRadius="8px 8px 0 0"
|
|
width="100%"
|
|
height="100%"
|
|
/>
|
|
</AspectRatio>
|
|
</LinkOverlay>
|
|
</LinkBox>
|
|
<Stack mt="6" spacing="3" m="0.5rem" maxHeight="9rem">
|
|
<Heading size="md" className="line-clamp" overflow="hidden" textOverflow="ellipsis">{props.name}</Heading>
|
|
<Text fontStyle="italic" fontSize="0.75rem">@{props.creator}</Text>
|
|
<Text fontSize="0.75rem" overflow="hidden" textOverflow="ellipsis" className="line-clamp-2">{props.description}</Text>
|
|
</Stack>
|
|
</CardBody>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default CharacterCard; |