open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use media query instead of conditional render

Browse Source
This commit is contained in:
Sinclair Chen 2022-10-02 09:22:43 -07:00
parent cae35bc05e
commit 8484fcd54e
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/pages/embed/[username]/[contractSlug].tsx
View File

@ -79,12 +79,16 @@ export function ContractEmbed(props: EmbedProps) {
creatorId: contract.creatorId,
})
const { height = 0 } = useWindowSize()
return height < 250 ? (
<ContractCard contract={contract} className="h-screen" />
) : (
<ContractSmolView {...props} />
// return (height < 250px) ? Card : SmolView
return (
<>
<div className="contents [@media(min-height:250px)]:hidden">
<ContractCard contract={contract} className="h-screen" />
</div>
<div className="hidden [@media(min-height:250px)]:contents">
<ContractSmolView {...props} />
</div>
</>
)
}