Jeroen Reumkens PRO
Preview
import { useState } from "react";
export const App = () => {
const [isExpanded, setIsExpanded] = useState(false);
return (
<div className="grid grid-cols-1 md:grid-cols-[2fr_1fr] mt-4 gap-4 max-w-[1200px] mx-auto items-start px-3">
<div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
<div className="aspect-[2/3] border border-gray-200" />
<div className="aspect-[2/3] border border-gray-200" />
<div className="aspect-[2/3] border border-gray-200" />
<div className="aspect-[2/3] border border-gray-200" />
<div className="aspect-[2/3] border border-gray-200" />
<div className="aspect-[2/3] border border-gray-200" />
<div className="aspect-[2/3] border border-gray-200" />
<div className="aspect-[2/3] border border-gray-200" />
<div className="aspect-[2/3] border border-gray-200" />
<div className="aspect-[2/3] border border-gray-200" />
<div className="aspect-[2/3] border border-gray-200" />
<div className="aspect-[2/3] border border-gray-200" />
</div>
<div aria-expanded={isExpanded} className="group max-h-[80dvh] fixed bottom-0 rounded-xl bg-gray-200 grid grid-cols-1 grid-rows-[auto_minmax(0,1fr)] max-md:w-[90%] max-md:left-1/2 max-md:-translate-x-1/2 md:max-h-[calc(100dvh-24px)] md:sticky md:top-4">
<header className="bg-[hotpink] rounded-t-xl p-3 sticky top-0">
<div className="grid grid-cols-[minmax(0,1fr)_auto] md:grid-cols-1">
<div>
<p className="font-semibold text-white text-sm md:text-lg">Jouw wensenlijstje</p>
<p className="text-sm">5 cadeaus</p>
</div>
<div className="md:hidden grid items-center">
<button className="size-8 grid place-items-center hover:bg-white/10 focus-visible:bg-white-10 transition-colors rounded-md" onClick={() => setIsExpanded(e => !e)}>
<svg className="text-white -rotate-90 size-3" xmlns="http://www.w3.org/2000/svg" version="1.1" id="Capa_1" viewBox="0 0 185.343 185.343">
<g>
<path d="M51.707,185.343c-2.741,0-5.493-1.044-7.593-3.149c-4.194-4.194-4.194-10.981,0-15.175 l74.352-74.347L44.114,18.32c-4.194-4.194-4.194-10.987,0-15.175c4.194-4.194,10.987-4.194,15.18,0l81.934,81.934 c4.194,4.194,4.194,10.987,0,15.175l-81.934,81.939C57.201,184.293,54.454,185.343,51.707,185.343z"/>
</g>
</svg>
</button>
</div>
</div>
</header>
<div className="p-4 grid grid-cols-1 gap-4 overflow-auto max-md:hidden max-md:group-aria-expanded:grid">
<div className="aspect-[3/1.4] border-2 border-black bg-white rounded-2xl" />
<div className="aspect-[3/1.4] border-2 border-black bg-white rounded-2xl" />
<div className="aspect-[3/1.4] border-2 border-black bg-white rounded-2xl" />
<div className="aspect-[3/1.4] border-2 border-black bg-white rounded-2xl" />
<div className="aspect-[3/1.4] border-2 border-black bg-white rounded-2xl" />
<div className="aspect-[3/1.4] border-2 border-black bg-white rounded-2xl" />
<div className="aspect-[3/1.4] border-2 border-black bg-white rounded-2xl" />
<div className="aspect-[3/1.4] border-2 border-black bg-white rounded-2xl" />
</div>
</div>
</div>
);
}