admonition-collapsible-demo

1import { Admonition } from "@/components/ui/admonition"
2 
3export default function AdmonitionCollapsibleDemo() {
4  return (
5    <Admonition
6      type="danger"
7      title="Error Stack Trace"
8      expandable
9      defaultCollapsed={true}
10    >
11      Error: Hydration failed because the initial UI does not match the expected
12      DOM structure. This usually occurs when there are mismatches between
13      server-rendered HTML and client-side React rendering. Check for
14      differences in component state, props, or conditional rendering logic.
15      Possible causes include asynchronous data fetching, usage of `useEffect`
16      for initial rendering, or differences in environment variables between
17      server and client. To resolve this issue, ensure that components render
18      identically on both server and client, and avoid side effects during
19      initial render. Consider adding proper loading states or fallbacks to
20      prevent UI mismatches.
21    </Admonition>
22  )
23}