Add Admonition component (#5680)

* Add Admonition component

* Tweak mobile padding

* Format

src/view/screens/Storybook/Admonitions.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import {View} from 'react-native'
+
+import {atoms as a} from '#/alf'
+import {Admonition} from '#/components/Admonition'
+import {InlineLinkText} from '#/components/Link'
+import {H1} from '#/components/Typography'
+
+export function Admonitions() {
+  return (
+    <View style={[a.gap_md]}>
+      <H1>Admonitions</H1>
+
+      <Admonition>The quick brown fox jumps over the lazy dog.</Admonition>
+      <Admonition type="info">
+        How happy the blameless vestal's lot, the world forgetting by the world
+        forgot.{' '}
+        <InlineLinkText
+          label="test"
+          to="https://letterboxd.com/film/eternal-sunshine-of-the-spotless-mind/">
+          Eternal sunshine of the spotless mind
+        </InlineLinkText>
+        ! Each pray'r accepted, and each wish resign'd.
+      </Admonition>
+      <Admonition type="tip">
+        The quick brown fox jumps over the lazy dog.
+      </Admonition>
+      <Admonition type="warning">
+        The quick brown fox jumps over the lazy dog.
+      </Admonition>
+      <Admonition type="error">
+        The quick brown fox jumps over the lazy dog.
+      </Admonition>
+    </View>
+  )
+}

src/view/screens/Storybook/index.tsx

@@ -7,6 +7,7 @@ import {CenteredView} from '#/view/com/util/Views'
 import {ListContained} from '#/view/screens/Storybook/ListContained'
 import {atoms as a, ThemeProvider, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
+import {Admonitions} from './Admonitions'
 import {Breakpoints} from './Breakpoints'
 import {Buttons} from './Buttons'
 import {Dialogs} from './Dialogs'
@@ -80,7 +81,7 @@ function StorybookInner() {
               </Button>
             </View>
 
-            <Forms />
+            <Admonitions />
 
             <ThemeProvider theme="light">
               <Theming />
@@ -92,6 +93,7 @@ function StorybookInner() {
               <Theming />
             </ThemeProvider>
 
+            <Forms />
             <Buttons />
             <Typography />
             <Spacing />