[Docs Site] Add Width component

Author: KianNH

src/components/Width.astro

@@ -0,0 +1,20 @@
+---
+import { z } from "astro:schema";
+
+const props = z.object({
+  size: z.enum(["large", "medium", "small"])
+});
+
+type Props = z.infer<typeof props>;
+const { size } = Astro.props;
+
+const widthClasses = {
+  large: "w-3/4",
+  medium: "w-1/2",
+  small: "w-1/4"
+};
+---
+
+<div class={widthClasses[size]}>
+  <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,41 @@
+---
+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>` 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