style: run format:apply
This commit is contained in:
+133
-119
@@ -5,132 +5,146 @@ import styles from '../../styles/Customizations.module.css';
|
||||
import { CustomizationItem, Tab, getCosmeticIconUrl } from './types';
|
||||
|
||||
type Props = {
|
||||
tab: Tab;
|
||||
allFilteredItems: CustomizationItem[];
|
||||
pagedItems: CustomizationItem[];
|
||||
page: number;
|
||||
totalPages: number;
|
||||
search: string;
|
||||
unlockedSet: Set<string>;
|
||||
characterMap: Map<number, string>;
|
||||
onSearchChange: (s: string) => void;
|
||||
onUnlockAll: () => void;
|
||||
onLockAll: () => void;
|
||||
onUnlockPage: () => void;
|
||||
onLockPage: () => void;
|
||||
onToggle: (id: string) => void;
|
||||
onPageChange: (p: number) => void;
|
||||
tab: Tab;
|
||||
allFilteredItems: CustomizationItem[];
|
||||
pagedItems: CustomizationItem[];
|
||||
page: number;
|
||||
totalPages: number;
|
||||
search: string;
|
||||
unlockedSet: Set<string>;
|
||||
characterMap: Map<number, string>;
|
||||
onSearchChange: (s: string) => void;
|
||||
onUnlockAll: () => void;
|
||||
onLockAll: () => void;
|
||||
onUnlockPage: () => void;
|
||||
onLockPage: () => void;
|
||||
onToggle: (id: string) => void;
|
||||
onPageChange: (p: number) => void;
|
||||
};
|
||||
|
||||
export default function FlatCategory({
|
||||
tab,
|
||||
allFilteredItems,
|
||||
pagedItems,
|
||||
page,
|
||||
totalPages,
|
||||
search,
|
||||
unlockedSet,
|
||||
characterMap,
|
||||
onSearchChange,
|
||||
onUnlockAll,
|
||||
onLockAll,
|
||||
onUnlockPage,
|
||||
onLockPage,
|
||||
onToggle,
|
||||
onPageChange,
|
||||
tab,
|
||||
allFilteredItems,
|
||||
pagedItems,
|
||||
page,
|
||||
totalPages,
|
||||
search,
|
||||
unlockedSet,
|
||||
characterMap,
|
||||
onSearchChange,
|
||||
onUnlockAll,
|
||||
onLockAll,
|
||||
onUnlockPage,
|
||||
onLockPage,
|
||||
onToggle,
|
||||
onPageChange
|
||||
}: Props) {
|
||||
const buildPageNumbers = () => {
|
||||
const pages: number[] = [];
|
||||
const start = Math.max(1, Math.min(page - 2, totalPages - 4));
|
||||
const end = Math.min(totalPages, start + 4);
|
||||
for (let i = start; i <= end; i++) pages.push(i);
|
||||
return pages;
|
||||
};
|
||||
const buildPageNumbers = () => {
|
||||
const pages: number[] = [];
|
||||
const start = Math.max(1, Math.min(page - 2, totalPages - 4));
|
||||
const end = Math.min(totalPages, start + 4);
|
||||
for (let i = start; i <= end; i++) pages.push(i);
|
||||
return pages;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={shared.toolbar}>
|
||||
<input
|
||||
className={shared.searchInput}
|
||||
type="text"
|
||||
placeholder={`Search ${tab}...`}
|
||||
value={search}
|
||||
onChange={e => onSearchChange(e.target.value)}
|
||||
/>
|
||||
<span className={shared.spacer} />
|
||||
<span className={shared.resultCount}>{allFilteredItems.length} items</span>
|
||||
<button className={shared.unlockAllBtn} onClick={onUnlockAll}>
|
||||
Unlock all ({allFilteredItems.length})
|
||||
</button>
|
||||
<button className={shared.lockAllBtn} onClick={onLockAll}>
|
||||
Lock all
|
||||
</button>
|
||||
<button className={styles.pageActionBtn} onClick={onUnlockPage}>
|
||||
Unlock visible
|
||||
</button>
|
||||
<button className={styles.pageActionBtn} onClick={onLockPage}>
|
||||
Lock visible
|
||||
</button>
|
||||
</div>
|
||||
return (
|
||||
<>
|
||||
<div className={shared.toolbar}>
|
||||
<input
|
||||
className={shared.searchInput}
|
||||
type='text'
|
||||
placeholder={`Search ${tab}...`}
|
||||
value={search}
|
||||
onChange={(e) => onSearchChange(e.target.value)}
|
||||
/>
|
||||
<span className={shared.spacer} />
|
||||
<span className={shared.resultCount}>
|
||||
{allFilteredItems.length} items
|
||||
</span>
|
||||
<button className={shared.unlockAllBtn} onClick={onUnlockAll}>
|
||||
Unlock all ({allFilteredItems.length})
|
||||
</button>
|
||||
<button className={shared.lockAllBtn} onClick={onLockAll}>
|
||||
Lock all
|
||||
</button>
|
||||
<button className={styles.pageActionBtn} onClick={onUnlockPage}>
|
||||
Unlock visible
|
||||
</button>
|
||||
<button className={styles.pageActionBtn} onClick={onLockPage}>
|
||||
Lock visible
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{allFilteredItems.length === 0 ? (
|
||||
<div className={shared.empty}>No items found</div>
|
||||
) : (
|
||||
<>
|
||||
<div className={styles.grid}>
|
||||
{pagedItems.map(item => {
|
||||
const unlocked = unlockedSet.has(item.id);
|
||||
return (
|
||||
<div
|
||||
key={item.id}
|
||||
className={`${shared.card} ${unlocked ? shared.cardUnlocked : ''}`}
|
||||
onClick={() => onToggle(item.id)}
|
||||
>
|
||||
<img
|
||||
className={shared.cardIcon}
|
||||
src={getCosmeticIconUrl(item, characterMap)}
|
||||
alt={item.name}
|
||||
loading="lazy"
|
||||
/>
|
||||
<span className={shared.cardName}>{item.name}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{allFilteredItems.length === 0 ? (
|
||||
<div className={shared.empty}>No items found</div>
|
||||
) : (
|
||||
<>
|
||||
<div className={styles.grid}>
|
||||
{pagedItems.map((item) => {
|
||||
const unlocked = unlockedSet.has(item.id);
|
||||
return (
|
||||
<div
|
||||
key={item.id}
|
||||
className={`${shared.card} ${unlocked ? shared.cardUnlocked : ''}`}
|
||||
onClick={() => onToggle(item.id)}
|
||||
>
|
||||
<img
|
||||
className={shared.cardIcon}
|
||||
src={getCosmeticIconUrl(item, characterMap)}
|
||||
alt={item.name}
|
||||
loading='lazy'
|
||||
/>
|
||||
<span className={shared.cardName}>{item.name}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{totalPages > 1 && (
|
||||
<div className={shared.pagination}>
|
||||
<button
|
||||
className={`${shared.pageBtn} ${page === 1 ? shared.pageBtnDisabled : ''}`}
|
||||
onClick={() => onPageChange(1)}
|
||||
>«</button>
|
||||
<button
|
||||
className={`${shared.pageBtn} ${page === 1 ? shared.pageBtnDisabled : ''}`}
|
||||
onClick={() => onPageChange(page - 1)}
|
||||
>‹</button>
|
||||
{totalPages > 1 && (
|
||||
<div className={shared.pagination}>
|
||||
<button
|
||||
className={`${shared.pageBtn} ${page === 1 ? shared.pageBtnDisabled : ''}`}
|
||||
onClick={() => onPageChange(1)}
|
||||
>
|
||||
«
|
||||
</button>
|
||||
<button
|
||||
className={`${shared.pageBtn} ${page === 1 ? shared.pageBtnDisabled : ''}`}
|
||||
onClick={() => onPageChange(page - 1)}
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
|
||||
{buildPageNumbers().map(n => (
|
||||
<button
|
||||
key={n}
|
||||
className={`${shared.pageBtn} ${n === page ? shared.pageBtnActive : ''}`}
|
||||
onClick={() => onPageChange(n)}
|
||||
>{n}</button>
|
||||
))}
|
||||
{buildPageNumbers().map((n) => (
|
||||
<button
|
||||
key={n}
|
||||
className={`${shared.pageBtn} ${n === page ? shared.pageBtnActive : ''}`}
|
||||
onClick={() => onPageChange(n)}
|
||||
>
|
||||
{n}
|
||||
</button>
|
||||
))}
|
||||
|
||||
<button
|
||||
className={`${shared.pageBtn} ${page === totalPages ? shared.pageBtnDisabled : ''}`}
|
||||
onClick={() => onPageChange(page + 1)}
|
||||
>›</button>
|
||||
<button
|
||||
className={`${shared.pageBtn} ${page === totalPages ? shared.pageBtnDisabled : ''}`}
|
||||
onClick={() => onPageChange(totalPages)}
|
||||
>»</button>
|
||||
<button
|
||||
className={`${shared.pageBtn} ${page === totalPages ? shared.pageBtnDisabled : ''}`}
|
||||
onClick={() => onPageChange(page + 1)}
|
||||
>
|
||||
›
|
||||
</button>
|
||||
<button
|
||||
className={`${shared.pageBtn} ${page === totalPages ? shared.pageBtnDisabled : ''}`}
|
||||
onClick={() => onPageChange(totalPages)}
|
||||
>
|
||||
»
|
||||
</button>
|
||||
|
||||
<span className={shared.pageInfo}>{page} / {totalPages}</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
<span className={shared.pageInfo}>
|
||||
{page} / {totalPages}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user