nmemmertandClaude Sonnet 5.5
dc825f0112
Build and Push Docker Image / build-and-push (push) Failing after 19s
A Grid / List toggle beside the sort and tag filters. List is one compact row per study (small book cover, title with Rename, passage, tags, date, Resume and Delete). The choice is remembered on the device. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
37 lines
2.2 KiB
React
37 lines
2.2 KiB
React
// The picture on a study's card: a coloured cover for the kind of book, with the book's name.
|
|
import { coverFor } from '../utils/bookCovers.js';
|
|
|
|
export default function BookCover({ summary, className = '', compact = false }) {
|
|
const { group, name, extra } = coverFor(summary);
|
|
const [from, to] = group.colors;
|
|
const id = `cover-${group.id}`;
|
|
return (
|
|
<div className={`relative overflow-hidden rounded-xl ${className}`} role="img" aria-label={`${name}${extra ? ` and ${extra} more` : ''}, ${group.label}`}>
|
|
<svg viewBox={compact ? '0 0 200 120' : '0 0 400 120'} preserveAspectRatio="xMidYMid slice" className="block h-full w-full" aria-hidden="true">
|
|
<defs>
|
|
<linearGradient id={id} x1="0" y1="0" x2="1" y2="1"><stop offset="0" stopColor={from} /><stop offset="1" stopColor={to} /></linearGradient>
|
|
</defs>
|
|
<rect width="400" height="120" fill={`url(#${id})`} />
|
|
<g fill="none" stroke="#fff" strokeOpacity="0.1" strokeWidth="1.5">
|
|
<circle cx="360" cy="20" r="70" /><circle cx="360" cy="20" r="50" /><circle cx="360" cy="20" r="30" />
|
|
<circle cx="30" cy="120" r="60" /><circle cx="30" cy="120" r="40" />
|
|
</g>
|
|
<rect x={compact ? 14 : 20} y="22" width="28" height="3" rx="1.5" fill="#fff" fillOpacity="0.7" />
|
|
{compact ? (
|
|
<>
|
|
<text x="14" y="70" fill="#fff" fontFamily="Georgia, 'Times New Roman', serif" fontSize={name.length > 11 ? 21 : name.length > 8 ? 25 : 30} fontWeight="600">{name}</text>
|
|
{extra > 0 && <text x="14" y="98" fill="#fff" fillOpacity="0.85" fontFamily="-apple-system, 'Segoe UI', Helvetica, Arial, sans-serif" fontSize="14" letterSpacing="1">+{extra} MORE</text>}
|
|
</>
|
|
) : (
|
|
<>
|
|
<text x="20" y="62" fill="#fff" fontFamily="Georgia, 'Times New Roman', serif" fontSize={name.length > 13 ? 26 : 32} fontWeight="600">{name}</text>
|
|
<text x="20" y="90" fill="#fff" fillOpacity="0.8" fontFamily="-apple-system, 'Segoe UI', Helvetica, Arial, sans-serif" fontSize="13" letterSpacing="1.5">
|
|
{group.label.toUpperCase()}{extra ? ` · +${extra} MORE` : ''}
|
|
</text>
|
|
</>
|
|
)}
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|