feat(demo): update alert demo with sectioned layout and action examples

Author: IzumiSy

examples/nextjs-app/src/modules/pages/primitives-demo.tsx

@@ -148,30 +148,73 @@ export const primitiveComponentsDemoResource = defineResource({
                   gap: "1rem",
                 }}
               >
-                <Alert.Root>
-                  <Alert.Title>Default Alert</Alert.Title>
-                  <Alert.Description>This is a default alert message.</Alert.Description>
-                </Alert.Root>
-                <Alert.Root variant="success">
-                  <Alert.Title>Success</Alert.Title>
-                  <Alert.Description>Operation completed successfully.</Alert.Description>
-                </Alert.Root>
-                <Alert.Root variant="warning">
-                  <Alert.Title>Warning</Alert.Title>
-                  <Alert.Description>Please review before proceeding.</Alert.Description>
-                </Alert.Root>
-                <Alert.Root variant="error">
-                  <Alert.Title>Error</Alert.Title>
-                  <Alert.Description>Something went wrong. Please try again.</Alert.Description>
-                </Alert.Root>
-                <Alert.Root variant="info">
-                  <Alert.Title>Info</Alert.Title>
-                  <Alert.Description>Here is some useful information.</Alert.Description>
-                </Alert.Root>
-                <Alert.Root variant="neutral">
-                  <Alert.Title>Neutral</Alert.Title>
-                  <Alert.Description>This is a neutral informational message.</Alert.Description>
-                </Alert.Root>
+                <div>
+                  <div style={labelStyle}>Variants</div>
+                  <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: "0.5rem",
+                    }}
+                  >
+                    <Alert.Root>
+                      <Alert.Title>Neutral (default)</Alert.Title>
+                      <Alert.Description>This is a neutral alert message.</Alert.Description>
+                    </Alert.Root>
+                    <Alert.Root variant="success">
+                      <Alert.Title>Success</Alert.Title>
+                      <Alert.Description>Operation completed successfully.</Alert.Description>
+                    </Alert.Root>
+                    <Alert.Root variant="warning">
+                      <Alert.Title>Warning</Alert.Title>
+                      <Alert.Description>Please review before proceeding.</Alert.Description>
+                    </Alert.Root>
+                    <Alert.Root variant="error">
+                      <Alert.Title>Error</Alert.Title>
+                      <Alert.Description>Something went wrong. Please try again.</Alert.Description>
+                    </Alert.Root>
+                    <Alert.Root variant="info">
+                      <Alert.Title>Info</Alert.Title>
+                      <Alert.Description>Here is some useful information.</Alert.Description>
+                    </Alert.Root>
+                  </div>
+                </div>
+                <div>
+                  <div style={labelStyle}>With Action</div>
+                  <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: "0.5rem",
+                    }}
+                  >
+                    <Alert.Root variant="info" action={<Alert.Dismiss />}>
+                      <Alert.Title>Dismissible</Alert.Title>
+                      <Alert.Description>This alert can be dismissed.</Alert.Description>
+                    </Alert.Root>
+                    <Alert.Root
+                      variant="success"
+                      action={<Alert.Dismiss onDismiss={() => console.log("dismissed")} />}
+                    >
+                      <Alert.Title>With callback</Alert.Title>
+                      <Alert.Description>Dismiss fires a callback.</Alert.Description>
+                    </Alert.Root>
+                    <Alert.Root
+                      variant="warning"
+                      action={
+                        <div style={{ display: "flex", gap: "0.5rem" }}>
+                          <Button size="sm" variant="outline">
+                            Dismiss
+                          </Button>
+                          <Button size="sm">Action</Button>
+                        </div>
+                      }
+                    >
+                      <Alert.Title>Multiple actions</Alert.Title>
+                      <Alert.Description>This alert has multiple action buttons.</Alert.Description>
+                    </Alert.Root>
+                  </div>
+                </div>
               </div>
             </Card.Content>
           </Card.Root>