fix: store popup briefly holding window control

This commit is contained in:
SethBurkart123
2024-05-21 19:16:21 +10:00
parent a2b9721041
commit 6b8dad0dea
+8 -6
View File
@@ -167,7 +167,7 @@ const Store = () => {
}}
>
{ coverThemes.map((theme, index) => (
<SwiperSlide className='relative rounded-xl overflow-clip' onClick={() => setDisplayTheme(theme)} key={index}>
<SwiperSlide className='relative cursor-pointer rounded-xl overflow-clip' onClick={() => setDisplayTheme(theme)} key={index}>
<img
src={theme.marqueeImage}
alt="Theme Preview"
@@ -185,13 +185,14 @@ const Store = () => {
</Swiper>
</motion.div>
<div className={displayTheme ? 'pointer-events-auto' : 'pointer-events-none'}>
<AnimatePresence>
{displayTheme && (
<motion.div
className="fixed inset-0 z-50 flex items-end justify-center bg-black bg-opacity-70"
initial={{ opacity: 0, pointerEvents: 'none' }}
animate={{ opacity: 1, pointerEvents: 'auto' }}
exit={{ opacity: 0, pointerEvents: 'none' }}
className={`fixed inset-0 z-50 flex items-end justify-center bg-black bg-opacity-70`}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
onClick={() => setDisplayTheme(null)}
>
<motion.div
@@ -262,6 +263,7 @@ const Store = () => {
</motion.div>
)}
</AnimatePresence>
</div>
{/* pagination */}
<div className='absolute z-10 flex gap-2 bottom-2 right-2'>
@@ -283,7 +285,7 @@ const Store = () => {
<div className="grid grid-cols-1 gap-4 py-12 mx-auto sm:grid-cols-2 lg:grid-cols-3">
{filteredThemes.map((theme, index) => (
<div key={index} className='w-full cursor-pointer'>
<div onClick={() => setDisplayTheme(theme)} key={index} className='w-full cursor-pointer'>
<div className="bg-gray-50 w-full transition-all duration-300 relative group/card flex flex-col hover:shadow-2xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1] h-auto rounded-xl p-6 border">
<div>