feat(components): create kebab menu

app/components/KebabMenu/KebabMenu.mocks.tsx

@@ -0,0 +1,37 @@
+import { Ionicons } from '@expo/vector-icons';
+
+const settings = [
+  {
+    icon: <Ionicons name="notifications-circle-outline" size={22} color="black" />,
+    text: 'Send again notification',
+    color: 'black',
+  },
+  {
+    icon: <Ionicons name="ellipsis-vertical" size={20} color="black" />,
+    text: 'Edit',
+    color: 'black',
+  },
+  {
+    icon: <Ionicons name="remove-circle-outline" size={20} color="black" />,
+    text: 'Delete on today list',
+    color: 'black',
+  },
+  {
+    icon: (
+      <Ionicons
+        name="create-outline"
+        size={20}
+        color="black"
+        style={{ position: 'relative', bottom: 3 }}
+      />
+    ),
+    text: 'Change Status',
+    color: 'black',
+  },
+  {
+    icon: <Ionicons name="trash-outline" size={20} color="black" />,
+    text: 'Delete Event',
+    color: 'red',
+  },
+];
+export { settings };

app/components/KebabMenu/KebabMenu.tsx

@@ -0,0 +1,76 @@
+/*
+    Inspiration: https://dribbble.com/shots/15066078-Add-button
+*/
+import * as React from 'react';
+import { Dimensions, TouchableOpacity, View } from 'react-native';
+
+import SettingsItem from '@oxvo-mobile/components/SettingsItem/SettingsItem';
+
+import { Ionicons } from '@expo/vector-icons';
+import { AnimatePresence, Image as MImage, Text as MText, View as MView } from 'moti';
+
+import { settings } from './KebabMenu.mocks';
+
+export default function MoreButton({ top = true }) {
+  const [active, setActive] = React.useState(false);
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <View style={{ alignItems: 'center' }}>
+        <AnimatePresence>
+          {!!active && (
+            <MView
+              from={{ opacity: 0, translateY: 0 }}
+              animate={{
+                opacity: 1,
+                translateY: settings.length * 40 + 10,
+              }}
+              exit={{ opacity: 0, translateY: 10 }}
+              style={{
+                backgroundColor: '#fff',
+                borderRadius: 20,
+                width: 250,
+                borderColor: '#cccccc',
+                borderWidth: 1,
+                padding: 10,
+                position: 'absolute',
+                bottom: 0,
+              }}
+            >
+              {settings.map((item, index) => {
+                return (
+                  <SettingsItem
+                    Icon={item.icon}
+                    text={item.text}
+                    key={index}
+                    color={item.color}
+                    idx={index + 1 !== settings.length ? index + 1 : null}
+                  />
+                );
+              })}
+            </MView>
+          )}
+        </AnimatePresence>
+        <TouchableOpacity onPress={() => setActive((active) => !active)} activeOpacity={1}>
+          <View
+            style={{
+              width: 50,
+              height: 50,
+              borderRadius: 50,
+
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <Ionicons name="ellipsis-vertical" size={24} color="black" />
+          </View>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}

app/components/Package/CircleProgress.constant.tsx

@@ -0,0 +1,7 @@
+const SIZE = 48;
+const STROKE_WIDTH = 4;
+const CENTER = SIZE / 2;
+const RADIUS = SIZE / 2 - STROKE_WIDTH / 2;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+
+export { CIRCUMFERENCE, CENTER, RADIUS, SIZE, STROKE_WIDTH };

app/components/Package/CircleProgress.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated, {
+  useAnimatedProps,
+  useSharedValue,
+  withDelay,
+  withTiming,
+} from 'react-native-reanimated';
+import Svg, { Circle } from 'react-native-svg';
+
+import { CENTER, CIRCUMFERENCE, RADIUS, SIZE, STROKE_WIDTH } from './CircleProgress.constant';
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+const CircleProgress = ({ current, max, children }: any) => {
+  const animatedValue = useSharedValue(0);
+  useEffect(() => {
+    animatedValue.value = withDelay(
+      500,
+      withTiming(CIRCUMFERENCE - (CIRCUMFERENCE * current) / max, {
+        duration: 500,
+      })
+    );
+  }, []);
+  const animatedProps = useAnimatedProps(() => {
+    return {
+      strokeDashoffset: animatedValue.value,
+    };
+  });
+
+  return (
+    <View style={{ width: SIZE, height: SIZE }}>
+      <Svg width={SIZE} height={SIZE} style={{ transform: [{ rotateZ: '-90deg' }] }}>
+        <Circle stroke="#E6E7E8" cx={CENTER} cy={CENTER} r={RADIUS} strokeWidth={STROKE_WIDTH} />
+        <AnimatedCircle
+          stroke="#645CBB"
+          cx={CENTER}
+          cy={CENTER}
+          r={RADIUS}
+          strokeWidth={STROKE_WIDTH}
+          strokeDasharray={CIRCUMFERENCE}
+          animatedProps={animatedProps}
+        />
+      </Svg>
+
+      <View style={styles.text}>{children}</View>
+    </View>
+  );
+};
+
+export default CircleProgress;
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    flex: 1,
+  },
+  text: {
+    top: 8,
+    left: 8,
+    right: 8,
+    bottom: 8,
+    position: 'absolute',
+    borderRadius: RADIUS - STROKE_WIDTH * 1,
+    padding: 1,
+  },
+});

app/components/Package/IconHelper.tsx

@@ -0,0 +1,23 @@
+import { AntDesign, FontAwesome5, MaterialCommunityIcons } from '@expo/vector-icons';
+
+export default function getIconByNumber(number: any) {
+  let icon;
+
+  switch (number) {
+    case 5:
+      icon = <MaterialCommunityIcons name="arm-flex" size={24} color="black" />;
+      break;
+    case 10:
+      icon = <FontAwesome5 name="swimmer" size={24} color="black" />;
+      break;
+    case 15:
+      icon = <MaterialCommunityIcons name="yoga" size={24} color="black" />;
+      break;
+
+    default:
+      icon = <AntDesign name="meh" size={24} color="black" />;
+      break;
+  }
+
+  return icon;
+}