diff --git a/app/options/index.tsx b/app/options/index.tsx
index 976d915..2c47bb4 100644
--- a/app/options/index.tsx
+++ b/app/options/index.tsx
@@ -1,12 +1,211 @@
-import React from 'react';
-import { YStack, Text } from 'tamagui';
+import React, { useState } from 'react';
+import {
+ YStack,
+ XStack,
+ Text,
+ Switch,
+ Separator,
+ Button,
+ Theme,
+ AnimatePresence,
+ View,
+} from 'tamagui';
+import { ChevronLeft, Bell, Star, Share, Shield, Vibrate } from 'lucide-react-native';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+import { StatusBar } from 'react-native';
+import { useRouter } from 'expo-router';
+
+const SettingsScreen: React.FC = () => {
+ const [isVisible, setIsVisible] = useState(true);
+ const router = useRouter();
-export default function Options() {
return (
-
-
- Setting Screen
-
-
+
+
+ {isVisible && (
+
+
+
+ router.back()}>
+
+
+
+
+
+ Settings
+
+
+
+ }
+ title="Vibrate"
+ description="Vibration when scan is done."
+ controlElement={}
+ />
+ }
+ title="Beep"
+ description="Beep when scan is done."
+ controlElement={}
+ />
+
+
+
+ Support
+
+
+
+ }
+ title="Rate Us"
+ description="Your best reward to us."
+ />
+
+ }
+ title="Share"
+ description="Share app with others."
+ />
+
+ }
+ title="Privacy Policy"
+ description="Follow our policies that benefits you."
+ />
+
+
+ )}
+
+
);
+};
+
+interface ItemProps {
+ icon: React.ReactNode;
+ title: string;
+ description: string;
+}
+
+interface SettingItemProps extends ItemProps {
+ controlElement: React.ReactNode;
}
+
+const SettingItem: React.FC = ({ icon, title, description, controlElement }) => {
+ return (
+
+ {icon}
+
+
+ {title}
+
+
+ {description}
+
+
+ {controlElement}
+
+ );
+};
+
+const SupportItem: React.FC = ({ icon, title, description }) => {
+ return (
+
+ {icon}
+
+
+ {title}
+
+
+ {description}
+
+
+
+ );
+};
+
+const CustomSwitch: React.FC<{ defaultChecked?: boolean }> = ({ defaultChecked = true }) => {
+ const [isChecked, setIsChecked] = useState(defaultChecked);
+
+ return (
+ setIsChecked(checked)}
+ backgroundColor={isChecked ? '#FDB623' : '$gray8'}
+ borderColor={isChecked ? '#FDB623' : '$gray6'}
+ animation="bouncy"
+ unstyled={true}
+ h={28}
+ w={52}
+ px={2}
+ py={2}>
+
+
+ );
+};
+
+export default SettingsScreen;