nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 14:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Badge updates

Browse Source
This commit is contained in:
Bill 2021-09-24 04:49:30 -04:00
parent 27ef76610b
commit 06f17080ce
2 changed files with 34 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/shared/badge-image/BadgeImage.scss
View File

@ -1,7 +1,7 @@
.badge-image {
position: relative;
width: 100%;
height: 100%;
width: 45px;
height: 45px;
background-repeat: no-repeat;
background-position: center;

42
src/views/user-profile/views/badges-container/BadgesContainerView.tsx
View File

@ -1,4 +1,5 @@
import { FC } from 'react';
import { NitroCardGridItemView, NitroCardGridView } from '../../../../layout';
import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
import { BadgesContainerViewProps } from './BadgesContainerView.types';
@ -7,21 +8,36 @@ export const BadgesContainerView: FC<BadgesContainerViewProps> = props =>
const { badges = null } = props;
return (
<div className="row badge-container d-flex mt-1">
<div className="nitro-card-grid theme-default">
<div className="row row-cols-5 align-content-start">
<div className="row">
<NitroCardGridView columns={ 5 }>
{ badges && (badges.length > 0) && badges.map((badge, index) =>
{
badges.map( (badge, index) =>
{
return (
<div className="grid-item-container" key={index}>
<BadgeImageView badgeCode={badge}/>
<NitroCardGridItemView key={ index }>
<BadgeImageView badgeCode={ badge }/>
</NitroCardGridItemView>
)
}) }
</NitroCardGridView>
</div>
)
})
}
</div>
</div>
</div>
);
// return (
// <div className="row badge-container d-flex mt-1">
// <div className="nitro-card-grid theme-default">
// <div className="row row-cols-5 align-content-start">
// {
// badges.map( (badge, index) =>
// {
// return (
// <div className="grid-item-container" key={index}>
// <BadgeImageView badgeCode={badge}/>
// </div>
// )
// })
// }
// </div>
// </div>
// </div>
// );
}