Files
MeganJohns/client/src/MjSection.tsx
2024-12-01 19:15:25 -08:00

34 lines
990 B
TypeScript

// import { Album } from "./types/Album";
import { Col, Container, Row } from "react-bootstrap";
import { Artwork } from "./types/Artwork";
import MjCard from "./MjCard/MjCard";
import { Album } from "./types/Album";
interface MjSectionProps {
sectionTitle: string;
works: Artwork[] | Album[];
}
export default function MjSection(props: MjSectionProps) {
const sectionTitleAsTitle =
props.sectionTitle.charAt(0).toUpperCase() + props.sectionTitle.slice(1);
const works = props.works;
return (
<section id={props.sectionTitle} className="content-section">
<h2>{sectionTitleAsTitle}</h2>
<Container>
<Row>
{works.map((work) => (
<Col
key={`${props.sectionTitle}-${work.id}`}
className="d-flex justify-content-center align-items-center"
>
<MjCard type={props.sectionTitle} work={work} />
</Col>
))}
</Row>
</Container>
</section>
);
}