@@ -19,45 +19,48 @@ export function CatalogItemCard({ openUrl, item, canRegister, registered, regist
1919 const [ isRegistering , setIsRegistering ] = useState ( false )
2020 return (
2121 < Card sx = { { height : '100%' } } >
22- < CardContent >
23- < a href = "" >
24- < Stack onClick = { openUrl } direction = "row" spacing = { 2 } justifyContent = "space-between" sx = { { cursor : 'pointer' } } >
25- < Typography gutterBottom variant = "h5" component = "div" >
26- { item . name }
27- </ Typography >
28- < CardMedia
29- component = "img"
30- sx = { { maxWidth : 100 , padding : 1 , background : 'white' , borderRadius : 1 } }
31- alt = { `Icon for ${ item . name } ` }
32- image = { item . icon }
33- />
34- </ Stack >
35- </ a >
36- < Typography variant = "body2" sx = { { color : 'text.secondary' , mt : 2 } } >
37- { item . description }
38- </ Typography >
39- </ CardContent >
40- < CardActions >
41- < Button
42- size = "small"
43- onClick = { ( ) => {
44- trackEvent ( 'registry-changed' , { name : item . name , ref : item . ref , action : registered ? 'remove' : 'add' } ) ;
45- setIsRegistering ( true )
46- if ( registered ) {
47- unregister ( item ) . then ( ( ) => {
48- setIsRegistering ( false )
49- } )
50- } else {
51- register ( item ) . then ( ( ) => {
52- setIsRegistering ( false )
53- } )
54- }
55- } }
56- disabled = { ! canRegister || isRegistering }
57- >
58- { isRegistering ? < CircularProgress size = { 20 } /> : registered ? 'Remove' : 'Add' }
59- </ Button >
60- </ CardActions >
22+ < Stack direction = "column" height = "100%" sx = { { justifyContent : 'space-between' } } >
23+ < CardContent >
24+ < a href = "" >
25+ < Stack onClick = { openUrl } direction = "row" spacing = { 2 } justifyContent = "space-between" sx = { { cursor : 'pointer' } } >
26+
27+ < Typography gutterBottom variant = "h5" component = "div" >
28+ { item . name }
29+ </ Typography >
30+ < CardMedia
31+ component = "img"
32+ sx = { { maxWidth : 100 , padding : 1 , background : 'white' , borderRadius : 1 } }
33+ alt = { `Icon for ${ item . name } ` }
34+ image = { item . icon }
35+ />
36+ </ Stack >
37+ </ a >
38+ < Typography variant = "body2" sx = { { color : 'text.secondary' , mt : 2 } } >
39+ { item . description }
40+ </ Typography >
41+ </ CardContent >
42+ < CardActions >
43+ < Button
44+ size = "small"
45+ onClick = { ( ) => {
46+ trackEvent ( 'registry-changed' , { name : item . name , ref : item . ref , action : registered ? 'remove' : 'add' } ) ;
47+ setIsRegistering ( true )
48+ if ( registered ) {
49+ unregister ( item ) . then ( ( ) => {
50+ setIsRegistering ( false )
51+ } )
52+ } else {
53+ register ( item ) . then ( ( ) => {
54+ setIsRegistering ( false )
55+ } )
56+ }
57+ } }
58+ disabled = { ! canRegister || isRegistering }
59+ >
60+ { isRegistering ? < CircularProgress size = { 20 } /> : registered ? 'Remove' : 'Add' }
61+ </ Button >
62+ </ CardActions >
63+ </ Stack >
6164 </ Card >
6265 )
6366}
0 commit comments