feat: add hover on EmblaCarousel to show edit button (#538)

app/src/routes/projects/ProjectsTab/Select/Carousel.tsx

@@ -4,6 +4,8 @@ import debounce from 'lodash/debounce';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { getPreviewImage } from '../../helpers';
 import { Project } from '/common/models/project';
+import EditAppButton from './EditAppButton';
+import { motion, Variants } from 'framer-motion';
 
 interface EmblaCarouselProps {
  slides: Project[];
@@ -12,6 +14,28 @@ interface EmblaCarouselProps {
 
 const EmblaCarousel: React.FC<EmblaCarouselProps> = ({ slides, onSlideChange }) => {
  const WHEEL_SENSITIVITY = 10;
+ const containerVariants: Variants = {
+ rest: { opacity: 0, transition: { ease: 'easeIn', duration: 0.2 } },
+ hover: {
+ opacity: 1,
+ transition: {
+ duration: 0.3,
+ ease: 'easeOut',
+ },
+ },
+ };
+ const buttonVariants: Variants = {
+ rest: { opacity: 0, y: -5, transition: { ease: 'easeIn', duration: 0.2 } },
+ hover: {
+ opacity: 1,
+ y: 0,
+ transition: {
+ duration: 0.3,
+ type: 'tween',
+ ease: 'easeOut',
+ },
+ },
+ };
  const [emblaRef, emblaApi] = useEmblaCarousel({
  axis: 'y',
  loop: false,
@@ -122,7 +146,7 @@ const EmblaCarousel: React.FC<EmblaCarouselProps> = ({ slides, onSlideChange })
  {slides.map((slide) => (
  <div
  key={slide.id}
- className="embla__slide h-full relative flex items-center justify-center"
+ className="embla__slide h-full relative flex items-center justify-center select-none"
  style={{
  flex: '0 0 90%',
  minWidth: 0,
@@ -136,8 +160,20 @@ const EmblaCarousel: React.FC<EmblaCarouselProps> = ({ slides, onSlideChange })
  className="rounded-lg object-cover max-w-[60%] max-h-[80%] bg-foreground"
  />
  ) : (
- <div className="w-[60%] h-[80%] rounded-lg bg-gradient-to-t from-gray-800/40 via-gray-500/40 to-gray-400/40 border-gray-500 border-[0.5px]"></div>
+ <div className="w-[60%] h-[80%] rounded-lg bg-gradient-to-t from-gray-800/40 via-gray-500/40 to-gray-400/40 border-gray-500 border-[0.5px]" />
  )}
+ <motion.div
+ initial="rest"
+ whileHover="hover"
+ animate="rest"
+ variants={containerVariants}
+ className="absolute flex items-center justify-center w-[60%] h-[80%] z-10 bg-black-30"
+ >
+ <EditAppButton
+ variants={buttonVariants}
+ project={slide}
+ />
+ </motion.div>
  </div>
  ))}
  </div>

app/src/routes/projects/ProjectsTab/Select/EditAppButton.tsx

@@ -0,0 +1,34 @@
+import { useProjectsManager } from '@/components/Context';
+import { Button } from '@/components/ui/button';
+import { sendAnalytics } from '@/lib/utils';
+import { Pencil2Icon } from '@radix-ui/react-icons';
+import { motion } from 'framer-motion';
+import { ComponentProps } from 'react';
+import { Project } from '/common/models/project';
+
+const ButtonMotion = motion(Button)
+
+interface EditAppButtonProps extends ComponentProps<typeof ButtonMotion> {
+ project: Project;
+}
+
+export default function EditAppButton({ project, ...props }: EditAppButtonProps) {
+ const projectsManager = useProjectsManager();
+
+ const selectProject = (project: Project) => {
+ projectsManager.project = project;
+ sendAnalytics('open project', { id: project.id, url: project.url });
+ };
+ return (
+ <ButtonMotion
+ size="default"
+ variant={'outline'}
+ className="gap-2 bg-background-active border-[0.5px] border-border-active w-full lg:w-auto"
+ onClick={() => selectProject(project)}
+ {...props}
+ >
+ <Pencil2Icon />
+ <p> Edit App </p>
+ </ButtonMotion>
+ );
+}

app/src/routes/projects/ProjectsTab/Select/Info.tsx

@@ -1,15 +1,11 @@
-import { useProjectsManager } from '@/components/Context';
-import { Button } from '@/components/ui/button';
-import { sendAnalytics } from '@/lib/utils';
-import { Pencil2Icon } from '@radix-ui/react-icons';
 import { AnimatePresence, motion } from 'framer-motion';
 import { observer } from 'mobx-react-lite';
+import EditAppButton from './EditAppButton';
 import ProjectSettingsButton from './ProjectSettingsButton';
 import { timeSince } from '/common/helpers';
 import { Project } from '/common/models/project';
 
 const ProjectInfo = observer(({ project, direction }: { project: Project; direction: number }) => {
- const projectsManager = useProjectsManager();
 
  const variants = {
  enter: (direction: number) => ({
@@ -26,11 +22,6 @@ const ProjectInfo = observer(({ project, direction }: { project: Project; direct
  }),
  };
 
- const selectProject = (project: Project) => {
- projectsManager.project = project;
- sendAnalytics('open project', { id: project.id, url: project.url });
- };
-
  return (
  project && (
  <>
@@ -53,15 +44,7 @@ const ProjectInfo = observer(({ project, direction }: { project: Project; direct
  <p>{project.url}</p>
  </div>
  <div className="flex flex-col sm:flex-row gap-3 sm:gap-5 w-full">
- <Button
- size="default"
- variant={'outline'}
- className="gap-2 bg-background-active border-[0.5px] border-border-active w-full lg:w-auto"
- onClick={() => selectProject(project)}
- >
- <Pencil2Icon />
- <p> Edit App </p>
- </Button>
+ <EditAppButton project={project} />
  <ProjectSettingsButton project={project} />
  </div>
  </>