use motion library and add list types

SwissDataScienceCenter · Nov 27, 2023 · b35394b · b35394b
1 parent aa38069
commit b35394b
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/client/src/components/entities/Buttons.tsx b/client/src/components/entities/Buttons.tsx
@@ -28,7 +28,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Funnel, FunnelFill } from "react-bootstrap-icons";
 import { Link } from "react-router-dom";
 import { Button, UncontrolledTooltip } from "reactstrap";
-import { m } from "framer-motion";
+import { motion } from "framer-motion";
 import SimpleSessionButton from "../../features/session/components/SimpleSessionButton";
 import { stylesByItemType } from "../../utils/helpers/HelperFunctions";
 import { EntityType } from "./Entities";
@@ -48,7 +48,7 @@ function EntityButton({
   switch (type) {
     case "project":
       return animated ? (
-        <m.div
+        <motion.div
           className="card-button"
           whileInView={{
             scale: [0.9, 1, 0.9, 1, 0.9, 1],
@@ -57,7 +57,7 @@ function EntityButton({
           viewport={{ once: false }}
         >
           <SimpleSessionButton fullPath={slug} fromLanding={fromLanding} />
-        </m.div>
+        </motion.div>
       ) : (
         <div className="card-button">
           <SimpleSessionButton fullPath={slug} />

diff --git a/client/src/components/list/ListCard.tsx b/client/src/components/list/ListCard.tsx
@@ -84,7 +84,12 @@ function ListCard({
               </div>
             )}
           </Link>
-          <EntityButton type={itemType} slug={path ?? ""} animated={animated} fromLanding={fromLanding} />
+          <EntityButton
+            type={itemType}
+            slug={path ?? ""}
+            animated={animated}
+            fromLanding={fromLanding}
+          />
           <Link
             className={cx("card-body", "d-block", "text-decoration-none")}
             to={url}

diff --git a/client/src/components/list/list.types.tsx b/client/src/components/list/list.types.tsx
@@ -46,6 +46,8 @@ export interface ListElementProps {
   type?: ListDisplayType;
   url: string;
   visibility: Visibilities;
+  animated?: boolean;
+  fromLanding?: boolean;
 }
 
 export interface VisibilityIconProps {