Collapsible

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

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

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