Collapsible

1'use client';
2
3import { Collapsible } from '@/components/ui/collapsible';
4
5export function Default() {
6  return (
7    <div className="space-y-3">
8      <Collapsible variant="bordered" defaultOpen>
9        <Collapsible.Trigger>
10          <span className="text-lg font-semibold">Prompt Engineering</span>
11        </Collapsible.Trigger>
12        <Collapsible.Content>
13          <div className="space-y-3 pt-3">
14            <p className="text-muted-foreground text-sm">
15              Prompt engineering is the practice of creating clear and effective instructions so an
16              AI model understands exactly what you want. Common techniques include:
17            </p>
18            <ul className="text-muted-foreground list-disc space-y-1 pl-5 text-sm">
19              <li>
20                <strong>Few-shot:</strong> Providing examples to guide the model.
21              </li>
22              <li>
23                <strong>Chain-of-thought:</strong> Asking the model to reason step by step.
24              </li>
25              <li>
26                <strong>System prompts:</strong> Defining the assistant's role and behavior.
27              </li>
28              <li>
29                <strong>Temperature:</strong> Adjusting creativity vs. precision.
30              </li>
31            </ul>
32            <div className="pt-2">
33              <code className="bg-secondary rounded px-2 py-1 text-xs">
34                You are an expert assistant specialized in...
35              </code>
36            </div>
37          </div>
38        </Collapsible.Content>
39      </Collapsible>
40      <Collapsible variant="bordered">
41        <Collapsible.Trigger>
42          <span className="text-lg font-semibold">RAG (Retrieval-Augmented Generation)</span>
43        </Collapsible.Trigger>
44        <Collapsible.Content>
45          <div className="space-y-3 pt-3">
46            <p className="text-muted-foreground text-sm">
47              RAG combines a language model with an external knowledge base. The AI retrieves
48              information from your documents and then generates an answer based on those sources.
49            </p>
50            <ul className="text-muted-foreground list-disc space-y-1 pl-5 text-sm">
51              <li>Reduces hallucinations by grounding answers in real data.</li>
52              <li>Allows up-to-date information without retraining models.</li>
53              <li>Perfect for documentation, support assistants, and intelligent search.</li>
54            </ul>
55          </div>
56        </Collapsible.Content>
57      </Collapsible>
58      <Collapsible variant="bordered">
59        <Collapsible.Trigger>
60          <span className="text-lg font-semibold">AI SDKs & Model Providers</span>
61        </Collapsible.Trigger>
62        <Collapsible.Content>
63          <div className="space-y-3 pt-3">
64            <p className="text-muted-foreground text-sm">
65              AI SDKs make it easy to connect your application with large language models. They
66              simplify authentication, requests, streaming, and model selection.
67            </p>
68            <ul className="text-muted-foreground list-disc space-y-1 pl-5 text-sm">
69              <li>
70                <strong>Groq:</strong> Extremely fast inference, ideal for real-time apps.
71              </li>
72              <li>
73                <strong>OpenAI:</strong> Access to GPT models, embeddings, and multimodal features.
74              </li>
75              <li>
76                <strong>Anthropic:</strong> Known for Claude models with strong reasoning and
77                safety.
78              </li>
79              <li>
80                <strong>Vercel AI SDK:</strong> A friendly layer for building chat and AI features
81                in React and Next.js.
82              </li>
83            </ul>
84            <p className="text-muted-foreground pt-2 text-xs">
85              *Quick note:* These SDKs help developers focus on the product experience instead of
86              handling low-level API details.
87            </p>
88          </div>
89        </Collapsible.Content>
90      </Collapsible>
91    </div>
92  );
93}

1'use client';
2
3import { Collapsible } from '@/components/ui/collapsible';
4
5export function Bordered() {
6  return (
7    <div className="space-y-3">
8      <Collapsible variant="bordered" defaultOpen>
9        <Collapsible.Trigger>
10          <span className="text-lg font-semibold">What is React?</span>
11        </Collapsible.Trigger>
12        <Collapsible.Content>
13          <div className="space-y-2 pt-3">
14            <p className="text-muted-foreground text-sm">
15              React is a JavaScript library for building user interfaces. It lets you create
16              reusable components that manage their own state.
17            </p>
18          </div>
19        </Collapsible.Content>
20      </Collapsible>
21
22      <Collapsible variant="bordered">
23        <Collapsible.Trigger>
24          <span className="text-lg font-semibold">What are React Hooks?</span>
25        </Collapsible.Trigger>
26        <Collapsible.Content>
27          <div className="space-y-2 pt-3">
28            <p className="text-muted-foreground text-sm">
29              Hooks are functions that let you use state and other React features in functional
30              components. Common hooks include useState, useEffect, and useContext.
31            </p>
32          </div>
33        </Collapsible.Content>
34      </Collapsible>
35
36      <Collapsible variant="bordered">
37        <Collapsible.Trigger>
38          <span className="text-lg font-semibold">What is JSX?</span>
39        </Collapsible.Trigger>
40        <Collapsible.Content>
41          <div className="space-y-2 pt-3">
42            <p className="text-muted-foreground text-sm">
43              JSX is a syntax extension for JavaScript that looks similar to HTML. It allows you to
44              write UI components in a more declarative way.
45            </p>
46          </div>
47        </Collapsible.Content>
48      </Collapsible>
49    </div>
50  );
51}

1'use client';
2
3import { Collapsible } from '@/components/ui/collapsible';
4
5export function Card() {
6  return (
7    <div className="space-y-3">
8      <Collapsible variant="card" defaultOpen>
9        <Collapsible.Trigger>
10          <span className="text-lg font-semibold">🚀 Getting Started</span>
11        </Collapsible.Trigger>
12        <Collapsible.Content>
13          <div className="space-y-2 pt-3">
14            <p className="text-muted-foreground text-sm">
15              Welcome to our platform! Here's everything you need to know to get started with your
16              first project.
17            </p>
18            <ul className="text-muted-foreground list-disc space-y-1 pl-5 text-sm">
19              <li>Create your account</li>
20              <li>Set up your workspace</li>
21              <li>Invite team members</li>
22              <li>Start building!</li>
23            </ul>
24          </div>
25        </Collapsible.Content>
26      </Collapsible>
27
28      <Collapsible variant="card">
29        <Collapsible.Trigger>
30          <span className="text-lg font-semibold">📚 Documentation</span>
31        </Collapsible.Trigger>
32        <Collapsible.Content>
33          <div className="space-y-2 pt-3">
34            <p className="text-muted-foreground text-sm">
35              Explore our comprehensive documentation to learn about all features and capabilities.
36            </p>
37            <div className="flex flex-wrap gap-2 pt-2">
38              <code className="bg-secondary rounded px-2 py-1 text-xs">API Reference</code>
39              <code className="bg-secondary rounded px-2 py-1 text-xs">Guides</code>
40              <code className="bg-secondary rounded px-2 py-1 text-xs">Examples</code>
41            </div>
42          </div>
43        </Collapsible.Content>
44      </Collapsible>
45
46      <Collapsible variant="card">
47        <Collapsible.Trigger>
48          <span className="text-lg font-semibold">⚙️ Settings</span>
49        </Collapsible.Trigger>
50        <Collapsible.Content>
51          <div className="space-y-2 pt-3">
52            <p className="text-muted-foreground text-sm">
53              Customize your experience with our flexible settings and preferences.
54            </p>
55          </div>
56        </Collapsible.Content>
57      </Collapsible>
58    </div>
59  );
60}