Docs: Add screenshots of each component in docs

docs/ignite-cli/_category_.json

@@ -1,8 +1,8 @@
 {
-  "label": "Ignite",
+  "label": "ignite-cli",
   "link": null,
   "customProps": {
-    "description": "Infinite Red's hottest boilerplate for React Native.",
+    "description": "",
     "projectName": "ignite-cli",
     "sidebar": {
       "type": "autogenerated",

docs/ignite-cli/boilerplate/app/components/AutoImage.md

@@ -6,17 +6,23 @@ sidebar_position: 30
 
 Ignite's `AutoImage` Component is an enhanced version of the built-in React Native [Image](https://reactnative.dev/docs/image) component. It automatically resizes the image view to fit a max width or height constraint
 
+![autoimage](../../../../../static/img/autoimage-component.png)
+
+# Usage
+
 ```tsx
 <AutoImage
-  source={{ uri: "https://pbs.twimg.com/profile_images/845384502067159040/pqF2RQ2q_400x400.jpg" }}
+  source={{
+    uri: "https://pbs.twimg.com/profile_images/845384502067159040/pqF2RQ2q_400x400.jpg",
+  }}
   maxWidth={200}
 />
 ```
 
 `AutoImage` uses a `useAutoImage` hook to calculate the image's dimensions when you have a specific values you need to constrain the image within. This hook is also available for use in your own components.
 
 ```tsx
-const { width, height } = useAutoImage(uri, maxWidth, maxHeight)
+const { width, height } = useAutoImage(uri, maxWidth, maxHeight);
 ```
 
 ## Props
@@ -29,7 +35,9 @@ These props are used to constrain the image to a specific size. Use `maxWidth` o
 
 ```tsx
 <AutoImage
-  source={{ uri: "https://pbs.twimg.com/profile_images/845384502067159040/pqF2RQ2q_400x400.jpg" }}
+  source={{
+    uri: "https://pbs.twimg.com/profile_images/845384502067159040/pqF2RQ2q_400x400.jpg",
+  }}
   maxWidth={200}
   maxHeight={200}
 />

docs/ignite-cli/boilerplate/app/components/Button.md

@@ -6,6 +6,10 @@ sidebar_position: 31
 
 The `Button` component is a wrapper around the [`Pressable`](https://reactnative.dev/docs/pressable) component. Any prop that can be passed to `Pressable` can be passed to `Button` and it will be forwarded. `Button` renders a button with given text in a [`Text`](./Text.md) component or children. It allows you to specify the preset style of the button, you can override both the `Pressable` and `Text` styles.
 
+![button](../../../../../static/img/button-component.png)
+
+# Usage
+
 ```tsx
 <Button
   text="Click It"
@@ -62,22 +66,28 @@ To make a custom preset, add a key to the `$viewPresets`, `$textPresets`, `$pres
 ```tsx
 const $viewPresets = {
   // ...
-  danger: [$baseViewStyle, { backgroundColor: colors.palette.angry500 }] as StyleProp<ViewStyle>,
-}
+  danger: [
+    $baseViewStyle,
+    { backgroundColor: colors.palette.angry500 },
+  ] as StyleProp<ViewStyle>,
+};
 
 const $textPresets: Record<Presets, StyleProp<TextStyle>> = {
   // ...
-  danger: [$baseTextStyle, { color: colors.palette.angry500 }] as StyleProp<TextStyle>,
-}
+  danger: [
+    $baseTextStyle,
+    { color: colors.palette.angry500 },
+  ] as StyleProp<TextStyle>,
+};
 
 const $pressedViewPresets: Record<Presets, StyleProp<ViewStyle>> = {
   // ...
   danger: { backgroundColor: colors.palette.angry500 },
-}
+};
 
 const $pressedTextPresets: Record<Presets, StyleProp<TextStyle>> = {
   angry: { opacity: 0.7 },
-}
+};
 ```
 
 ```tsx
@@ -139,15 +149,23 @@ The `LeftAccessory` and `RightAccessory` props are optional. They can be used to
 ```tsx
 <Button
   LeftAccessory={(props) => (
-    <Icon containerStyle={props.style} size={props.pressableState.pressed ? 50 : 40} icon="check" />
+    <Icon
+      containerStyle={props.style}
+      size={props.pressableState.pressed ? 50 : 40}
+      icon="check"
+    />
   )}
 />
 ```
 
 ```tsx
 <Button
   RightAccessory={(props) => (
-    <Icon containerStyle={props.style} size={props.pressableState.pressed ? 50 : 40} icon="check" />
+    <Icon
+      containerStyle={props.style}
+      size={props.pressableState.pressed ? 50 : 40}
+      icon="check"
+    />
   )}
 />
 ```
@@ -159,9 +177,9 @@ If the accessories flicker when some prop or state changes, you can memoize the
   LeftAccessory={useMemo(
     () =>
       function LeftIcon(props: ButtonAccessoryProps) {
-        return <Icon icon={props.pressableState.pressed ? "view" : "hidden"} />
+        return <Icon icon={props.pressableState.pressed ? "view" : "hidden"} />;
       },
-    [],
+    []
   )}
 />
 ```

docs/ignite-cli/boilerplate/app/components/Card.md

@@ -30,14 +30,27 @@ The `Card` component is intended to be used for vertically aligned related conte
 
 The `preset` prop is used to set the preset container style of the card. This affects the border and background color of the container. There are two preconfigured presets: `default` and `reversed`.
 
+![card-present](../../../../../static/img/card-component-01.png)
+
+### Usage
+
 ```tsx
-<Card preset="reversed" heading="Card Heading" content="Card Content" footer="Card Footer" />
+<Card
+  preset="reversed"
+  heading="Card Heading"
+  content="Card Content"
+  footer="Card Footer"
+/>
 ```
 
 ### `verticalAlignment`
 
 The `verticalAlignment` prop is used to set the vertical alignment of the card's content. This affects the alignment of the heading, content, and footer. There are four preconfigured alignments: `top`, `center`, `space-between`, and `force-footer-bottom`. `force-footer-bottom` behaves like `top`, but will force the footer to the bottom of the card.
 
+![card-verticalAlignment](../../../../../static/img/card-component-02.png)
+
+### Usage
+
 ```tsx
 <Card
   verticalAlignment="space-between"
@@ -51,6 +64,10 @@ The `verticalAlignment` prop is used to set the vertical alignment of the card's
 
 The `LeftComponent` and `RightComponent` props are used to set the component that will be aligned to the left or right of the card body, respectively.
 
+![card-LeftComponent-RightComponent](../../../../../static/img/card-component-03.png)
+
+### Usage
+
 ```tsx
 <Card
   LeftComponent={
@@ -64,7 +81,11 @@ The `LeftComponent` and `RightComponent` props are used to set the component tha
     />
   }
   RightComponent={
-    <Button preset="default" text="Click It" onPress={() => Alert.alert("pressed")} />
+    <Button
+      preset="default"
+      text="Click It"
+      onPress={() => Alert.alert("pressed")}
+    />
   }
   heading="Card Heading"
   content="Card Content"
@@ -133,7 +154,9 @@ The `HeadingComponent` prop is used to set the component that will be used for t
 
 ```tsx
 <Card
-  HeadingComponent={<Button preset="reversed" text="HeadingComponent" icon="ladybug" />}
+  HeadingComponent={
+    <Button preset="reversed" text="HeadingComponent" icon="ladybug" />
+  }
   content="Card Content"
   footer="Card Footer"
 />
@@ -176,7 +199,10 @@ The `contentStyle` prop is used to set the style of the content text.
 <Card
   heading="Card Heading"
   content="Card Content"
-  contentStyle={{ backgroundColor: colors.error, color: colors.palette.neutral100 }}
+  contentStyle={{
+    backgroundColor: colors.error,
+    color: colors.palette.neutral100,
+  }}
   footer="Card Footer"
 />
 ```
@@ -201,7 +227,9 @@ The `ContentComponent` prop is used to set the component that will be used for t
 ```tsx
 <Card
   heading="Card Heading"
-  ContentComponent={<Button preset="reversed" text="ContentComponent" icon="ladybug" />}
+  ContentComponent={
+    <Button preset="reversed" text="ContentComponent" icon="ladybug" />
+  }
   footer="Card Footer"
 />
 ```
@@ -269,6 +297,8 @@ The `FooterComponent` prop is used to set the component that will be used for th
 <Card
   heading="Card Heading"
   content="Card Content"
-  FooterComponent={<Button preset="reversed" text="FooterComponent" icon="ladybug" />}
+  FooterComponent={
+    <Button preset="reversed" text="FooterComponent" icon="ladybug" />
+  }
 />
 ```

docs/ignite-cli/boilerplate/app/components/EmptyState.md

@@ -30,8 +30,16 @@ The `EmptyState` component is to be used when there is no data to display, usual
 
 The `preset` prop is used to set the preset container style of the EmptyState. This affects the default image, heading, content and button. Currently, only one preconfigured preset exists: `generic`.
 
+![emptystate-preset](../../../../../static/img/empty-state.png)
+
+### Usage
+
 ```tsx
-<EmptyState preset="generic" heading="EmptyState Heading" content="EmptyState Content" />
+<EmptyState
+  preset="generic"
+  heading="EmptyState Heading"
+  content="EmptyState Content"
+/>
 ```
 
 ### `style`
@@ -89,7 +97,11 @@ The `ImageProps` prop is used to pass any additional props directly to the `Imag
 The `heading` prop is used to set the heading text of the EmptyState.
 
 ```tsx
-<EmptyState heading="EmptyState Heading" content="EmptyState Content" button="EmptyState Button" />
+<EmptyState
+  heading="EmptyState Heading"
+  content="EmptyState Content"
+  button="EmptyState Button"
+/>
 ```
 
 ### `headingTx`
@@ -148,7 +160,11 @@ The `HeadingTextProps` prop is used to pass any additional props to the heading
 The `content` prop is used to set the content text of the EmptyState.
 
 ```tsx
-<EmptyState heading="EmptyState Heading" content="EmptyState Content" button="EmptyState Button" />
+<EmptyState
+  heading="EmptyState Heading"
+  content="EmptyState Content"
+  button="EmptyState Button"
+/>
 ```
 
 ### `contentTx`
@@ -184,7 +200,10 @@ The `contentStyle` prop is used to set the style of the content text.
 <EmptyState
   heading="EmptyState Heading"
   content="EmptyState Content"
-  contentStyle={{ backgroundColor: colors.error, color: colors.palette.neutral100 }}
+  contentStyle={{
+    backgroundColor: colors.error,
+    color: colors.palette.neutral100,
+  }}
   button="EmptyState Button"
 />
 ```
@@ -207,7 +226,11 @@ The `ContentTextProps` prop is used to pass any additional props to the content
 The `button` prop is used to set the button text of the EmptyState.
 
 ```tsx
-<EmptyState heading="EmptyState Heading" content="EmptyState Content" button="EmptyState Button" />
+<EmptyState
+  heading="EmptyState Heading"
+  content="EmptyState Content"
+  button="EmptyState Button"
+/>
 ```
 
 ### `buttonTx`