Spaces:
Runtime error
Runtime error
File size: 2,210 Bytes
06a7653 18a7520 06a7653 bb62f4c 06a7653 bb62f4c 18a7520 06a7653 18a7520 bb62f4c 06a7653 18a7520 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 |
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={""}>
<CardBody className="h-[900px] p-5 flex flex-col justify-center items-center rounded-2xl bg-gray-900 " placeholder={""}>
{/* <img src={imageName} alt="next/image" className="w-512 h-512 mb-2"/> */}
<Typography variant="h4" className="text-center" color="white" placeholder="">
{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="">
{subTitle}
</Typography>
<Typography
placeholder={""}
color="white"
className="mt-2 mb-10 text-base w-full lg:w-10/12 text font-normal"
>
{description}
</Typography>
<Button color="white" placeholder={""}>
<Typography placeholder={""} color="blue-gray" className="mt-2 mb-2 text-base w-full lg:w-8/8 text-center font-normal">
<a href={paper_links} className="text-gray" target="_blank">
More Details
</a>
</Typography>
</Button>
</CardBody>
</Card>
);
}
function isVideo(filename: string) {
return ['.mp4', '.webm', '.ogg'].some(extension => filename.endsWith(extension));
}
export default AboutCard;
|