chore: alert doc improved

apps/docs/content/components/alert/index.ts

@@ -8,6 +8,7 @@ import withIcon from "./with-icon";
 import withAction from "./with-action";
 import controlled from "./controlled";
 import withoutIcon from "./without-icon";
+import withoutIconWrapper from "./without-icon-wrapper";
 
 export const alertContent = {
   colors,
@@ -20,4 +21,5 @@ export const alertContent = {
   withAction,
   controlled,
   withoutIcon,
+  withoutIconWrapper,
 };

apps/docs/content/components/alert/without-icon-wrapper.raw.jsx

@@ -0,0 +1,15 @@
+import {Alert} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex items-center justify-center w-full">
+      <Alert
+        hideIconWrapper
+        color="secondary"
+        description="This is a bordered variant alert"
+        title="Bordered Alert"
+        variant="bordered"
+      />
+    </div>
+  );
+}

apps/docs/content/components/alert/without-icon-wrapper.ts

@@ -0,0 +1,9 @@
+import App from "./without-icon-wrapper.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/docs/components/alert.mdx

@@ -67,6 +67,12 @@ You can hide the icon by setting the `hideIcon` prop to `true`.
 
 <CodeDemo title="Without Icon" files={alertContent.withoutIcon} />
 
+### Without Icon Wrapper
+
+You can hide the icon wrapper by setting the `hideIconWrapper` prop to `true`.
+
+<CodeDemo title="Without Icon Wrapper" files={alertContent.withoutIconWrapper} />
+
 ### With Action
 
 Alert supports an `endContent` prop for additional actions.