aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-01-24 16:54:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

update: project details card skeleton

Browse Source
This commit is contained in:
MTG2000
2022-09-29 14:26:36 +03:00
parent 347c94702a
commit b34f6442b0
1 changed files with 9 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.Skeleton.tsx
View File

@@ -32,7 +32,7 @@ export default function ProjectDetailsCardSkeleton({ onClose, direction, ...prop
<Skeleton height='100%' className='!leading-inherit' />
<button className="w-32 h-32 bg-gray-600 bg-opacity-80 text-white absolute top-24 right-24 rounded-full hover:bg-gray-800 text-center" onClick={onClose}><MdClose className=' inline-block' /></button>
</div>
<div className="p-24">
<div className="p-24 flex flex-col gap-24">
<div className="flex flex-col mt-[-80px] md:flex-row md:mt-0 gap-24 items-start relative">
<div className="flex-shrink-0 w-[108px] h-[108px] ">
<Skeleton height='100%' className='rounded-24 border-2 border-white' />
@@ -46,26 +46,24 @@ export default function ProjectDetailsCardSkeleton({ onClose, direction, ...prop
</div>
<div className="flex-shrink-0 w-full md:w-auto md:flex ml-auto gap-16 self-stretch">
{/* <Button color='primary' size='md' className=" my-16" href={project.website} newTab >Visit <BsJoystick /></Button> */}
{/* <VoteButton onVote={onVote} /> */}
{/* <VoteButton fullWidth votes={project.votes_count} direction='vertical' onVote={onVote} /> */}
{/* {isWalletConnected ?
:
<Button onClick={onConnectWallet} size='md' className="border border-gray-200 bg-gray-100 hover:bg-gray-50 active:bg-gray-100 my-16"><AiFillThunderbolt className='inline-block text-thunder transform scale-125' /> Connect Wallet to Vote</Button>
} */}
<Button fullWidth variant='outline' color='gray' className='!px-8'>
<p className='opacity-0'>votes</p>
</Button>
</div>
</div>
<p className="mt-40 text-body4 leading-normal h-[120px]">
<p className="text-body4 leading-normal">
<Skeleton width='98%' />
<Skeleton width='90%' />
<Skeleton width='70%' />
<Skeleton width='40%' />
</p>
<div className="mt-40">
<div className="flex flex-wrap gap-16">
<Skeleton width='40px' height='40px' className='rounded-full' />
<Skeleton width='40px' height='40px' className='rounded-full' />
</div>
<div >
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 justify-items-center">
{
Array(4).fill(0).map((_, idx) => <div key={idx} className="w-full relative pt-[56%] cursor-pointer bg-gray-200 shadow-sm rounded-10 overflow-hidden">
@@ -74,9 +72,7 @@ export default function ProjectDetailsCardSkeleton({ onClose, direction, ...prop
}
</div>
</div>
<div className="text-center h-[40px]">
</div>
<div className="text-center h-[46px]"></div>
</div>
</motion.div>
)