Minor fixes and improvements to locales

content/en/blog/nuxt-ui-components.md

@@ -3,7 +3,7 @@ title: "Building Beautiful UIs with Nuxt UI"
 description: "Explore Nuxt UI components and learn how to create stunning, accessible user interfaces with minimal effort."
 date: "2024-11-08"
 tags: ["nuxt", "ui", "design", "components"]
-author: "Ali Arghyani"
+author: "Mohammad Mahdi Mohammadi"
 draft: false
 ---
 
@@ -37,8 +37,8 @@ Add it to your `nuxt.config.ts`:
 
 ```typescript
 export default defineNuxtConfig({
-  modules: ['@nuxt/ui']
-})
+  modules: ["@nuxt/ui"],
+});
 ```
 
 ## Essential Components
@@ -68,9 +68,9 @@ Cards are perfect for displaying content:
     <template #header>
       <h3>Card Title</h3>
     </template>
-    
+
     <p>Card content goes here</p>
-    
+
     <template #footer>
       <UButton>Action</UButton>
     </template>
@@ -85,14 +85,14 @@ Build forms quickly with validation:
 ```vue
 <script setup>
 const state = reactive({
-  email: '',
-  password: ''
-})
+  email: "",
+  password: "",
+});
 
 const schema = z.object({
   email: z.string().email(),
-  password: z.string().min(8)
-})
+  password: z.string().min(8),
+});
 </script>
 
 <template>
@@ -100,11 +100,11 @@ const schema = z.object({
     <UFormGroup label="Email" name="email">
       <UInput v-model="state.email" />
     </UFormGroup>
-    
+
     <UFormGroup label="Password" name="password">
       <UInput v-model="state.password" type="password" />
     </UFormGroup>
-    
+
     <UButton type="submit">Submit</UButton>
   </UForm>
 </template>
@@ -117,13 +117,13 @@ Customize your app's appearance with the `app.config.ts`:
 ```typescript
 export default defineAppConfig({
   ui: {
-    primary: 'indigo',
-    gray: 'slate',
+    primary: "indigo",
+    gray: "slate",
     button: {
-      rounded: 'rounded-full'
-    }
-  }
-})
+      rounded: "rounded-full",
+    },
+  },
+});
 ```
 
 ::alert{type="success"}
@@ -136,17 +136,15 @@ Dark mode is built-in and works out of the box:
 
 ```vue
 <template>
-  <UButton @click="toggleDarkMode">
-    Toggle Dark Mode
-  </UButton>
+  <UButton @click="toggleDarkMode"> Toggle Dark Mode </UButton>
 </template>
 
 <script setup>
-const colorMode = useColorMode()
+const colorMode = useColorMode();
 
 const toggleDarkMode = () => {
-  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
-}
+  colorMode.preference = colorMode.value === "dark" ? "light" : "dark";
+};
 </script>
 ```