-
Zaki authoredf92fbb94
PodcasterCard.tsx 2.21 KiB
import {
Text,
Image,
Card,
CardBody,
Heading,
Stack
} from "@chakra-ui/react";
interface PodcasterCardProp {
title: string;
image: string;
description: string;
}
const PodcasterCard: React.FC<PodcasterCardProp> = ({ title, image, description }) => {
return (
<Card
maxW={"sm"}
borderRadius={"md"}
color={"white"}
my={3}
mx={4}
bg={"#181818"}
_hover={{
bg: "#2a2a2a",
cursor: "pointer",
}}
>
<CardBody
p={4}
maxW={"md"}
display={"flex"}
flexDirection={"column"}
alignItems={"start"}
justifyContent={"flex-start"}
>
<Image
src={image}
alt="thumbnail"
width={"140x"}
height={"140px"}
borderRadius={"md"}
mb={4}
/>
<Stack
spacing='2'
maxW={"140px"}
textAlign={"start"}
>
<Heading
fontSize='18px'
style={{
display: "-webkit-box",
WebkitLineClamp: 1,
WebkitBoxOrient: "vertical",
overflow: "hidden",
textOverflow: "ellipsis",
}}
>{title}</Heading>
<Text
fontSize='14px'
style={{
display: "-webkit-box",
WebkitLineClamp: 2,
WebkitBoxOrient: "vertical",
overflow: "hidden",
textOverflow: "ellipsis",
}}
color={"#b0b0b0"}
>
{description}
</Text>
</Stack>
</CardBody>
</Card>
);
}
export default PodcasterCard;