Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Ondřej Bazala
PV247
Commits
c3eaa824
Commit
c3eaa824
authored
Nov 28, 2021
by
Benjamín Balun
Browse files
refactor: created ItemCard component for Store page
parent
ef528e75
Changes
2
Hide whitespace changes
Inline
Side-by-side
src/pages/Store/ItemCard.tsx
0 → 100644
View file @
c3eaa824
import
{
DollarOutlined
,
QuestionCircleOutlined
}
from
'
@ant-design/icons
'
;
import
{
Button
,
Card
,
Col
}
from
'
antd
'
;
import
{
Food
}
from
'
../../data/food
'
;
import
{
Pokeball
}
from
'
../../data/pokeballs
'
;
type
Item
=
Food
|
Pokeball
;
const
ItemCard
=
({
item
,
key
,
callback
}:
{
item
:
Item
;
key
:
number
;
callback
:
(
item
:
Item
)
=>
Promise
<
void
>
;
})
=>
(
<
Col
key
=
{
key
}
style
=
{
{
width
:
'
200px
'
}
}
>
<
Card
title
=
{
item
.
name
}
hoverable
cover
=
{
item
.
image
?
(
<
img
alt
=
{
item
.
name
}
src
=
{
item
.
image
}
/>
)
:
(
<
QuestionCircleOutlined
style
=
{
{
fontSize
:
'
150px
'
}
}
/>
)
}
>
<
p
>
Price:
{
item
.
price
}
<
DollarOutlined
/>
</
p
>
<
Button
type
=
"primary"
onClick
=
{
()
=>
callback
(
item
)
}
>
Buy
</
Button
>
</
Card
>
</
Col
>
);
export
default
ItemCard
;
src/pages/Store/Store.tsx
View file @
c3eaa824
import
{
Button
,
Card
,
Col
,
Modal
,
Row
}
from
'
antd
'
;
import
{
DollarOutlined
,
QuestionCircleOutlined
}
from
'
@ant-design/icons
'
;
import
{
Modal
,
Row
}
from
'
antd
'
;
import
usePageTitle
from
'
../../hooks/usePageTitle
'
;
import
{
Food
,
food
}
from
'
../../data/food
'
;
...
...
@@ -9,6 +8,7 @@ import { Loading } from '../../utils/Loading';
import
{
updateUserDataInFirebase
}
from
'
../../utils/firebase
'
;
import
Funds
from
'
./Funds
'
;
import
ItemCard
from
'
./ItemCard
'
;
const
Store
=
()
=>
{
usePageTitle
(
'
Store
'
);
...
...
@@ -72,26 +72,7 @@ const Store = () => {
<
Row
gutter
=
{
[
10
,
10
]
}
>
{
[...
food
,
...
pokeballs
].
map
((
item
,
index
)
=>
(
<
Col
key
=
{
index
}
style
=
{
{
width
:
'
200px
'
}
}
>
<
Card
title
=
{
item
.
name
}
hoverable
cover
=
{
item
.
image
?
(
<
img
alt
=
{
item
.
name
}
src
=
{
item
.
image
}
/>
)
:
(
<
QuestionCircleOutlined
style
=
{
{
fontSize
:
'
150px
'
}
}
/>
)
}
>
<
p
>
Price:
{
item
.
price
}
<
DollarOutlined
/>
</
p
>
<
Button
type
=
"primary"
onClick
=
{
()
=>
buyItem
(
item
)
}
>
Buy
</
Button
>
</
Card
>
</
Col
>
<
ItemCard
item
=
{
item
}
key
=
{
index
}
callback
=
{
buyItem
}
/>
))
}
</
Row
>
</>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment