filter styling

package.json

@@ -53,6 +53,7 @@
     "react-native-element-dropdown": "^2.12.2",
     "react-native-elements": "^3.4.3",
     "react-native-gesture-handler": "~2.20.2",
+    "react-native-paper": "^5.12.5",
     "react-native-reanimated": "~3.16.1",
     "react-native-safe-area-context": "^4.12.0",
     "react-native-screens": "~4.1.0",

src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { Text, View } from 'react-native';
+import { Checkbox } from 'react-native-paper';
+import colors from '@/styles/colors';
+import { styles } from './styles';
+
+interface CheckboxComponentProps {
+  checked: boolean;
+  onToggle: () => void;
+  label: string;
+}
+
+const CheckboxComponent: React.FC<CheckboxComponentProps> = ({
+  checked,
+  label,
+}) => {
+  const [isChecked, setChecked] = useState(checked);
+  return (
+    <View style={styles.checkboxContainer}>
+      <View style={styles.checkboxWrapper}>
+        <Checkbox
+          status={isChecked ? 'checked' : 'unchecked'}
+          onPress={() => {
+            setChecked(!isChecked);
+          }}
+          color={colors.primary}
+          uncheckedColor={colors.gray5}
+        />
+      </View>
+      <Text style={styles.checkboxLabel}>{label}</Text>
+    </View>
+  );
+};
+
+export default CheckboxComponent;

src/components/Checkbox/styles.ts

@@ -0,0 +1,24 @@
+import { StyleSheet } from 'react-native';
+import colors from '@/styles/colors';
+import typography from '@/styles/typography';
+
+export const styles = StyleSheet.create({
+  checkboxContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  checkboxWrapper: {
+    width: 20,
+    height: 20,
+    backgroundColor: colors.gray5,
+    borderRadius: 5,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 10,
+  },
+  checkboxLabel: {
+    marginLeft: 10,
+    ...typography.normalRegular,
+    color: colors.gray3,
+  },
+});