feat: add ratings to book list
This commit is contained in:
parent
773a64c45a
commit
83b06a8176
4 changed files with 34 additions and 8 deletions
10
package-lock.json
generated
10
package-lock.json
generated
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "www-aaronjy-me",
|
||||
"version": "1.7.0.0",
|
||||
"version": "1.7.3.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "www-aaronjy-me",
|
||||
"version": "1.7.0.0",
|
||||
"version": "1.7.3.0",
|
||||
"dependencies": {
|
||||
"@highlightjs/cdn-assets": "^11.11.1",
|
||||
"date-fns": "^4.1.0",
|
||||
|
@ -9193,9 +9193,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001667",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001667.tgz",
|
||||
"integrity": "sha512-7LTwJjcRkzKFmtqGsibMeuXmvFDfZq/nzIjnmgCGzKKRVzjD72selLDK1oPF/Oxzmt4fNcPvTDvGqSDG4tCALw==",
|
||||
"version": "1.0.30001707",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001707.tgz",
|
||||
"integrity": "sha512-3qtRjw/HQSMlDWf+X79N206fepf4SOOU6SQLMaq/0KkZLmSjPxAkBOQQ+FxbHKfHmYLZFfdWsO3KA90ceHPSnw==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "www-aaronjy-me",
|
||||
"version": "1.7.2.3",
|
||||
"version": "1.7.3.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
|
|
@ -9,7 +9,8 @@ export default function BookListItem ({ href, title, author, stars, readDate, ur
|
|||
className={style.thumb} style={{
|
||||
backgroundImage: `url(${thumbnailUrl ?? '/img/book-placeholder.jpg'})`
|
||||
}}
|
||||
/>
|
||||
><div className={style.rating}><Star /> {stars}</div>
|
||||
</div>
|
||||
</Link>
|
||||
<div>
|
||||
<h2 className={style.heading}>
|
||||
|
@ -17,8 +18,18 @@ export default function BookListItem ({ href, title, author, stars, readDate, ur
|
|||
</h2>
|
||||
<p className={style.author}>{author}</p>
|
||||
<p>{tags}</p>
|
||||
{/* <p>{stars}/5</p> */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Star () {
|
||||
return (
|
||||
<svg
|
||||
style={{
|
||||
fill: 'currentColor'
|
||||
}} height='15' width='15' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 47.94 47.94' xmlSpace='preserve'
|
||||
><path d='m26.285 2.486 5.407 10.956a2.58 2.58 0 0 0 1.944 1.412l12.091 1.757c2.118.308 2.963 2.91 1.431 4.403l-8.749 8.528a2.582 2.582 0 0 0-.742 2.285l2.065 12.042c.362 2.109-1.852 3.717-3.746 2.722l-10.814-5.685a2.585 2.585 0 0 0-2.403 0l-10.814 5.685c-1.894.996-4.108-.613-3.746-2.722l2.065-12.042a2.582 2.582 0 0 0-.742-2.285L.783 21.014c-1.532-1.494-.687-4.096 1.431-4.403l12.091-1.757a2.58 2.58 0 0 0 1.944-1.412l5.407-10.956c.946-1.919 3.682-1.919 4.629 0z' />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -23,4 +23,19 @@
|
|||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rating {
|
||||
position: absolute;
|
||||
right: 0.5rem;
|
||||
bottom: 0.5rem;
|
||||
background-color: var(--lt-color-gray-900);
|
||||
padding: 0.25rem 0.5rem;
|
||||
color: var(--lt-color-gray-100);
|
||||
border-radius: 0.25rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
}
|
Loading…
Add table
Reference in a new issue