From 39707e90ffe8beb277d769449a0be19acac0a0f1 Mon Sep 17 00:00:00 2001
From: Andreas Alsterholm <andreas@alsterholm.com>
Date: Wed, 10 Apr 2024 12:35:23 +0200
Subject: [PATCH] Add documentation for Money component

---
 money.md | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 toc.json |  1 +
 2 files changed, 64 insertions(+)
 create mode 100644 money.md

diff --git a/money.md b/money.md
new file mode 100644
index 0000000..b8f335b
--- /dev/null
+++ b/money.md
@@ -0,0 +1,63 @@
+# Money
+
+The `money` component is a conveniant way to handle presenting monetary values in your application. You can consider it a thin, Blade-specific wrapper around [Laravel's `Number::currency` helper](https://laravel.com/docs/11.x/helpers#method-number-currency).
+
+## Installation
+
+The `money` component comes ready out-of-the-box with Blade UI Kit. Simply [install the package](/docs/{{version}}/installation) and you're good to go.
+
+## Basic usage
+
+In order to render a monetary value, just wrap the raw value in the `money` component:
+
+```
+<x-money>150</x-money>
+```
+
+This will output the following HTML:
+
+```
+<span>$150.00</span>
+```
+
+## Currency
+
+You can customize the currency that is used to render the value via the `currency` property.
+
+```
+<x-money currency="EUR">149.99</x-money>
+```
+
+This will output the following HTML:
+
+```
+<span>€149.99</span>
+```
+
+## Locale
+
+By default, the `money` component renders the monetary value using the locale you've specified in your `app.locale` configuration option. If you wish to render the value in a different locale, you can use the `locale` property.
+
+```
+<x-money locale="nl">150</x-money>
+```
+
+This will output the following HTML:
+
+```
+<span>US$ 150,00</span>
+```
+
+## Combining properties
+
+Of course, the `currency` and `locale` properties can be used in conjunction:
+
+```
+<x-money currency="SEK" locale="sv">150</x-money>
+```
+
+This will output the following HTML:
+
+```
+<span>150,00 kr</span>
+```
diff --git a/toc.json b/toc.json
index a496159..aa1b978 100644
--- a/toc.json
+++ b/toc.json
@@ -116,6 +116,7 @@
         "pages": [
             "avatar",
             "cron",
+            "money",
             "unsplash"
         ]
     }