[Docs Site] Add Width component (#21415)

* [Docs Site] Add Width component

* use zod

* add centering

* add centering example

Author: KianNH

src/components/Width.astro

@@ -0,0 +1,22 @@
+---
+import { z } from "astro:schema";
+
+type Props = z.infer<typeof props>;
+
+const props = z.object({
+	size: z.enum(["large", "medium", "small"]),
+	center: z.boolean().default(false),
+});
+
+const { size, center } = props.parse(Astro.props);
+
+const widthClasses = {
+	large: "w-3/4",
+	medium: "w-1/2",
+	small: "w-1/4",
+};
+---
+
+<div class:list={[widthClasses[size], center ? "mx-auto" : ""]}>
+	<slot />
+</div>

src/components/index.ts

@@ -59,6 +59,7 @@ export { default as Type } from "./Type.astro";
 export { default as TypeScriptExample } from "./TypeScriptExample.astro";
 export { default as WranglerConfig } from "./WranglerConfig.astro";
 export { default as WARPReleases } from "./WARPReleases.astro";
+export { default as Width } from "./Width.astro";
 export { default as WorkersArchitectureDiagram } from "./WorkersArchitectureDiagram.astro";
 export { default as WorkersIsolateDiagram } from "./WorkersIsolateDiagram.astro";
 export { default as WorkerStarter } from "./WorkerStarter.astro";

src/content/docs/style-guide/components/width.mdx

@@ -0,0 +1,51 @@
+---
+title: Width
+styleGuide:
+  component: Width
+---
+
+This component can be used to constrain the width of content, such as text or images.
+
+## Import
+
+```mdx
+import { Width } from "~/components";
+```
+
+## Usage
+
+```mdx live
+import { Width } from "~/components";
+
+<Width size="large">This content will take up 75% of the container width</Width>
+
+<Width size="medium">
+	This content will take up 50% of the container width
+</Width>
+
+<Width size="small">This content will take up 25% of the container width</Width>
+
+<Width size="small" center>
+	This content will take up 25% of the container width and be centered
+</Width>
+```
+
+## `<Width>` Props
+
+### `size`
+
+**required**
+
+**type:** `"large" | "medium" | "small"`
+
+Controls the width of the container:
+
+- `large`: 75% of container width
+- `medium`: 50% of container width
+- `small`: 25% of container width
+
+### `center`
+
+**type:** `boolean`
+
+Whether to horizontally center the content.