Spaces:
Runtime error
Runtime error
File size: 3,006 Bytes
06a7653 6873acf 06a7653 6873acf 06a7653 bb62f4c 06a7653 bb62f4c 18a7520 06a7653 18a7520 bb62f4c 6873acf 06a7653 6873acf 06a7653 18a7520 06a7653 eb9960b 06a7653 eb9960b 6873acf eb9960b 06a7653 6293bd3 bb62f4c 06a7653 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
import {
Card,
CardBody,
Typography,
Button,
} from "@material-tailwind/react";
import Image from 'next/image'
interface AboutCardProp {
title: string;
subTitle: string;
description: string;
imageName: string;
paper_links: string;
}
export function AboutCard({ title, description, subTitle,imageName,paper_links }: AboutCardProp) {
return (
<Card
shadow={false}
placeholder={""}
onPointerEnterCapture={() => {}}
onPointerLeaveCapture={() => {}}
>
<CardBody
className="h-[900px] p-5 flex flex-col justify-center items-center rounded-2xl bg-gray-900 "
placeholder={""}
onPointerEnterCapture={() => {}}
onPointerLeaveCapture={() => {}}
>
{/* <img src={imageName} alt="next/image" className="w-512 h-512 mb-2"/> */}
<Typography
variant="h4"
className="text-center"
color="white"
placeholder=""
onPointerEnterCapture={() => {}}
onPointerLeaveCapture={() => {}}
>
{title}
</Typography>
{isVideo(imageName) ? (
<video width="500" height="500" controls>
<source src={`/paper_image/${imageName}`} type="video/mp4" />
Your browser does not support the video tag.
</video>
) : (
<Image
src={`/paper_image/${imageName}`}
width={500}
height={500}
alt="next/image"
/>
)}
{/* <Image
src={`/paper_image/${imageName}`}
width={500}
height={500}
alt="next/image"
/> */}
<Typography variant="h6" className="mb-4 text-center" color="white" placeholder=""
onPointerEnterCapture={undefined}
onPointerLeaveCapture={undefined}
>
{subTitle}
</Typography>
<Typography
onPointerEnterCapture={undefined}
onPointerLeaveCapture={undefined}
variant="lead"
placeholder={""}
color="white"
className="mt-2 mb-10 text-base w-full lg:w-10/12 text font-normal"
>
{description}
</Typography>
<a href={paper_links} target="_blank">
<Button
color="white"
placeholder={""}
onPointerEnterCapture={() => {}}
onPointerLeaveCapture={() => {}}
>
<Typography
placeholder={""}
color="blue-gray"
className="m-0 mb-0 text-base w-full lg:w-6/6 text-center font-normal"
onPointerEnterCapture={() => {}}
onPointerLeaveCapture={() => {}}
>
More Details
</Typography>
</Button>
</a>
</CardBody>
</Card>
);
}
function isVideo(filename: string) {
return ['.mp4', '.webm', '.ogg'].some(extension => filename.endsWith(extension));
}
export default AboutCard;
|