refactor(card-editor): extract search panel component (Brief 1) (#90)
Move the find-card search input and results grid into CardEditorSearchPanel to start splitting the admin card editor page. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
varutasu
GitHub
parent
cc1598962e
commit
5a3f799926
2 changed files with 106 additions and 76 deletions
95
components/CardEditorSearchPanel.js
Normal file
95
components/CardEditorSearchPanel.js
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -4,6 +4,7 @@ import { useRouter } from 'next/router';
|
||||||
import dynamic from 'next/dynamic';
|
import dynamic from 'next/dynamic';
|
||||||
import Layout from '../../components/Layout';
|
import Layout from '../../components/Layout';
|
||||||
import AdminProtected from '../../components/AdminProtected';
|
import AdminProtected from '../../components/AdminProtected';
|
||||||
|
import CardEditorSearchPanel from '../../components/CardEditorSearchPanel';
|
||||||
|
|
||||||
// Make this component client-side only to avoid SSR issues
|
// Make this component client-side only to avoid SSR issues
|
||||||
const CardEditor = () => {
|
const CardEditor = () => {
|
||||||
|
|
@ -230,82 +231,16 @@ const CardEditor = () => {
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Card Search */}
|
<CardEditorSearchPanel
|
||||||
<div className="mb-8 p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
searchQuery={searchQuery}
|
||||||
<h2 className="text-xl font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
onSearchQueryChange={(value) => {
|
||||||
Find Card to Edit
|
setSearchQuery(value);
|
||||||
</h2>
|
searchCards(value);
|
||||||
|
|
||||||
<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)'
|
|
||||||
}}
|
}}
|
||||||
|
searchLoading={searchLoading}
|
||||||
|
searchResults={searchResults}
|
||||||
|
onSelectCard={selectCard}
|
||||||
/>
|
/>
|
||||||
</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>
|
|
||||||
|
|
||||||
{/* Card Editor Form */}
|
{/* Card Editor Form */}
|
||||||
{card && (
|
{card && (
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue