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) => ( { 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 <img
src={theme.marqueeImage} src={theme.marqueeImage}
alt="Theme Preview" alt="Theme Preview"
@@ -185,13 +185,14 @@ const Store = () => {
</Swiper> </Swiper>
</motion.div> </motion.div>
<div className={displayTheme ? 'pointer-events-auto' : 'pointer-events-none'}>
<AnimatePresence> <AnimatePresence>
{displayTheme && ( {displayTheme && (
<motion.div <motion.div
className="fixed inset-0 z-50 flex items-end justify-center bg-black bg-opacity-70" className={`fixed inset-0 z-50 flex items-end justify-center bg-black bg-opacity-70`}
initial={{ opacity: 0, pointerEvents: 'none' }} initial={{ opacity: 0 }}
animate={{ opacity: 1, pointerEvents: 'auto' }} animate={{ opacity: 1 }}
exit={{ opacity: 0, pointerEvents: 'none' }} exit={{ opacity: 0 }}
onClick={() => setDisplayTheme(null)} onClick={() => setDisplayTheme(null)}
> >
<motion.div <motion.div
@@ -262,6 +263,7 @@ const Store = () => {
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>
</div>
{/* pagination */} {/* pagination */}
<div className='absolute z-10 flex gap-2 bottom-2 right-2'> <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"> <div className="grid grid-cols-1 gap-4 py-12 mx-auto sm:grid-cols-2 lg:grid-cols-3">
{filteredThemes.map((theme, index) => ( {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 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> <div>