66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
import * as React from "react";
|
|
import { IExtractedComicBookCoverFile } from "../../server/interfaces/folder.interface";
|
|
import { map, isUndefined, isEmpty } from "lodash";
|
|
|
|
interface IProps {
|
|
comicBookCoversMetadata: IExtractedComicBookCoverFile;
|
|
}
|
|
interface IState {}
|
|
|
|
class Card extends React.Component<IProps, IState> {
|
|
constructor(props: IProps) {
|
|
super(props);
|
|
}
|
|
private removeLeadingPeriod = (input: string): string => {
|
|
if (!isUndefined(this.props.comicBookCoversMetadata)) {
|
|
if (input.charAt(0) == ".") {
|
|
input = input.substr(1);
|
|
}
|
|
}
|
|
return input;
|
|
};
|
|
public drawCoverCard = (
|
|
metadata: IExtractedComicBookCoverFile,
|
|
): JSX.Element => {
|
|
return (
|
|
<div>
|
|
<div className="card">
|
|
<div>
|
|
<div className="card-image">
|
|
<figure className="image">
|
|
<img
|
|
src={
|
|
"http://localhost:3000" +
|
|
this.removeLeadingPeriod(metadata.path) +
|
|
"/" +
|
|
metadata.name
|
|
}
|
|
alt="Placeholder image"
|
|
/>
|
|
</figure>
|
|
</div>
|
|
<div className="card-content">
|
|
<ul>
|
|
<li className="has-text-weight-semibold">{metadata.name}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
public render() {
|
|
console.log(this.props.comicBookCoversMetadata);
|
|
return (
|
|
<>
|
|
{!isUndefined(this.props.comicBookCoversMetadata) &&
|
|
!isEmpty(this.props.comicBookCoversMetadata) &&
|
|
this.drawCoverCard(this.props.comicBookCoversMetadata)}
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Card;
|