rstillwell/deckhearth
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions 10

refactor(card-editor): extract search panel component (Brief 1) #90

Merged
varutasu merged 1 commit from refactor/card-editor-split-brief-1 into main 2026-06-03 18:24:43 -04:00
Conversation 3 Commits 1 Files changed 2 +106 -76
2 changed files with 106 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
components/CardEditorSearchPanel.js Normal file
View file

@ -0,0 +1,95 @@
/* eslint-disable @next/next/no-img-element -- External card image URLs; next/image migration is out of scope. */
/**
* Admin card editor: search input + result grid for picking a card to edit.
*/
export default function CardEditorSearchPanel({
searchQuery,
onSearchQueryChange,
searchLoading,
searchResults,
onSelectCard,
}) {
return (
<div className="mb-8 p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
<h2 className="text-xl font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
Find Card to Edit
</h2>
<div className="flex gap-4 mb-4">
<div className="flex-1">
<input
type="text"
placeholder="Search for cards by name..."
value={searchQuery}
onChange={(e) => onSearchQueryChange(e.target.value)}
className="w-full p-3 rounded-lg border transition-all duration-200"
style={{
backgroundColor: 'var(--bg-primary)',
borderColor: 'var(--border)',
color: 'var(--text-primary)',
}}
/>
</div>
</div>
{searchLoading && (
<div className="text-center py-4">
<div
className="animate-spin rounded-full h-8 w-8 border-b-2 mx-auto"
style={{ borderColor: 'var(--text-accent)' }}
/>
</div>
)}
{searchResults.length > 0 && (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{searchResults.map((searchCard) => (
<div
key={searchCard.id}
onClick={() => onSelectCard(searchCard)}
className="p-4 rounded-lg border cursor-pointer transition-all duration-200 hover:shadow-lg hover:scale-105"
style={{
backgroundColor: 'var(--bg-primary)',
borderColor: 'var(--border)',
}}
>
<div className="flex items-center gap-3">
<div
className="w-12 h-16 rounded-lg overflow-hidden flex-shrink-0"
style={{ backgroundColor: 'var(--bg-secondary)' }}
>
{searchCard.image_url ? (
<img
src={searchCard.image_url}
alt={searchCard.name}
className="w-full h-full object-cover"
/>
) : (
<div
className="w-full h-full flex items-center justify-center text-xs"
style={{ color: 'var(--text-secondary)' }}
>
{searchCard.game}
</div>
)}
</div>
<div className="flex-1">
<h3 className="font-semibold" style={{ color: 'var(--text-primary)' }}>
{searchCard.name}
</h3>
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
{searchCard.set_name} • {searchCard.game}
</p>
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
{searchCard.rarity}
</p>
</div>
</div>
</div>
))}
</div>
)}
</div>
);
}

87
pages/admin/card-editor.js
View file

@ -4,6 +4,7 @@ import { useRouter } from 'next/router';
import dynamic from 'next/dynamic';
import Layout from '../../components/Layout';
import AdminProtected from '../../components/AdminProtected';
import CardEditorSearchPanel from '../../components/CardEditorSearchPanel';
// Make this component client-side only to avoid SSR issues
const CardEditor = () => {
@ -230,82 +231,16 @@ const CardEditor = () => {
</p>
</div>
{/* Card Search */}
<div className="mb-8 p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
<h2 className="text-xl font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
Find Card to Edit
</h2>
<div className="flex gap-4 mb-4">
<div className="flex-1">
<input
type="text"
placeholder="Search for cards by name..."
value={searchQuery}
onChange={(e) => {
setSearchQuery(e.target.value);
searchCards(e.target.value);
}}
className="w-full p-3 rounded-lg border transition-all duration-200"
style={{
backgroundColor: 'var(--bg-primary)',
borderColor: 'var(--border)',
color: 'var(--text-primary)'
}}
/>
</div>
</div>
{/* Search Results */}
{searchLoading && (
<div className="text-center py-4">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 mx-auto" style={{ borderColor: 'var(--text-accent)' }}></div>
</div>
)}
{searchResults.length > 0 && (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{searchResults.map((searchCard) => (
<div
key={searchCard.id}
onClick={() => selectCard(searchCard)}
className="p-4 rounded-lg border cursor-pointer transition-all duration-200 hover:shadow-lg hover:scale-105"
style={{
backgroundColor: 'var(--bg-primary)',
borderColor: 'var(--border)'
}}
>
<div className="flex items-center gap-3">
<div className="w-12 h-16 rounded-lg overflow-hidden flex-shrink-0" style={{ backgroundColor: 'var(--bg-secondary)' }}>
{searchCard.image_url ? (
<img
src={searchCard.image_url}
alt={searchCard.name}
className="w-full h-full object-cover"
/>
) : (
<div className="w-full h-full flex items-center justify-center text-xs" style={{ color: 'var(--text-secondary)' }}>
{searchCard.game}
</div>
)}
</div>
<div className="flex-1">
<h3 className="font-semibold" style={{ color: 'var(--text-primary)' }}>
{searchCard.name}
</h3>
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
{searchCard.set_name} • {searchCard.game}
</p>
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
{searchCard.rarity}
</p>
</div>
</div>
</div>
))}
</div>
)}
</div>
<CardEditorSearchPanel
searchQuery={searchQuery}
onSearchQueryChange={(value) => {
setSearchQuery(value);
searchCards(value);
}}
searchLoading={searchLoading}
searchResults={searchResults}
onSelectCard={selectCard}
/>
{/* Card Editor Form */}
{card && (