docs: added documentation for admin components (#9491)

- Documented common admin components with design that matches the admin.
- Updated existing admin customization snippets to match the admin's design.

Closes DOCS-964

www/apps/book/app/customization/customize-admin/route/page.mdx

@@ -116,24 +116,28 @@ const BrandsPage = () => {
 
 
   return (
-    <Container>
-      <Heading level="h2">Brands</Heading>
-      <Table>
-        <Table.Header>
-          <Table.Row>
-            <Table.HeaderCell>ID</Table.HeaderCell>
-            <Table.HeaderCell>Name</Table.HeaderCell>
-          </Table.Row>
-        </Table.Header>
-        <Table.Body>
-          {brands.map((brand) => (
-            <Table.Row key={brand.id}>
-              <Table.Cell>{brand.id}</Table.Cell>
-              <Table.Cell>{brand.name}</Table.Cell>
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">Brands</Heading>
+      </div>
+      <div className="flex h-full flex-col overflow-hidden !border-t-0">
+        <Table>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell>ID</Table.HeaderCell>
+              <Table.HeaderCell>Name</Table.HeaderCell>
             </Table.Row>
-          ))}
-        </Table.Body>
-      </Table>
+          </Table.Header>
+          <Table.Body>
+            {brands.map((brand) => (
+              <Table.Row key={brand.id}>
+                <Table.Cell>{brand.id}</Table.Cell>
+                <Table.Cell>{brand.name}</Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      </div>
     </Container>
   )
 }
@@ -147,6 +151,12 @@ This adds a new page in the admin at `http://localhost:9000/app/brands`.
 
 In the UI route's component, you retrieve the brands from the `/admin/brands` API route. You show the brands in a table.
 
+<Note>
+
+Admin customizations can use the [Medusa UI package](!ui!) to align your customizations with the admin's design. Also, [this guide](!resources!/admin-components) includes examples of common components in the Medusa Admin.
+
+</Note>
+
 ### Add UI Route to the Sidebar
 
 To add the UI route to the sidebar, replace the `TODO` at the end of the file with the following:

www/apps/book/app/customization/customize-admin/widget/page.mdx

@@ -29,7 +29,7 @@ export const highlights = [
   ["7", "data", "Receive the product's details as a prop"],
   ["9", "brand", "A state variable to store the brand"],
   ["19", "fetch", "Retrieve the brand of a product using the custom API route"],
-  ["39", "zone", "Show the widget at the top of the product details page."]
+  ["41", "zone", "Show the widget at the top of the product details page."]
 ]
 
 ```tsx title="src/admin/widgets/product-brand.tsx" highlights={highlights}
@@ -62,8 +62,10 @@ const ProductBrandWidget = ({
   }, [loading])
   
   return (
-    <Container>
-      <Heading level="h2">Brand</Heading>
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">Brand</Heading>
+      </div>
       {loading && <span>Loading...</span>}
       {brand && <span>Name: {brand.name}</span>}
     </Container>
@@ -91,7 +93,7 @@ In the widget, you fetch the product's brand from the `/admin/products/:id/brand
 
 <Note>
 
-Admin customizations can use the [Medusa UI package](!ui!) to align your customizations with the admin's design.
+Admin customizations can use the [Medusa UI package](!ui!) to align your customizations with the admin's design. Also, [this guide](!resources!/admin-components) includes examples of common components in the Medusa Admin.
 
 </Note>