cinnabarflower/mnemo_cards
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

stuff

Browse source
This commit is contained in:
Dmitry 2025-12-15 01:38:36 +03:00
parent 2adffbf235
commit d563f053c9
1 changed files with 32 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
mnemo_cards_admin/src/pages/CardsPage.tsx
View file

@ -247,6 +247,20 @@ export default function CardsPage() {
return pack?.title || packId return pack?.title || packId
} }
// Get image source - handles both base64 and URLs
const getImageSrc = (image?: string): string | undefined => {
if (!image) return undefined
// If it's already a data URL or http/https URL, return as is
if (image.startsWith('data:') || image.startsWith('http://') || image.startsWith('https://')) {
return image
}
// Otherwise, assume it's base64 and add the data URL prefix
// Try to detect image type from base64 or default to png
return `data:image/png;base64,${image}`
}
if (error) { if (error) {
const errorMessage = isCardsApiError(error) const errorMessage = isCardsApiError(error)
? error.message ? error.message
@ -350,9 +364,14 @@ export default function CardsPage() {
<> <>
{Object.entries(groupedCards).map(([packId, cards]) => ( {Object.entries(groupedCards).map(([packId, cards]) => (
<div key={packId} className="mb-8"> <div key={packId} className="mb-8">
<h3 className="text-lg font-semibold mb-4 pb-2 border-b"> <div className="bg-muted/50 px-4 py-3 rounded-t-lg border-b-2 border-primary/20 mb-0">
{getPackName(packId)} ({cards.length}) <h3 className="text-xl font-bold">
</h3> {getPackName(packId)}
</h3>
<p className="text-sm text-muted-foreground mt-1">
{cards.length} {cards.length === 1 ? 'card' : 'cards'}
</p>
</div>
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
@ -399,9 +418,14 @@ export default function CardsPage() {
<> <>
{Object.entries(groupedCards).map(([packId, cards]) => ( {Object.entries(groupedCards).map(([packId, cards]) => (
<div key={packId} className="mb-8"> <div key={packId} className="mb-8">
<h3 className="text-lg font-semibold mb-4 pb-2 border-b"> <div className="bg-muted/50 px-4 py-3 rounded-lg border-b-2 border-primary/20 mb-4">
{getPackName(packId)} ({cards.length}) <h3 className="text-xl font-bold">
</h3> {getPackName(packId)}
</h3>
<p className="text-sm text-muted-foreground mt-1">
{cards.length} {cards.length === 1 ? 'card' : 'cards'}
</p>
</div>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4"> <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
{cards.map((card) => ( {cards.map((card) => (
<div <div
@ -410,9 +434,9 @@ export default function CardsPage() {
onClick={() => openEditDialog(card)} onClick={() => openEditDialog(card)}
> >
<div className="aspect-square bg-muted relative"> <div className="aspect-square bg-muted relative">
{card.image ? ( {getImageSrc(card.image) ? (
<img <img
src={card.image} src={getImageSrc(card.image)}
alt={card.original} alt={card.original}
className="w-full h-full object-cover" className="w-full h-full object-cover"
onError={(e) => { onError={(e) => {