Merge pull request #50 from simonyiszk/qna-button-highlight

feat: add qna button highlight
simonyiszk · Mar 17, 2024 · b6492cd · b6492cd
2 parents 0036a34 + 77a933a
commit b6492cd
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 10 deletions.
diff --git a/components/common/header.tsx b/components/common/header.tsx
@@ -16,7 +16,7 @@ export function Header({ children, className, corner, ...props }: HeaderProps) {
   return (
     <View className={cn('space-y-5 mx-5', className)} {...props}>
       {(showBackButton || corner) && (
-        <View className='flex flex-row items-center justify-between'>
+        <View className='flex flex-row items-center justify-between z-10'>
           {showBackButton && (
             <Pressable onPress={navigation.goBack}>
               <Feather name='arrow-left' size={30} color={extendedColors.primary['500']} />

diff --git a/components/schedule/elements/qna-button.tsx b/components/schedule/elements/qna-button.tsx
@@ -1,22 +1,59 @@
 import { Feather } from '@expo/vector-icons';
 import { useNavigation } from 'expo-router';
-import { Pressable } from 'react-native';
+import { useState } from 'react';
+import { Animated, Pressable, View } from 'react-native';
 import { NativeStackNavigationProp } from 'react-native-screens/native-stack';
 
 import { extendedColors } from '../../../theme/extendedColors';
+import { usePulseAnimation } from '../../../utils/animation.utils';
+import { cn } from '../../../utils/common.utils';
+import { ItemCard } from '../../base/item-card';
+import { StyledText } from '../../base/text';
 
 interface QnaButtonProps {
   slug: string;
+  highlight?: boolean;
 }
 
-export function QnaButton({ slug }: QnaButtonProps) {
+export function QnaButton({ slug, highlight }: QnaButtonProps) {
+  const [promptOpen, setPromptOpen] = useState(highlight ?? false);
+  const animation = usePulseAnimation(1000);
   const router = useNavigation<NativeStackNavigationProp<{ qna: { id: string } }>>();
   const onPress = () => {
     router.navigate('qna', { id: slug });
   };
   return (
-    <Pressable onPress={onPress}>
-      <Feather name='message-circle' color={extendedColors.slate['500']} size={30} />
-    </Pressable>
+    <View className='relative'>
+      <Pressable onPress={onPress}>
+        <Animated.View
+          style={{
+            opacity: highlight ? animation.opacity : 1,
+          }}
+          className={cn({
+            'bg-primary-500 rounded-full p-2': highlight,
+          })}
+        >
+          <Feather
+            name='message-circle'
+            color={highlight ? 'white' : extendedColors.slate[500]}
+            size={highlight ? 26 : 30}
+          />
+        </Animated.View>
+      </Pressable>
+      {promptOpen && (
+        <ItemCard
+          onPress={onPress}
+          className='absolute top-full right-1/2 shadow-md w-40 rounded-tr-none flex-row items-center space-x-2'
+        >
+          <Pressable onPress={() => setPromptOpen(false)}>
+            <Feather name='x' size={20} color={extendedColors.slate[300]} />
+          </Pressable>
+          <View>
+            <StyledText className='text-xl font-raleway-bold'>Kérdezz</StyledText>
+            <StyledText>az előadótól!</StyledText>
+          </View>
+        </ItemCard>
+      )}
+    </View>
   );
 }
diff --git a/components/schedule/layouts/presentation-details-page.tsx b/components/schedule/layouts/presentation-details-page.tsx
@@ -1,5 +1,6 @@
 import { usePresentation } from '../../../hooks/use-presentation';
 import { ConferenceService } from '../../../services/conference.service';
+import { isPresentationCurrent } from '../../../utils/presentation.utils';
 import { Screen } from '../../base/screen';
 import { ScrollContent } from '../../base/scroll-content';
 import { StyledText } from '../../base/text';
@@ -19,13 +20,14 @@ export function PresentationDetailsPage({ slug }: ScheduleDetailsPageProps) {
   const { data, isLoading } = usePresentation(slug);
   const startTime = ConferenceService.getFormattedTimestamp(data?.startTime ?? '');
   const endTime = ConferenceService.getFormattedTimestamp(data?.endTime ?? '');
+  const isCurrent = data ? isPresentationCurrent(data) : false;
   return (
     <Screen analyticsScreenName={`presentation-details/` + slug}>
       <Header
         corner={
           <>
             {data && <FavoriteButton presentation={data} />}
-            <QnaButton slug={slug} />
+            <QnaButton highlight={isCurrent} slug={slug} />
           </>
         }
       >

diff --git a/utils/animation.utils.ts b/utils/animation.utils.ts
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { Animated, Easing } from 'react-native';
 
-export function usePulseAnimation() {
+export function usePulseAnimation(duration = 1000) {
   const [pulseValue] = useState(new Animated.Value(0));
 
   useEffect(() => {
@@ -10,13 +10,13 @@ export function usePulseAnimation() {
         Animated.sequence([
           Animated.timing(pulseValue, {
             toValue: 1,
-            duration: 1000,
+            duration: duration,
             easing: Easing.inOut(Easing.ease),
             useNativeDriver: true,
           }),
           Animated.timing(pulseValue, {
             toValue: 0,
-            duration: 1000,
+            duration: duration,
             easing: Easing.inOut(Easing.ease),
             useNativeDriver: true,
           }),