refactor(demos): simplify DetailsDialog demo to two neutral examples

Author: david1gp

src/demos/interactive/DemoDetailsDialog.tsx

@@ -1,4 +1,4 @@
-import { mdiCheckCircle, mdiFlask } from "@mdi/js"
+import { mdiCheckCircle } from "@mdi/js"
 import { LongContent } from "#src/demos/interactive/LongContent.jsx"
 import { DetailsDialog } from "#ui/interactive/dialog/DetailsDialog.jsx"
 import { Icon } from "#ui/static/icon/Icon.jsx"
@@ -15,7 +15,6 @@ export function DemoDetailsDialog() {
       </p>
       <div class="grid gap-4 max-w-2xl">
         <SimpleDemo />
-        <RichSummaryDemo />
         <LongContentDemo />
       </div>
     </div>
@@ -27,18 +26,18 @@ function SimpleDemo() {
     <div>
       <h2 class="text-xl font-semibold mb-3">Simple</h2>
       <DetailsDialog
-        title="Direct bioavailability"
+        title="What's included"
         content={() => (
           <div class="space-y-3">
-            <p>The infusion bypasses the gut and makes micronutrients available immediately.</p>
+            <p>A short summary that expands into a few supporting details.</p>
             <ul class="space-y-2">
               <li class="flex items-start gap-2">
                 <Icon path={mdiCheckCircle} class="size-5 mt-0.5 text-green-600 shrink-0" />
-                <span>Useful when gut absorption is impaired.</span>
+                <span>Server-rendered so the content is indexable.</span>
               </li>
               <li class="flex items-start gap-2">
                 <Icon path={mdiCheckCircle} class="size-5 mt-0.5 text-green-600 shrink-0" />
-                <span>Helpful when the body needs fast support.</span>
+                <span>Opens as a modal once JavaScript loads.</span>
               </li>
             </ul>
           </div>
@@ -48,42 +47,6 @@ function SimpleDemo() {
   )
 }
 
-function RichSummaryDemo() {
-  return (
-    <div>
-      <h2 class="text-xl font-semibold mb-3">Custom summary face</h2>
-      <DetailsDialog
-        title="NAD+ Infusion"
-        summaryEl={() => (
-          <div class="flex items-center gap-3">
-            <Icon path={mdiFlask} class="size-6 text-blue-600" />
-            <span>
-              <span class="block font-semibold">NAD+ Infusion</span>
-              <span class="block text-sm text-muted-foreground">Cellular energy &amp; longevity support</span>
-            </span>
-          </div>
-        )}
-        content={() => (
-          <dl class="grid gap-2">
-            <div>
-              <dt class="font-semibold inline">Protocol: </dt>
-              <dd class="inline">250–500 mg over 2–3 hours.</dd>
-            </div>
-            <div>
-              <dt class="font-semibold inline">Ideal for: </dt>
-              <dd class="inline">Fatigue, regeneration, anti-aging programs.</dd>
-            </div>
-            <div>
-              <dt class="font-semibold inline">Duration: </dt>
-              <dd class="inline">2–3 hours per session.</dd>
-            </div>
-          </dl>
-        )}
-      />
-    </div>
-  )
-}
-
 function LongContentDemo() {
   return (
     <div>