Update demo

Author: IzumiSy

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

@@ -96,7 +96,13 @@ export const primitiveComponentsDemoResource = defineResource({
           <Card.Root>
             <Card.Header title="Badge" />
             <Card.Content>
-              <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "1rem",
+                }}
+              >
                 <div>
                   <div style={labelStyle}>Solid</div>
                   <div style={rowStyle}>
@@ -131,6 +137,37 @@ export const primitiveComponentsDemoResource = defineResource({
             </Card.Content>
           </Card.Root>
 
+          {/* Alert */}
+          <Card.Root>
+            <Card.Header title="Alert" />
+            <Card.Content>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  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="error">
+                  <Alert.Title>Error</Alert.Title>
+                  <Alert.Description>Something went wrong. Please try again.</Alert.Description>
+                </Alert.Root>
+                <Alert.Root variant="neutral">
+                  <Alert.Title>Information</Alert.Title>
+                  <Alert.Description>This is a neutral informational message.</Alert.Description>
+                </Alert.Root>
+              </div>
+            </Card.Content>
+          </Card.Root>
+
           {/* Tooltip */}
           <Card.Root>
             <Card.Header title="Tooltip" />
@@ -506,31 +543,6 @@ export const primitiveComponentsDemoResource = defineResource({
               </Table.Root>
             </Card.Content>
           </Card.Root>
-
-          {/* Alert */}
-          <Card.Root>
-            <Card.Header title="Alert" />
-            <Card.Content>
-              <div style={{ display: "flex", flexDirection: "column", 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="error">
-                  <Alert.Title>Error</Alert.Title>
-                  <Alert.Description>Something went wrong. Please try again.</Alert.Description>
-                </Alert.Root>
-                <Alert.Root variant="neutral">
-                  <Alert.Title>Information</Alert.Title>
-                  <Alert.Description>This is a neutral informational message.</Alert.Description>
-                </Alert.Root>
-              </div>
-            </Card.Content>
-          </Card.Root>
         </Layout.Column>
       </Layout>
     );