admonition-demo-interactive

1"use client"
2 
3import { useEffect, useState } from "react"
4 
5import { Admonition } from "@/components/ui/admonition"
6 
7const admonitionTypes = [
8  {
9    type: "note",
10    title: "Note",
11    content:
12      "This is a note admonition. Use it to provide additional information that users should be aware of.",
13  },
14  {
15    type: "tip",
16    title: "Pro Tip",
17    content:
18      "This is a tip admonition. Perfect for sharing helpful advice or best practices.",
19  },
20  {
21    type: "info",
22    title: "Information",
23    content:
24      "This is an info admonition. Great for providing contextual information.",
25  },
26  {
27    type: "warning",
28    title: "Warning",
29    content:
30      "This is a warning admonition. Use it to alert users about potential issues or important considerations.",
31  },
32  {
33    type: "danger",
34    title: "Danger",
35    content:
36      "This is a danger admonition. Use it for critical warnings that users must pay attention to.",
37  },
38  {
39    type: "success",
40    title: "Success",
41    content:
42      "This is a success admonition. Great for confirming successful actions or positive outcomes.",
43  },
44  {
45    type: "caution",
46    title: "Caution",
47    content:
48      "This is a caution admonition. Use it for important warnings that require user attention.",
49  },
50]
51 
52export default function AdmonitionDemoInteractive() {
53  const [currentIndex, setCurrentIndex] = useState(0)
54 
55  useEffect(() => {
56    const interval = setInterval(() => {
57      setCurrentIndex((prev) => (prev + 1) % admonitionTypes.length)
58    }, 1000)
59 
60    return () => clearInterval(interval)
61  }, [])
62 
63  const currentAdmonition = admonitionTypes[currentIndex]
64 
65  return (
66    <div className="max-w-md">
67      <Admonition
68        type={currentAdmonition.type as any}
69        title={currentAdmonition.title}
70      >
71        {currentAdmonition.content}
72      </Admonition>
73    </div>
74  )
75}