50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/demo/src/components/FAQ.tsx:
--------------------------------------------------------------------------------
1 | interface FAQItem {
2 | question: string;
3 | answer: React.ReactNode;
4 | }
5 |
6 | const FAQ_ITEMS: FAQItem[] = [
7 | {
8 | question: "What are the peer dependencies?",
9 | answer: "React ≥0.14.0, React DOM ≥0.14.0 and Tailwind CSS ≥3.0.0",
10 | },
11 | {
12 | question: "Is it customizable?",
13 | answer: "Yes! The component is unstyled by default and uses Tailwind CSS for styling. You can customize the appearance using Tailwind classes or your own CSS.",
14 | },
15 | {
16 | question: "How does keyboard navigation work?",
17 | answer: "Use arrow keys to navigate through emojis, Enter to select, and Escape to clear search. Tab and Shift+Tab to move between interactive elements.",
18 | },
19 | {
20 | question: "Does it support all emojis?",
21 | answer: "Yes, it includes all emojis up to Unicode 15.0. You can filter out newer emojis using the maxUnicodeVersion prop for better compatibility. It should also work with newer emojis versions, but I haven't tested it yet.",
22 | },
23 | {
24 | question: "What is the license?",
25 | answer: (
26 | <>
27 | MIT. See the{" "}
28 |
34 | LICENSE
35 | {" "}
36 | file for more details.
37 |
38 | ),
39 | },
40 | {
41 | question: "Where can I find more examples?",
42 | answer: (
43 | <>
44 | Check out the examples above or visit our{" "}
45 |
51 | GitHub repository
52 | {" "}
53 | for more examples and documentation.
54 |
55 | ),
56 | },
57 | ];
58 |
59 | export function FAQ() {
60 | return (
61 |
62 |
16 |