docs: ✏️ update readme with mobile screenshots

Author: Karthik-B-06

docs/select.md

@@ -2,14 +2,22 @@
 
 Adapt UI provides one theme for `Select` components with four styles and seven interaction states.
 
+![simulator_screenshot_8A5D0D6E-7D61-4E89-925D-758D9C50D554](https://user-images.githubusercontent.com/35562287/202125786-e9626cb0-7298-462e-8e21-9a7748429bff.png)
 
 
 #### Simple Usage
 
 ```js
 import { Select } from "@adaptui/react-native-tailwind";
+
+const themes: ItemData[] = [
+  { value: "system", label: "System" },
+  { value: "dark", label: "Dark" },
+  { value: "light", label: "Light" },
+];
+
 export default function App() {
-  return <Select placeholder="Select theme" />;
+  return <Select options={themes} placeholder="Select theme" />;
 }
 ```
 
@@ -25,6 +33,8 @@ export default function App() {
 
 Adapt UI provides only one `base` theme. You can add more themes by adding new variants and new design tokens if needed.
 
+![simulator_screenshot_0998EA14-DD2E-4848-8ABF-ABBDE1981DDC](https://user-images.githubusercontent.com/35562287/202126465-3ee5aa8b-818b-4683-a7d7-80ad56734d85.png)
+
 <details>
 
 <summary>
@@ -38,7 +48,12 @@ export default function App() {
   const tailwind = useTheme(); 
   return (
     <>
-     <Select placeholder="Select a payment mode" />;
+      <Select
+        style={tailwind.style("w-60")}
+        variant="subtle"
+        size="xl"
+        placeholder="Select a payment mode"
+      />
     </> 
   ) 
 }
@@ -50,6 +65,8 @@ export default function App() {
 Adapt UI provides four select component styles: `outline`, `subtle`, `underline`, and `ghost`. 
 You can use these various styled select components based on the necessity and style you wish to provide to your design.
 
+![simulator_screenshot_E4CD1FC3-B47A-4E7B-9FE9-8A142608D856](https://user-images.githubusercontent.com/35562287/202127995-45a517ee-b7cb-4fcd-b88e-67aafabf0993.png)
+
 <details>
 <summary>
   <h3>Usage</h3>
@@ -77,6 +94,8 @@ export default function App() {
 
 There are four different sizes for select components in Adapt UI. Based on your requirement, you can switch between different sizes.
 
+![simulator_screenshot_F714FF22-4994-4635-BB23-9E0CF9ABF812](https://user-images.githubusercontent.com/35562287/202128316-6400bde3-81f4-4f52-852c-284a99294642.png)
+
 <details>
 <summary>
   <h3>Usage</h3>
@@ -106,6 +125,8 @@ The prefix is a slot at the beginning or prefix position of a component. Here in
 
 Here in the select, we have an icon in the prefix slot. You can change the icon by passing an <Icon /> component to prefix prop.
 
+![simulator_screenshot_45A7B053-DCC8-49D5-9AE9-EA0042DC3772](https://user-images.githubusercontent.com/35562287/202129117-d1e065d3-3c0c-496d-9b18-8365ff8afe19.png)
+
 <details>
 <summary>
   <h3>Usage</h3>