aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-01-10 18:04:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: header image alignment

Browse Source
This commit is contained in:
MTG2000
2022-09-12 12:37:52 +03:00
parent e335043591
commit cf41c5dd9c
1 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/features/Tournaments/pages/TournamentDetailsPage/Header/Header.tsx
View File

@@ -18,14 +18,16 @@ export default function Header() {
<div className="w-full p-16 md:p-24 flex flex-col min-h-[240px] md:min-h-[280px] relative mb-[-1px]">
<img src={tournamentDetails.cover_image} className='absolute inset-0 h-full w-full object-cover object-top' alt="" />
<div className='absolute inset-0 h-full w-full bg-black bg-opacity-50 ' />
<div className="content-container text-white flex flex-col md:flex-row gap-16 md:gap-32 relative" style={{ marginTop: 'auto' }}>
<img src={tournamentDetails.thumbnail_image} className={'w-64 md:w-[128px] aspect-square rounded-16 md:rounded-24 border-2 border-gray-100'} alt="" />
<div className='flex flex-col gap-4'>
<p className="text-body6">TOURNAMENT 🏆</p>
<p className="text-body1 md:text-h2 font-bold">{tournamentDetails.title}</p>
<p className="text-body3"> {`${dayjs(tournamentDetails.start_date).format('Do')} - ${dayjs(tournamentDetails.end_date).format('Do MMMM, YYYY')}`}</p>
<div className="content-container mt-auto">
<div className=" text-white flex flex-col md:flex-row gap-16 md:gap-32 relative" style={{ marginTop: 'auto' }}>
<img src={tournamentDetails.thumbnail_image} className={'w-64 md:w-[128px] aspect-square rounded-16 md:rounded-24 border-2 border-gray-100'} alt="" />
<div className='flex flex-col gap-4'>
<p className="text-body6">TOURNAMENT 🏆</p>
<p className="text-body1 md:text-h2 font-bold">{tournamentDetails.title}</p>
<p className="text-body3"> {`${dayjs(tournamentDetails.start_date).format('Do')} - ${dayjs(tournamentDetails.end_date).format('Do MMMM, YYYY')}`}</p>
<p className='text-body5'><IoLocationOutline className="mr-8" /> {tournamentDetails.location}</p>
<p className='text-body5'><IoLocationOutline className="mr-8" /> {tournamentDetails.location}</p>
</div>
</div>
</div>
</div>