feat: Add more base component to UI

services/www/.storybook/main.ts

@@ -4,9 +4,7 @@ import { mergeConfig } from 'vite';
 import tailwindcss from '@tailwindcss/vite';
 
 const config: StorybookConfig = {
-  stories: [
-    '../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'
-  ],
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
   addons: [
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',

services/www/content/articles/2026/test-article.mdx

@@ -1,19 +1,19 @@
 ---
-title: "Hello World"
-description: "My first article using the new content system."
+title: 'Hello World'
+description: 'My first article using the new content system.'
 createdDate: 2026-01-31
-tags: ["test", "general"]
+tags: ['test', 'general']
 ---
 
 # Hello World
 
-This is a test article. 
+This is a test article.
 
 ## Section 1
 
 Some content here.
 
 ```typescript
-const hello = "world";
+const hello = 'world';
 console.log(hello);
 ```

services/www/src/content.config.ts

@@ -3,7 +3,7 @@ import { defineCollection, z } from 'astro:content';
 
 const articles = defineCollection({
   // Load all markdown and MDX files from the content/articles directory
-  loader: glob({ pattern: "**/*.{md,mdx}", base: "./content/articles" }),
+  loader: glob({ pattern: '**/*.{md,mdx}', base: './content/articles' }),
   schema: z.object({
     title: z.string(),
     description: z.string().optional(),

services/www/src/global.css

@@ -1,2 +1,2 @@
-@import "../../../packages/ui/src/styles/index.css";
+@import '../../../packages/ui/src/styles/index.css';
 @source "../../../packages/ui/src";

services/www/src/layouts/ArticleLayout/ArticleLayout.stories.tsx

@@ -48,7 +48,7 @@ export const Default: Story = {
       </p>
 
       <pre>
-<code>{`// services/www/src/content.config.ts
+        <code>{`// services/www/src/content.config.ts
 import { defineCollection, z } from 'astro:content';
 import { glob } from 'astro/loaders';
 

services/www/src/layouts/ArticleLayout/ArticleLayout.tsx

@@ -93,9 +93,7 @@ export const ArticleLayout: React.FC<ArticleLayoutProps> = ({
           <h1 className="leading-tight">{title}</h1>
 
           {description && (
-            <p className="text-muted-foreground text-l leading-relaxed italic">
-              {description}
-            </p>
+            <p className="text-muted-foreground text-l leading-relaxed italic">{description}</p>
           )}
         </VStack>
       </header>