8693cb4dw create status button

%ProgramData%/Microsoft/Windows/UUS/State/_active.uusver

@@ -0,0 +1 @@
+1213.2310.20012.0

App.tsx

@@ -1,7 +1,8 @@
 import { StatusBar } from 'expo-status-bar';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { PrimaryButton, SwitchTheme } from '@/components';
+import { SwitchTheme } from '@/components';
+import { PrimaryButton, StatusButton } from '@/components/Button';
 import { ThemeProvider } from '@/hooks';
 
 const App = () => {
@@ -12,6 +13,11 @@ const App = () => {
         <StatusBar style="auto" />
         <SwitchTheme />
         <PrimaryButton onPress={() => {}} title="dasdsa" />
+        <StatusButton onPress={() => {}} status="Inaccessible" />
+        <StatusButton onPress={() => {}} status="Accessible" />
+        <StatusButton onPress={() => {}} status="DoNotDisturb" />
+        <StatusButton onPress={() => {}} status="BeRightBack" />
+        <StatusButton onPress={() => {}} status="other" />
       </View>
     </ThemeProvider>
   );

package.json

@@ -11,13 +11,17 @@
     "test": "jest"
   },
   "dependencies": {
+    "@expo/webpack-config": "^19.0.0",
     "@react-native-async-storage/async-storage": "^1.21.0",
     "@react-native/metro-config": "^0.73.3",
     "expo": "~49.0.15",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-hook-form": "^7.48.2",
     "react-native": "0.72.6",
+    "react-native-svg": "13.9.0",
+    "react-native-web": "~0.19.6",
     "yarn": "^1.22.21",
     "yup": "^1.3.2"
   },
@@ -27,6 +31,7 @@
     "@testing-library/react-native": "^12.4.3",
     "@types/jest": "^29.5.11",
     "@types/react": "~18.2.14",
+    "babel-plugin-module-resolver": "^5.0.0",
     "eslint": "^8.54.0",
     "eslint-config-universe": "^12.0.0",
     "eslint-plugin-jest": "^27.6.0",

src/components/Button/StatusButton.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { GestureResponderEvent, Pressable, StyleSheet } from 'react-native';
+
+import { selectStatus, useTheme } from '@/hooks';
+import { Status } from '@/types/status';
+
+type Props = React.ComponentPropsWithRef<typeof Pressable> & {
+  status: Status;
+  onPress: (event: GestureResponderEvent) => void;
+};
+
+const StatusButton = (param: Props) => {
+  const { themedStyles } = useTheme();
+  const actualStatus: Status = 'Inaccessible'; //added temporarily until the selected status is supported
+  const buttonStatus: Status = param.status;
+
+  return (
+    <Pressable
+      style={[
+        styles.button,
+        actualStatus === param.status
+          ? { backgroundColor: themedStyles.buttonActive }
+          : { backgroundColor: themedStyles.buttonBackground },
+      ]}
+    >
+      {selectStatus(buttonStatus)}
+    </Pressable>
+  );
+};
+export default StatusButton;
+
+const styles = StyleSheet.create({
+  button: {
+    justifyContent: 'center',
+    width: 232,
+    height: 44,
+    borderRadius: 10,
+    paddingLeft: 10,
+    marginTop: 10,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 1,
+    shadowRadius: 10,
+    elevation: 5,
+    // to improve the shade
+  },
+});

src/components/Button/StatusButton/AccessibleStatusButton.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+
+import { useTheme } from '@/hooks';
+
+const AccessibleStatusButton = () => {
+  const { themedStyles } = useTheme();
+  return (
+    <View>
+      <Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <Path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM19.6005 7.20247C19.8067 7.38614 19.825 7.70219 19.6413 7.9084L10.2774 18.4218C10.2612 18.44 10.244 18.4567 10.2259 18.4719C10.2144 18.4839 10.2022 18.4954 10.1893 18.5064C9.97928 18.6856 9.66369 18.6606 9.48444 18.4506L6.75481 15.2516C6.57557 15.0415 6.60055 14.7259 6.81062 14.5467C7.02068 14.3674 7.33627 14.3924 7.51552 14.6025L9.87603 17.3689L18.8946 7.2433C19.0782 7.03709 19.3943 7.01881 19.6005 7.20247Z"
+          fill="#37B744"
+        />
+      </Svg>
+      <Text style={{ ...styles.text, color: themedStyles.buttonText }}>
+        Accesible
+      </Text>
+    </View>
+  );
+};
+export default AccessibleStatusButton;
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 12,
+    paddingHorizontal: 30,
+    paddingVertical: 4,
+    position: 'absolute',
+  },
+});

src/components/Button/StatusButton/BeRightBackStatusButton.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+
+import { useTheme } from '@/hooks';
+
+const BeRightBackStatusButton = () => {
+  const { themedStyles } = useTheme();
+  return (
+    <View>
+      <Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <Path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM11.5001 12.5588L11.5002 12.5686C11.4966 12.7072 11.5502 12.8465 11.6597 12.9482L16.0678 17.0428C16.2701 17.2307 16.5865 17.219 16.7744 17.0167C16.9624 16.8144 16.9507 16.498 16.7484 16.3101L12.5001 12.3639V3.5C12.5001 3.22386 12.2762 3 12.0001 3C11.7239 3 11.5001 3.22386 11.5001 3.5V12.5588Z"
+          fill="#FED815"
+        />
+      </Svg>
+      <Text style={{ ...styles.text, color: themedStyles.buttonText }}>
+        Be Right Back
+      </Text>
+    </View>
+  );
+};
+export default BeRightBackStatusButton;
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 12,
+    paddingHorizontal: 30,
+    paddingVertical: 4,
+    position: 'absolute',
+  },
+});

src/components/Button/StatusButton/DefaultButtonStatus.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+
+import { useTheme } from '@/hooks';
+
+const DefaultButtonStatus = () => {
+  const { themedStyles } = useTheme();
+  return (
+    <View>
+      <Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <Circle cx="12" cy="12" r="12" fill="#D9D9D9" />
+      </Svg>
+      <Text style={{ ...styles.text, color: themedStyles.buttonText }}>
+        default
+      </Text>
+    </View>
+  );
+};
+export default DefaultButtonStatus;
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 12,
+    paddingHorizontal: 30,
+    paddingVertical: 4,
+    position: 'absolute',
+  },
+});

src/components/Button/StatusButton/DoNotDisturbStatusButton.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+
+import { useTheme } from '@/hooks';
+
+const DoNotDisturbStatusButton = () => {
+  const { themedStyles } = useTheme();
+  return (
+    <View>
+      <Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <Circle cx="12" cy="12" r="12" fill="#DF2B2B" />
+      </Svg>
+
+      <Text style={{ ...styles.text, color: themedStyles.buttonText }}>
+        Do not Disturb
+      </Text>
+    </View>
+  );
+};
+export default DoNotDisturbStatusButton;
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 12,
+    paddingHorizontal: 30,
+    paddingVertical: 4,
+    position: 'absolute',
+  },
+});

src/components/Button/StatusButton/InaccessibleStatusButton.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+
+import { useTheme } from '@/hooks';
+
+const InaccessibleStatusButton = () => {
+  const { themedStyles } = useTheme();
+  return (
+    <View>
+      <Svg width="24" height="24" viewBox="0 0 24 24" fill="#000">
+        <Path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM5.64645 5.64645C5.84171 5.45118 6.15829 5.45118 6.35355 5.64645L12 11.2929L17.6464 5.64646C17.8417 5.4512 18.1583 5.4512 18.3535 5.64646C18.5488 5.84172 18.5488 6.1583 18.3535 6.35357L12.7071 12L18.3535 17.6464C18.5488 17.8417 18.5488 18.1583 18.3535 18.3535C18.1583 18.5488 17.8417 18.5488 17.6464 18.3535L12 12.7071L6.35355 18.3536C6.15829 18.5488 5.84171 18.5488 5.64645 18.3536C5.45118 18.1583 5.45118 17.8417 5.64645 17.6464L11.2929 12L5.64645 6.35355C5.45118 6.15829 5.45118 5.84171 5.64645 5.64645Z"
+          fill="#D9D9D9"
+        />
+      </Svg>
+
+      <Text style={{ ...styles.text, color: themedStyles.buttonText }}>
+        Inaccessible
+      </Text>
+    </View>
+  );
+};
+export default InaccessibleStatusButton;
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 12,
+    paddingHorizontal: 30,
+    paddingVertical: 4,
+    position: 'absolute',
+  },
+});

src/components/Button/index.ts

@@ -1 +1,2 @@
 export { default as PrimaryButton } from './PrimaryButton';
+export { default as StatusButton } from './StatusButton';

src/components/index.ts

@@ -1,2 +1 @@
-export { default as PrimaryButton } from './PrimaryButton';
 export { default as SwitchTheme } from './SwitchTheme';

src/hooks/index.ts

@@ -1 +1,2 @@
+export * from './useStatus';
 export * from './useTheme';

src/hooks/useStatus.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import AccessibleStatusButton from '@/components/Button/StatusButton/AccessibleStatusButton';
+import BeRightBackStatusButton from '@/components/Button/StatusButton/BeRightBackStatusButton';
+import DefaultButtonStatus from '@/components/Button/StatusButton/DefaultButtonStatus';
+import DoNotDisturbStatusButton from '@/components/Button/StatusButton/DoNotDisturbStatusButton';
+import InaccessibleStatusButton from '@/components/Button/StatusButton/InaccessibleStatusButton';
+import { Status } from '@/types/status';
+
+export const selectStatus = (property: Status) => {
+  switch (property) {
+    case 'Inaccessible':
+      return <InaccessibleStatusButton />;
+    case 'Accessible':
+      return <AccessibleStatusButton />;
+    case 'DoNotDisturb':
+      return <DoNotDisturbStatusButton />;
+    case 'BeRightBack':
+      return <BeRightBackStatusButton />;
+    default:
+      return <DefaultButtonStatus />;
+  }
+};

src/types/status.ts

@@ -0,0 +1,7 @@
+export const STATUSES = [
+  'Inaccessible',
+  'Accessible',
+  'DoNotDisturb',
+  'BeRightBack',
+];
+export type Status = (typeof STATUSES)[number];

style.ts

@@ -16,8 +16,14 @@ export const globalStyles = StyleSheet.create({
 
 export const darkColors = {
   primary: 'blue',
+  buttonBackground: 'blue',
+  buttonText: 'white',
+  buttonActive: '#E4E4E4',
 };
 
 export const lightColors = {
   primary: 'green',
+  buttonBackground: 'white',
+  buttonText: 'black',
+  buttonActive: '#E4E4E4',
 };