retr0volkov/abyss-lab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add icon to filer buttons

Browse Source
This commit is contained in:
Sakura Knoll
2021-12-31 18:19:17 +09:00 Unverified
parent bad4397b32
commit 8f061250e7
3 changed files with 57 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/atoms/FilterButton.tsx
+3 -1
View File
@@ -29,12 +29,14 @@ const FilterButton = ({
px={2}
onClick={selectFilter}
className={active ? 'active' : ''}
sx={{ display: 'flex' }}
>
{icon != null && (
<SquareImageBox
src={`/assets/honkai3rd/icons/${icon}.png`}
src={`/assets/honkai3rd/${icon}.png`}
alt={label}
size={30}
mr={1}
/>
)}
{label}
src/lib/safeData.ts
+26 -18
View File
@@ -1,20 +1,28 @@
export const battlesuitStrengths = [
{ value: 'physical', label: 'Physical' },
{ value: 'fire dmg', label: 'Fire DMG' },
{ value: 'ice dmg', label: 'Ice DMG' },
{ value: 'lightning dmg', label: 'Lightning DMG' },
{ value: 'freeze', label: 'Freeze' },
{ value: 'paralyze', label: 'Paralyze' },
{ value: 'stun', label: 'Stun' },
{ value: 'ignite', label: 'Ignite' },
{ value: 'bleed', label: 'Bleed' },
{ value: 'heavy atk', label: 'Heavy ATK' },
{ value: 'weaken', label: 'Weaken' },
{ value: 'impair', label: 'Impair' },
{ value: 'time mastery', label: 'Time Mastery' },
{ value: 'gather', label: 'Gather' },
{ value: 'heal', label: 'Heal' },
{ value: 'fast atk', label: 'Fast ATK' },
{ value: 'burst', label: 'Burst' },
{ value: 'aerial', label: 'Aerial' },
{ icon: 'feature-icons/physical', value: 'physical', label: 'Physical' },
{ icon: 'feature-icons/fire-dmg', value: 'fire dmg', label: 'Fire DMG' },
{ icon: 'feature-icons/ice-dmg', value: 'ice dmg', label: 'Ice DMG' },
{
icon: 'feature-icons/lightning-dmg',
value: 'lightning dmg',
label: 'Lightning DMG',
},
{ icon: 'feature-icons/freeze', value: 'freeze', label: 'Freeze' },
{ icon: 'feature-icons/paralyze', value: 'paralyze', label: 'Paralyze' },
{ icon: 'feature-icons/stun', value: 'stun', label: 'Stun' },
{ icon: 'feature-icons/ignite', value: 'ignite', label: 'Ignite' },
{ icon: 'feature-icons/bleed', value: 'bleed', label: 'Bleed' },
{ icon: 'feature-icons/heavy-atk', value: 'heavy atk', label: 'Heavy ATK' },
{ icon: 'feature-icons/weaken', value: 'weaken', label: 'Weaken' },
{ icon: 'feature-icons/impair', value: 'impair', label: 'Impair' },
{
icon: 'feature-icons/time-mastery',
value: 'time mastery',
label: 'Time Mastery',
},
{ icon: 'feature-icons/gather', value: 'gather', label: 'Gather' },
{ icon: 'feature-icons/heal', value: 'heal', label: 'Heal' },
{ icon: 'feature-icons/fast-atk', value: 'fast atk', label: 'Fast ATK' },
{ icon: 'feature-icons/burst', value: 'burst', label: 'Burst' },
{ icon: 'feature-icons/aerial', value: 'aerial', label: 'Aerial' },
]
src/pages/honkai3rd/battlesuits/index.tsx
+28 -28
View File
@@ -21,35 +21,33 @@ interface BattlesuitListPageProps {
battlesuits: BattlesuitListItemData[]
}
const featureFilterOptions = [
{ value: 'all', label: 'All' },
...battlesuitStrengths,
]
const featureFilterOptions: { value: string; label: string; icon?: string }[] =
[{ value: 'all', label: 'All' }, ...battlesuitStrengths]
const valkyrieFilterOptions = [
{ value: 'all', label: 'All' },
{ value: 'mecha', label: 'Mecha' },
{ value: 'biologic', label: 'Biologic' },
{ value: 'psychic', label: 'Psychic' },
{ value: 'quantum', label: 'Quantum' },
{ value: 'imaginary', label: 'Imaginary' },
{ value: 'kiana', label: 'Kiana' },
{ value: 'mei', label: 'Mei' },
{ value: 'bronya', label: 'Bronya' },
{ value: 'himeko', label: 'Himeko' },
{ value: 'theresa', label: 'Theresa' },
{ value: 'fuhua', label: 'Fu Hua' },
{ value: 'rita', label: 'Rita' },
{ value: 'sakura', label: 'Sakura' },
{ value: 'kallen', label: 'Kallen' },
{ value: 'olenyevas', label: 'Olenyevas' },
{ value: 'seele', label: 'Seele' },
{ value: 'durandal', label: 'Durandal' },
{ value: 'fischl', label: 'Fischl' },
{ value: 'elysia', label: 'Elysia' },
{ value: 'mobius', label: 'Mobius' },
{ value: 'raven', label: 'Raven' },
{ value: 'carole', label: 'Carole' },
{ value: 'mecha', icon: 'type-icons/mecha', label: 'Mecha' },
{ value: 'biologic', icon: 'type-icons/biologic', label: 'Biologic' },
{ value: 'psychic', icon: 'type-icons/psychic', label: 'Psychic' },
{ value: 'quantum', icon: 'type-icons/quantum', label: 'Quantum' },
{ value: 'imaginary', icon: 'type-icons/imaginary', label: 'Imaginary' },
{ value: 'kiana', icon: 'valkyrie-icons/kiana', label: 'Kiana' },
{ value: 'mei', icon: 'valkyrie-icons/mei', label: 'Mei' },
{ value: 'bronya', icon: 'valkyrie-icons/bronya', label: 'Bronya' },
{ value: 'himeko', icon: 'valkyrie-icons/himeko', label: 'Himeko' },
{ value: 'theresa', icon: 'valkyrie-icons/theresa', label: 'Theresa' },
{ value: 'fuhua', icon: 'valkyrie-icons/fuhua', label: 'Fu Hua' },
{ value: 'rita', icon: 'valkyrie-icons/rita', label: 'Rita' },
{ value: 'sakura', icon: 'valkyrie-icons/sakura', label: 'Sakura' },
{ value: 'kallen', icon: 'valkyrie-icons/kallen', label: 'Kallen' },
{ value: 'olenyevas', icon: 'valkyrie-icons/olenyevas', label: 'Olenyevas' },
{ value: 'seele', icon: 'valkyrie-icons/seele', label: 'Seele' },
{ value: 'durandal', icon: 'valkyrie-icons/durandal', label: 'Durandal' },
{ value: 'fischl', icon: 'valkyrie-icons/fischl', label: 'Fischl' },
{ value: 'elysia', icon: 'valkyrie-icons/elysia', label: 'Elysia' },
{ value: 'mobius', icon: 'valkyrie-icons/mobius', label: 'Mobius' },
{ value: 'raven', icon: 'valkyrie-icons/raven', label: 'Raven' },
{ value: 'carole', icon: 'valkyrie-icons/carole', label: 'Carole' },
]
const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
@@ -125,7 +123,7 @@ const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
<Box>
<Heading as='h3'>Filter by Features</Heading>
<Flex mb={2} sx={{ flexWrap: 'wrap' }}>
{featureFilterOptions.map(({ value, label }) => {
{featureFilterOptions.map(({ value, label, icon }) => {
return (
<FilterButton
key={value}
@@ -133,6 +131,7 @@ const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
setFilter={setFilter}
value={value}
label={label}
icon={icon}
m={1}
/>
)
@@ -141,7 +140,7 @@ const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
<Heading as='h3'>Filter by Valkyries</Heading>
<Flex mb={2} sx={{ flexWrap: 'wrap' }}>
{valkyrieFilterOptions.map(({ value, label }) => {
{valkyrieFilterOptions.map(({ value, label, icon }) => {
return (
<FilterButton
key={value}
@@ -149,6 +148,7 @@ const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
setFilter={setFilter}
value={value}
label={label}
icon={icon}
m={1}
/>
)