lib/Mind-Expanding-Books
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add alt attribute to Card.Img component

Browse Source
This commit is contained in:
Troels Agergaard
2020-10-22 12:36:55 +02:00
committed by Vishnu Ks
parent ee180c8068
commit c13a65aeb2
1 changed files with 85 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
app/src/components/bookcard.js
View File

@@ -1,102 +1,95 @@
import PropTypes from "prop-types"
import React, { useState } from "react"
import StarRatings from "react-star-ratings"
import { Card, Row, Col } from "react-bootstrap"
import PropTypes from 'prop-types';
import React, { useState } from 'react';
import StarRatings from 'react-star-ratings';
import { Card, Row, Col } from 'react-bootstrap';
import AmazonURL from "../components/amazonurl"
import Bookmark from "../components/bookmark"
import GoodReadsImage from "../components/goodreadsimage"
import AmazonURL from '../components/amazonurl';
import Bookmark from '../components/bookmark';
import GoodReadsImage from '../components/goodreadsimage';
const truncateContent = content => {
if (!content) {
return ""
}
return content.length > 350 ? content.substring(0, 350) + "..." : content
}
const truncateContent = (content) => {
if (!content) {
return '';
}
return content.length > 350 ? content.substring(0, 350) + '...' : content;
};
const showFullText = content => {
if (!content) {
return ""
}
return content
}
const showFullText = (content) => {
if (!content) {
return '';
}
return content;
};
const BookCard = ({ book }) => {
const [show, toggleShow] = useState(false)
return (
<Card style={{ marginBottom: "15px" }}>
<Row>
<Col xs={12} md={4} xl={2}>
<Card.Img
style={{
paddingLeft: "15px",
paddingRight: "15px",
paddingTop: "30px",
}}
src={book.image_url}
/>
</Col>
<Col xs={12} md={8} xl={10}>
<Card.Body>
<Card.Title>{book.title}</Card.Title>
<Card.Subtitle className="text-muted">
<Card.Text style={{ paddingTop: "2px"}}>
{book.author} <b>{book.year ? book.year : null}</b>
</Card.Text>
<StarRatings
rating={parseFloat(book.rating)}
numberOfStars={5}
starDimension="18px"
starSpacing="1px"
starRatedColor="#fa604a"
/>
<div style={{display: "flex",alignItems: "center",paddingTop: ".75rem",}} >
<div style={{ width: "30px", height: "30px", marginRight: "5px" }}>
{book.amazon_url ? <AmazonURL book={book} /> : null}
</div>
<div style={{ width: "30px", height: "30px" }}>
<a href={book.url}>
<GoodReadsImage />
</a>
</div>
<Bookmark book={book} />
</div>
</Card.Subtitle>
<p
style={{ color: "gray", fontSize: "0.8rem", paddingTop: "1rem" }}
>
{!show && truncateContent(book.description)}
{show && showFullText(book.description)}
</p>
{!show && (
<button
className="btn btn-sm btn-primary "
onClick={() => toggleShow(true)}
>
Show More
</button>
)}
{show && (
<button
className="btn btn-sm btn-primary "
onClick={() => toggleShow(false)}
>
Show Less
</button>
)}
</Card.Body>
</Col>
</Row>
</Card>
)
}
const [ show, toggleShow ] = useState(false);
return (
<Card style={{ marginBottom: '15px' }}>
<Row>
<Col xs={12} md={4} xl={2}>
<Card.Img
style={{
paddingLeft: '15px',
paddingRight: '15px',
paddingTop: '30px'
}}
src={book.image_url}
alt={book.title}
/>
</Col>
<Col xs={12} md={8} xl={10}>
<Card.Body>
<Card.Title>{book.title}</Card.Title>
<Card.Subtitle className="text-muted">
<Card.Text style={{ paddingTop: '2px' }}>
{book.author} <b>{book.year ? book.year : null}</b>
</Card.Text>
<StarRatings
rating={parseFloat(book.rating)}
numberOfStars={5}
starDimension="18px"
starSpacing="1px"
starRatedColor="#fa604a"
/>
<div style={{ display: 'flex', alignItems: 'center', paddingTop: '.75rem' }}>
<div style={{ width: '30px', height: '30px', marginRight: '5px' }}>
{book.amazon_url ? <AmazonURL book={book} /> : null}
</div>
<div style={{ width: '30px', height: '30px' }}>
<a href={book.url}>
<GoodReadsImage />
</a>
</div>
<Bookmark book={book} />
</div>
</Card.Subtitle>
<p style={{ color: 'gray', fontSize: '0.8rem', paddingTop: '1rem' }}>
{!show && truncateContent(book.description)}
{show && showFullText(book.description)}
</p>
{!show && (
<button className="btn btn-sm btn-primary " onClick={() => toggleShow(true)}>
Show More
</button>
)}
{show && (
<button className="btn btn-sm btn-primary " onClick={() => toggleShow(false)}>
Show Less
</button>
)}
</Card.Body>
</Col>
</Row>
</Card>
);
};
BookCard.propTypes = {
siteTitle: PropTypes.object,
}
siteTitle: PropTypes.object
};
BookCard.defaultProps = {
book: {},
}
book: {}
};
export default BookCard
export default BookCard;