Merge pull request #305 from mrzachnugent/@zach/269-alert-docs

feat(#269): add alert to the docs

Author: mrzachnugent

apps/docs/astro.config.mjs

@@ -55,6 +55,10 @@ export default defineConfig({
               label: 'Accordion',
               link: '/components/accordion/',
             },
+            {
+              label: 'Alert',
+              link: '/components/alert/',
+            },
             {
               label: 'Alert Dialog',
               link: '/components/alert-dialog/',

apps/docs/src/content/docs/components/alert.mdx

@@ -0,0 +1,94 @@
+---
+title: Alert
+description: A notification to capture user attention.
+---
+
+{/* prettier-ignore-start */}
+{/* prettier-ignore-end */}
+
+import Code from '@/components/Code.astro';
+import { LinkButton } from '@/components/react/LinkButton';
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import importedCode from '@rnr/reusables/components/ui/alert?raw';
+
+<LinkButton href='/components/text'>Text Component</LinkButton>
+<LinkButton target='_blank' href='https://rnr-showcase.vercel.app/alert'>
+  Demo
+</LinkButton>
+
+<br />
+
+A notification to capture user attention.
+
+### Installation
+<Tabs>
+  <TabItem label='CLI'> 
+    ```bash
+    npx @react-native-reusables/cli@latest add alert
+    ```
+  </TabItem>
+  <TabItem label='Manual'>
+
+    **Copy/paste the following code to `~/components/ui/alert.tsx`:**
+
+    <Code code={importedCode} lang='tsx' title='~/components/ui/alert.tsx' />
+  </TabItem>
+</Tabs>
+### Usage
+
+```tsx
+import { Alert, AlertDescription, AlertTitle } from '~/components/ui/alert';
+import { AlertTriangle } from '~/lib/icons/AlertTriangle';
+import { Terminal } from '~/lib/icons/Terminal';
+
+function AlertExample() {
+  return (
+      <Alert icon={Terminal} className='max-w-xl'>
+        <AlertTitle>Heads up!</AlertTitle>
+        <AlertDescription>
+          You can use a terminal to run commands on your computer.
+        </AlertDescription>
+      </Alert>
+      <Alert icon={AlertTriangle} variant='destructive' className='max-w-xl'>
+        <AlertTitle>Danger!</AlertTitle>
+        <AlertDescription>
+          High voltage. Do not touch. Risk of electric shock. Keep away from children.
+        </AlertDescription>
+      </Alert>
+  );
+}
+```
+
+## Props
+
+### Alert
+
+Extends [`View`](https://reactnative.dev/docs/view#props) props
+
+|     Prop      |                             Type                              |               Note                |
+| :-----------: | :----------------------------------------------------------: | :-------------------------------: |
+|    `variant`  |                `"default"` \| `"destructive"`                |           _(optional)_            |
+|     `icon`    | [`LucideIcon`](https://lucide.dev/guide/packages/lucide-react-native) |           _(required)_            |
+|  `iconSize`   |                            `number`                          | _(optional, default: `16`)_       |
+| iconClassName |                            `string`                          |           _(optional)_            |
+
+
+---
+
+### AlertTitle
+
+Extends [`Text`](https://reactnative.dev/docs/text#props) props
+
+|  Prop   |  Type   |     Note     |
+| :-----: | :-----: | :----------: |
+| asChild | boolean | _(optional)_ |
+
+---
+
+### AlertDescription
+
+Extends [`Text`](https://reactnative.dev/docs/text#props) props
+
+|  Prop   |  Type   |     Note     |
+| :-----: | :-----: | :----------: |
+| asChild | boolean | _(optional)_ |