Adds hover state to carousels (ZcashFoundation#318)

This adds a nice hover state to carousels so they darken when you hover over them. <img width="982" alt="Screen Shot 2024-07-20 at 10 47 18 AM" src="https://github.com/user-attachments/assets/50f9039a-b81c-4949-828b-0651566b0a70"> --------- Co-authored-by: Skylar Saveland <skylar.saveland@gmail.com>
skyl · Aug 3, 2024 · c6f8193 · c6f8193
1 parent 287701d
commit c6f8193
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 25 deletions.
diff --git a/ts/react/free2z/src/components/CreatorCarousel.tsx b/ts/react/free2z/src/components/CreatorCarousel.tsx
@@ -12,6 +12,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import SwiperLoadingAnimation from './SwiperLoadingAnimation';
 import { useTransitionNavigate } from '../hooks/useTransitionNavigate';
 import { HOME_CAROUSEL_BREAKPOINTS } from './HomeCarouselConstants';
+import HoverCard from './common/HoverCard';
 
 SwiperCore.use([Autoplay, Navigation]);
 
@@ -130,17 +131,7 @@ export default function CreatorCarousel(props: CreatorCarouselProps) {
                         <div
                             ref={index === creators.length - 1 ? lastElement : null}
                         >
-                            <Card
-                                style={{
-                                    width: '90%',
-                                    maxWidth: '400px',
-                                    minHeight: 220,
-                                    position: 'relative',
-                                    marginLeft: 'auto',
-                                    marginRight: 'auto',
-                                    cursor: 'pointer',
-                                    marginBottom: "0.5em",
-                                }}
+                            <HoverCard
                                 onClick={() => {
                                     navigate(`/${creator.username}`)
                                 }}
@@ -199,7 +190,7 @@ export default function CreatorCarousel(props: CreatorCarouselProps) {
                                         {truncate(creator.full_name || creator.username, 33)}
                                     </Typography>
                                 </CardContent>
-                            </Card>
+                            </HoverCard>
                         </div>
                     </SwiperSlide>
                 ))}

diff --git a/ts/react/free2z/src/components/common/HoverCard.tsx b/ts/react/free2z/src/components/common/HoverCard.tsx
@@ -0,0 +1,27 @@
+import { styled } from '@mui/material/styles';
+import { Card, CardProps } from '@mui/material';
+
+const StyledCard = styled(Card)(({ theme }) => ({
+    transition: 'background-color 0.3s',
+    '&:hover': {
+        backgroundColor: theme.palette.action.hover,
+    },
+}));
+
+const HoverCard: React.FC<CardProps> = (props) => {
+    return <StyledCard {...props}
+        style={{
+            width: '90%',
+            maxWidth: '400px',
+            minHeight: 220,
+            position: 'relative',
+            marginLeft: 'auto',
+            marginRight: 'auto',
+            cursor: 'pointer',
+            marginBottom: '0.5em',
+        }}
+
+    />;
+};
+
+export default HoverCard;
diff --git a/ts/react/free2z/src/components/zPageCarousel.tsx b/ts/react/free2z/src/components/zPageCarousel.tsx
@@ -12,7 +12,7 @@ import { PageInterface } from './PageRenderer';
 import SwiperLoadingAnimation from './SwiperLoadingAnimation';
 import { useTransitionNavigate } from '../hooks/useTransitionNavigate';
 import { HOME_CAROUSEL_BREAKPOINTS } from './HomeCarouselConstants';
-
+import HoverCard from './common/HoverCard';
 
 SwiperCore.use([Autoplay, Navigation]);
 
@@ -120,17 +120,7 @@ export default function ZPageCarousel(props: ZPageCarouselProps) {
                             ref={index === zpages.length - 1 ? lastElement : null}
                         >
 
-                            <Card
-                                style={{
-                                    width: '90%',
-                                    maxWidth: '400px',
-                                    minHeight: 220,
-                                    position: 'relative',
-                                    marginLeft: 'auto',
-                                    marginRight: 'auto',
-                                    cursor: 'pointer',
-                                    marginBottom: '0.5em',
-                                }}
+                            <HoverCard
                                 onClick={() => {
                                     navigate(zpage.get_url);
                                 }}
@@ -214,7 +204,7 @@ export default function ZPageCarousel(props: ZPageCarouselProps) {
                                         {zpage.content}
                                     </Typography>
                                 </CardContent>
-                            </Card>
+                            </HoverCard>
                         </div>
                     </SwiperSlide>