aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-01-03 14:34:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: return mock users in makers tab, empty state for maker card

Browse Source
This commit is contained in:
MTG2000
2022-09-05 15:32:31 +03:00
parent e727cc6aa9
commit 086dac8715
4 changed files with 57 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/features/Tournaments/pages/MakersPage/MakerCard/MakerCard.tsx
View File

@@ -33,27 +33,39 @@ export default function MakerCard({ maker, isMe }: Props) {
</div>
<div className="flex flex-col gap-4 flex-1">
<p className="text-body2 text-gray-900 font-bold">{maker.name}</p>
<p className="text-body4 text-gray-600 font-medium">{maker.jobTitle}</p>
<ul className="hidden md:flex flex-wrap gap-8 mt-4">
{maker.jobTitle ? <p className="text-body4 text-gray-600 font-medium">{maker.jobTitle}</p>
:
<p className="text-body4 text-gray-400 font-medium">No job title</p>}
{maker.roles.length ? <ul className="hidden md:flex flex-wrap gap-8 mt-4">
{maker.roles.map(role => <li><Badge size='sm' className='!text-body5'>{role.icon} {role.title}</Badge> </li>)}
</ul>
:
<p className="hidden md:block text-body4 text-gray-400">No roles added</p>
}
</div>
{isMe && <span className="ml-auto hidden md:inline-block"><Button color='white' href={createRoute({ type: 'edit-profile' })} size='sm' className='ml-auto'>Edit Profile</Button></span>}
</div>
<hr className="hidden md:block bg-gray-200 mt-24"></hr>
<div className="md:hidden mt-24">
<p className="text-body5 text-gray-900 font-medium">🌈 Roles</p>
<ul className="flex flex-wrap gap-8 mt-12">
<p className="text-body5 text-gray-900 font-medium mb-12">🌈 Roles</p>
{maker.roles.length ? <ul className="flex flex-wrap gap-8">
{maker.roles.map(role => <li><Badge size='sm' className='!text-body5'>{role.icon} {role.title}</Badge> </li>)}
</ul>
:
<p className="text-body4 text-gray-400">No roles added</p>
}
</div>
<div className="mt-24">
<p className="text-body5 text-gray-900 font-medium">🛠️ Skills</p>
<ul className="flex flex-wrap gap-8 mt-12">
<p className="text-body5 text-gray-900 font-medium mb-12">🛠️ Skills</p>
{maker.skills.length ? <ul className="flex flex-wrap gap-8">
{maker.skills.map(skill => <li><Badge size='sm' className='!text-body5'>{skill.title}</Badge> </li>)}
</ul>
:
<p className="text-body4 text-gray-400">No skills added</p>
}
</div>
{isMe && <Button fullWidth color='white' href={createRoute({ type: 'edit-profile' })} size='sm' className='mt-32 md:hidden'>Edit Profile</Button>} </Card>
)

2
src/features/Tournaments/pages/MakersPage/MakersPage.tsx
View File

@@ -83,7 +83,7 @@ export default function MakersPage({ data: { id } }: Props) {
return (
<div className='pb-42'>
<div className="flex flex-col gap-16 lg:gap-24">
<MakerCard isMe maker={(query.data?.me ?? query.previousData?.me) as User} />
{(query.data?.me ?? query.previousData?.me) && <MakerCard isMe maker={(query.data?.me ?? query.previousData?.me) as User} />}
<div className="flex flex-col gap-16">
<h3 className="text-body1 text-gray-900 font-bold mt-24">Makers 👾</h3>