69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
import { Container, Row } from "react-bootstrap";
|
|
import cld from "../../Cld/CloudinaryConfig";
|
|
import "./Musician.css";
|
|
import Headshot from "./Headshot/Headshot";
|
|
import MusicianBio from "./Bio/Bio";
|
|
import { useState } from "react";
|
|
|
|
export class MusicianObj {
|
|
id: number;
|
|
name: string;
|
|
bio: string;
|
|
headshot_id: string;
|
|
|
|
constructor(id: number, name: string, bio: string, headshot_id: string) {
|
|
this.id = id;
|
|
this.name = name;
|
|
this.bio = bio;
|
|
this.headshot_id = headshot_id;
|
|
}
|
|
}
|
|
|
|
export interface MusicianProps {
|
|
musician: MusicianObj;
|
|
onBioChange: () => void;
|
|
onHeadshotChange?: () => void;
|
|
token: string;
|
|
}
|
|
|
|
function Musician(props: MusicianProps) {
|
|
const [musician, setMusician] = useState<MusicianObj>(props.musician);
|
|
const textPosition = musician.id % 2 === 0 ? "text-end" : "text-start";
|
|
const image = cld.image(musician.headshot_id);
|
|
const imgUrl = image.toURL();
|
|
const musicianID = musician.name.split(" ").join("-").toLowerCase();
|
|
const key = `musician-${musician.id}`;
|
|
|
|
const bioCard = (
|
|
<MusicianBio
|
|
key={key}
|
|
musician={musician}
|
|
textPosition={textPosition}
|
|
onBioChange={props.onBioChange}
|
|
setMusician={setMusician}
|
|
token={props.token}
|
|
/>
|
|
);
|
|
|
|
const headshot = (
|
|
<Headshot
|
|
src={imgUrl}
|
|
key="headshot"
|
|
musician={musician}
|
|
onHeadshotChange={props?.onHeadshotChange}
|
|
setMusician={setMusician}
|
|
token={props.token}
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<Container id={musicianID} className="musician-container">
|
|
<Row className="row-spacing">
|
|
{musician.id % 2 === 0 ? [bioCard, headshot] : [headshot, bioCard]}
|
|
</Row>
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
export default Musician;
|