minor changes #7

ukorvl · Aug 28, 2023 · 0ec7df5 · 0ec7df5
1 parent 93d34db
commit 0ec7df5
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/components/Teachers/Teacher.tsx b/components/Teachers/Teacher.tsx
@@ -5,10 +5,10 @@
 import {m} from 'framer-motion';
 import clsx from 'clsx';
 import {useHover} from '@/lib/shared/useHover';
+import useDisableRightClick from '@/lib/shared/useDisableRightClick';
 import {TeachersListConfigItem} from './teachersListConfig';
 import ImageWrapper from '../ImageWrapper/ImageWrapper';
 import TeacherInfo from './TeacherInfo';
-import useDisableRightClick from '@/lib/shared/useDisableRightClick';
 
 /**
  * Props.

diff --git a/components/Teachers/TeacherInfo.tsx b/components/Teachers/TeacherInfo.tsx
@@ -4,6 +4,7 @@
 
 import {memo} from 'react';
 import clsx from 'clsx';
+import {m} from 'framer-motion';
 import {TeachersListConfigItem} from './teachersListConfig';
 
 /**
@@ -23,7 +24,6 @@ const containerCn = clsx(
   'items-center',
   'w-full',
   'h-full',
-  'pointer-events-none',
   'absolute',
   'bottom-0',
   'left-0',
@@ -32,17 +32,27 @@ const containerCn = clsx(
 );
 const nameCn = clsx('text-4xl', 'font-bold', 'text-center', 'pointer-events-auto');
 
+const containerVariants = {
+  visible: {opacity: 1, y: 0},
+  hidden: {opacity: 0, y: '2rem', transition: {delay: 0.25}},
+};
+
 /**
  * @param {TeacherInfoProps} props Props.
  * @returns React component.
  */
 function TeacherInfo({isVisible, name, danceStyles, subtitle}: TeacherInfoProps) {
   return (
-    <div className={containerCn}>
+    <m.div
+      className={containerCn}
+      animate={isVisible ? 'visible' : 'hidden'}
+      variants={containerVariants}
+      transition={{duration: 0.5}}
+    >
       <div className={nameCn}>{name}</div>
       <div>{subtitle}</div>
       <div>{danceStyles.join(', ')}</div>
-    </div>
+    </m.div>
   );
 }