4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:T6f8a,import { useState } from 'react'; import { Check, Copy, Search } from 'lucide-react'; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from '@/components/ui/accordion'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; type LanguageId = 'javascript' | 'typescript' | 'python' | 'java'; const languageTabs = [ { id: 'javascript' as const, label: 'JavaScript' }, { id: 'typescript' as const, label: 'TypeScript' }, { id: 'python' as const, label: 'Python' }, { id: 'java' as const, label: 'Java' }, ]; const faqs = [ { category: 'Authentication', items: [ { question: 'How do I authenticate API requests?', answer: 'You can authenticate requests using an API key in the Authorization header. All API requests must be made over HTTPS.', examples: { javascript: ` // Using fetch API fetch('https://api.example.com/v1/data', { method: 'GET', headers: { 'Authorization': 'Bearer YOUR_API_KEY', 'Content-Type': 'application/json' } }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); `, typescript: ` // Using axios with TypeScript import axios from 'axios'; interface ApiResponse { success: boolean; data: any; } async function fetchData(): Promise { try { const response = await axios.get('https://api.example.com/v1/data', { headers: { 'Authorization': 'Bearer YOUR_API_KEY', 'Content-Type': 'application/json' } }); return response.data; } catch (error) { console.error('Error fetching data:', error); throw error; } } `, python: ` # Using requests library import requests headers = { 'Authorization': 'Bearer YOUR_API_KEY', 'Content-Type': 'application/json' } response = requests.get('https://api.example.com/v1/data', headers=headers) if response.status_code == 200: data = response.json() print(data) else: print(f"Error: {response.status_code}") print(response.text) `, java: ` // Using Java HttpClient (Java 11+) import java.net.URI; import java.net.http.HttpClient; import java.net.http.HttpRequest; import java.net.http.HttpResponse; public class ApiClient { public static void main(String[] args) { HttpClient client = HttpClient.newHttpClient(); HttpRequest request = HttpRequest.newBuilder() .uri(URI.create("https://api.example.com/v1/data")) .header("Authorization", "Bearer YOUR_API_KEY") .header("Content-Type", "application/json") .GET() .build(); client.sendAsync(request, HttpResponse.BodyHandlers.ofString()) .thenApply(HttpResponse::body) .thenAccept(System.out::println) .join(); } } `, }, }, { question: 'How do I refresh an access token?', answer: 'When an access token expires, use the refresh token to obtain a new one. This avoids interrupting the user experience by requiring them to log in again.', examples: { javascript: ` // Refresh token example async function refreshAccessToken(refreshToken) { const response = await fetch('https://api.example.com/v1/auth/refresh', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ refresh_token: refreshToken }) }); const data = await response.json(); if (!response.ok) { throw new Error('Failed to refresh token'); } return { accessToken: data.access_token, refreshToken: data.refresh_token }; } `, typescript: ` // Refresh token with TypeScript interface TokenResponse { access_token: string; refresh_token: string; expires_in: number; } async function refreshAccessToken(refreshToken: string): Promise { const response = await fetch('https://api.example.com/v1/auth/refresh', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ refresh_token: refreshToken }) }); if (!response.ok) { throw new Error(\`Failed to refresh token: \${response.status}\`); } return await response.json() as TokenResponse; } `, python: ` # Refresh token in Python import requests def refresh_access_token(refresh_token): url = 'https://api.example.com/v1/auth/refresh' payload = { 'refresh_token': refresh_token } response = requests.post(url, json=payload) if response.status_code == 200: token_data = response.json() return { 'access_token': token_data['access_token'], 'refresh_token': token_data['refresh_token'] } else: raise Exception(f"Failed to refresh token: {response.status_code}") `, java: ` // Refresh token in Java import java.net.URI; import java.net.http.HttpClient; import java.net.http.HttpRequest; import java.net.http.HttpResponse; import org.json.JSONObject; public class TokenRefresher { public static JSONObject refreshAccessToken(String refreshToken) throws Exception { HttpClient client = HttpClient.newHttpClient(); JSONObject requestBody = new JSONObject(); requestBody.put("refresh_token", refreshToken); HttpRequest request = HttpRequest.newBuilder() .uri(URI.create("https://api.example.com/v1/auth/refresh")) .header("Content-Type", "application/json") .POST(HttpRequest.BodyPublishers.ofString(requestBody.toString())) .build(); HttpResponse response = client.send(request, HttpResponse.BodyHandlers.ofString()); if (response.statusCode() != 200) { throw new Exception("Failed to refresh token: " + response.statusCode()); } return new JSONObject(response.body()); } } `, }, }, ], }, { category: 'Data Handling', items: [ { question: 'How do I upload files to the API?', answer: 'Use multipart/form-data encoding to upload files. The API supports various file formats including images, documents, and archives up to 100MB in size.', examples: { javascript: ` // File upload using FormData function uploadFile(file) { const formData = new FormData(); formData.append('file', file); formData.append('description', 'File upload example'); return fetch('https://api.example.com/v1/files/upload', { method: 'POST', headers: { 'Authorization': 'Bearer YOUR_API_KEY' // No Content-Type header needed, it's set automatically with FormData }, body: formData }) .then(response => response.json()); } // Example usage with file input document.querySelector('#fileInput').addEventListener('change', (e) => { const file = e.target.files[0]; uploadFile(file).then(result => console.log('Upload result:', result)); }); `, typescript: ` // File upload with TypeScript interface UploadResponse { success: boolean; fileId: string; url: string; } async function uploadFile(file: File): Promise { const formData = new FormData(); formData.append('file', file); formData.append('description', 'File upload example'); const response = await fetch('https://api.example.com/v1/files/upload', { method: 'POST', headers: { 'Authorization': 'Bearer YOUR_API_KEY' }, body: formData }); if (!response.ok) { throw new Error(\`Upload failed: \${response.status}\`); } return await response.json() as UploadResponse; } `, python: ` # File upload in Python import requests def upload_file(file_path, description): url = 'https://api.example.com/v1/files/upload' headers = { 'Authorization': 'Bearer YOUR_API_KEY' } files = { 'file': open(file_path, 'rb') } data = { 'description': description } response = requests.post(url, headers=headers, files=files, data=data) if response.status_code == 200: return response.json() else: raise Exception(f"Upload failed: {response.status_code}") `, java: ` // File upload in Java import java.io.File; import java.nio.file.Files; import java.net.URI; import java.net.http.HttpClient; import java.net.http.HttpRequest; import java.net.http.HttpResponse; import java.util.UUID; public class FileUploader { public static String uploadFile(File file, String description) throws Exception { String boundary = UUID.randomUUID().toString(); HttpClient client = HttpClient.newHttpClient(); // Create multipart form data String separator = "--" + boundary + "\\r\\n"; String end = "--" + boundary + "--\\r\\n"; byte[] fileBytes = Files.readAllBytes(file.toPath()); String multipartBody = separator + "Content-Disposition: form-data; name=\\"description\\"\\r\\n\\r\\n" + description + "\\r\\n" + separator + "Content-Disposition: form-data; name=\\"file\\"; filename=\\"" + file.getName() + "\\"\\r\\n" + "Content-Type: application/octet-stream\\r\\n\\r\\n"; byte[] multipartBodyBytes = multipartBody.getBytes(); byte[] endBytes = ("\\r\\n" + end).getBytes(); byte[] requestBody = new byte[multipartBodyBytes.length + fileBytes.length + endBytes.length]; System.arraycopy(multipartBodyBytes, 0, requestBody, 0, multipartBodyBytes.length); System.arraycopy(fileBytes, 0, requestBody, multipartBodyBytes.length, fileBytes.length); System.arraycopy(endBytes, 0, requestBody, multipartBodyBytes.length + fileBytes.length, endBytes.length); HttpRequest request = HttpRequest.newBuilder() .uri(URI.create("https://api.example.com/v1/files/upload")) .header("Authorization", "Bearer YOUR_API_KEY") .header("Content-Type", "multipart/form-data; boundary=" + boundary) .POST(HttpRequest.BodyPublishers.ofByteArray(requestBody)) .build(); HttpResponse response = client.send(request, HttpResponse.BodyHandlers.ofString()); if (response.statusCode() != 200) { throw new Exception("Upload failed: " + response.statusCode()); } return response.body(); } } `, }, }, { question: 'How do I implement pagination with the API?', answer: "Our API uses cursor-based pagination for efficient results handling. Use the 'next_cursor' from the response to fetch the next page of results.", examples: { javascript: ` // Pagination example async function fetchAllItems() { let allItems = []; let nextCursor = null; do { // Build URL with cursor if available let url = 'https://api.example.com/v1/items?limit=100'; if (nextCursor) { url += \`&cursor=\${nextCursor}\`; } const response = await fetch(url, { headers: { 'Authorization': 'Bearer YOUR_API_KEY' } }); const data = await response.json(); // Add results to our collection allItems = [...allItems, ...data.items]; // Update cursor for next request nextCursor = data.next_cursor; // Continue until there's no next cursor } while (nextCursor); return allItems; } `, typescript: ` // Pagination with TypeScript interface PaginatedResponse { items: T[]; next_cursor: string | null; total_count: number; } interface Item { id: string; name: string; created_at: string; } async function fetchAllItems(): Promise { let allItems: Item[] = []; let nextCursor: string | null = null; do { let url = 'https://api.example.com/v1/items?limit=100'; if (nextCursor) { url += \`&cursor=\${nextCursor}\`; } const response = await fetch(url, { headers: { 'Authorization': 'Bearer YOUR_API_KEY' } }); const data = await response.json() as PaginatedResponse; allItems = [...allItems, ...data.items]; nextCursor = data.next_cursor; } while (nextCursor); return allItems; } `, python: ` # Pagination in Python import requests def fetch_all_items(): all_items = [] next_cursor = None while True: # Build URL with cursor if available url = 'https://api.example.com/v1/items?limit=100' if next_cursor: url += f'&cursor={next_cursor}' headers = { 'Authorization': 'Bearer YOUR_API_KEY' } response = requests.get(url, headers=headers) if response.status_code != 200: raise Exception(f"Failed to fetch items: {response.status_code}") data = response.json() # Add results to our collection all_items.extend(data['items']) # Update cursor for next request next_cursor = data.get('next_cursor') # Break if no more pages if not next_cursor: break return all_items `, java: ` // Pagination in Java import java.net.URI; import java.net.http.HttpClient; import java.net.http.HttpRequest; import java.net.http.HttpResponse; import java.util.ArrayList; import java.util.List; import org.json.JSONArray; import org.json.JSONObject; public class PaginatedFetcher { public static List fetchAllItems() throws Exception { List allItems = new ArrayList<>(); String nextCursor = null; HttpClient client = HttpClient.newHttpClient(); do { // Build URL with cursor if available String url = "https://api.example.com/v1/items?limit=100"; if (nextCursor != null) { url += "&cursor=" + nextCursor; } HttpRequest request = HttpRequest.newBuilder() .uri(URI.create(url)) .header("Authorization", "Bearer YOUR_API_KEY") .GET() .build(); HttpResponse response = client.send(request, HttpResponse.BodyHandlers.ofString()); if (response.statusCode() != 200) { throw new Exception("Failed to fetch items: " + response.statusCode()); } JSONObject data = new JSONObject(response.body()); JSONArray items = data.getJSONArray("items"); // Add items to our collection for (int i = 0; i < items.length(); i++) { allItems.add(items.getJSONObject(i)); } // Update cursor for next request nextCursor = data.has("next_cursor") ? data.getString("next_cursor") : null; } while (nextCursor != null); return allItems; } } `, }, }, ], }, { category: 'Error Handling', items: [ { question: 'How should I handle API errors?', answer: 'All API errors return appropriate HTTP status codes and a JSON response body with error details. Your code should check for non-200 status codes and handle errors accordingly.', examples: { javascript: ` // Error handling example async function makeApiRequest(endpoint) { try { const response = await fetch(\`https://api.example.com/v1/\${endpoint}\`, { headers: { 'Authorization': 'Bearer YOUR_API_KEY' } }); const data = await response.json(); if (!response.ok) { // Handle API errors with error info from the response console.error(\`API Error: \${data.error.code} - \${data.error.message}\`); throw new Error(data.error.message); } return data; } catch (error) { // Handle network errors or JSON parsing errors console.error('Request failed:', error); throw error; } } `, typescript: ` // Error handling with TypeScript interface ApiError { error: { code: string; message: string; details?: any; } } interface ApiResponse { success: boolean; data: T; } class ApiRequestError extends Error { code: string; details?: any; constructor(code: string, message: string, details?: any) { super(message); this.code = code; this.details = details; } } async function makeApiRequest(endpoint: string): Promise { try { const response = await fetch(\`https://api.example.com/v1/\${endpoint}\`, { headers: { 'Authorization': 'Bearer YOUR_API_KEY' } }); const responseData = await response.json(); if (!response.ok) { const errorData = responseData as ApiError; throw new ApiRequestError( errorData.error.code, errorData.error.message, errorData.error.details ); } return responseData as T; } catch (error) { if (error instanceof ApiRequestError) { // Handle API errors console.error(\`API Error: \${error.code} - \${error.message}\`); } else { // Handle network errors or JSON parsing errors console.error('Request failed:', error); } throw error; } } `, python: ` # Error handling in Python import requests class ApiError(Exception): def __init__(self, code, message, details=None): self.code = code self.message = message self.details = details super().__init__(f"{code}: {message}") def make_api_request(endpoint): url = f'https://api.example.com/v1/{endpoint}' headers = { 'Authorization': 'Bearer YOUR_API_KEY' } try: response = requests.get(url, headers=headers) response.raise_for_status() # Raise exception for 4XX/5XX responses return response.json() except requests.exceptions.HTTPError as e: # Handle API errors try: error_data = response.json() raise ApiError( error_data['error']['code'], error_data['error']['message'], error_data['error'].get('details') ) except (ValueError, KeyError): # Couldn't parse error JSON raise ApiError('unknown_error', str(e)) except requests.exceptions.RequestException as e: # Handle network errors raise ApiError('network_error', str(e)) `, java: ` // Error handling in Java import java.io.IOException; import java.net.URI; import java.net.http.HttpClient; import java.net.http.HttpRequest; import java.net.http.HttpResponse; import org.json.JSONObject; class ApiError extends Exception { private String code; private Object details; public ApiError(String code, String message, Object details) { super(message); this.code = code; this.details = details; } public String getCode() { return code; } public Object getDetails() { return details; } } public class ApiClient { public static JSONObject makeApiRequest(String endpoint) throws Exception { HttpClient client = HttpClient.newHttpClient(); HttpRequest request = HttpRequest.newBuilder() .uri(URI.create("https://api.example.com/v1/" + endpoint)) .header("Authorization", "Bearer YOUR_API_KEY") .GET() .build(); try { HttpResponse response = client.send(request, HttpResponse.BodyHandlers.ofString()); JSONObject responseData = new JSONObject(response.body()); if (response.statusCode() < 200 || response.statusCode() >= 300) { // Handle API errors JSONObject error = responseData.getJSONObject("error"); throw new ApiError( error.getString("code"), error.getString("message"), error.has("details") ? error.get("details") : null ); } return responseData; } catch (IOException e) { // Handle network errors throw new ApiError("network_error", "Network error occurred: " + e.getMessage(), null); } catch (InterruptedException e) { Thread.currentThread().interrupt(); throw new ApiError("request_interrupted", "Request was interrupted", null); } catch (Exception e) { if (e instanceof ApiError) { throw e; } // Handle other errors throw new ApiError("unknown_error", "Unknown error: " + e.getMessage(), null); } } } `, }, }, ], }, ]; export default function CodeSnippets() { const [searchQuery, setSearchQuery] = useState(''); const [selectedLanguage, setSelectedLanguage] = useState('javascript'); const [copiedSnippet, setCopiedSnippet] = useState(null); // Filter FAQs based on search query const filteredFaqs = searchQuery.trim() === '' ? faqs : faqs .map((category) => ({ ...category, items: category.items.filter( (item) => item.question .toLowerCase() .includes(searchQuery.toLowerCase()) || item.answer.toLowerCase().includes(searchQuery.toLowerCase()) ), })) .filter((category) => category.items.length > 0); const copyToClipboard = (text: string, snippetId: string) => { navigator.clipboard.writeText(text.trim()); setCopiedSnippet(snippetId); setTimeout(() => setCopiedSnippet(null), 2000); }; return (

{/* Title */}

Developer Documentation

Technical FAQ and code examples for developers

{/* End Title */} {/* Search and Language Selection */}

{/* Search Input */}

setSearchQuery(e.target.value)} />

{/* Language Tabs (desktop) / Dropdown (mobile) */}

{/* Tabs for larger screens */}

setSelectedLanguage(value as LanguageId) } className="w-full" > {languageTabs.map((tab) => ( {tab.label} ))}

{/* Dropdown for mobile */}

{/* FAQ Container */}

{filteredFaqs.length > 0 ? ( filteredFaqs.map((category, categoryIndex) => (

{category.category}

{category.items.map((item, itemIndex) => { const snippetId = `${category.category}-${itemIndex}`; const codeSnippet = item.examples[selectedLanguage] || ''; const isSnippetCopied = copiedSnippet === snippetId; return ( {item.question}

{item.answer}

{/* Code Snippet */}

Example ( { languageTabs.find( (l) => l.id === selectedLanguage )?.label } )

                              {codeSnippet}

); })}

)) ) : (

No results found for "{searchQuery}". Try a different search term.

)}

); } 52:Ta54,"use client" import * as React from "react" import { Accordion as AccordionPrimitive } from "radix-ui" import { cn } from "@/lib/utils" import { ChevronDownIcon, ChevronUpIcon } from "lucide-react" function Accordion({ className, ...props }: React.ComponentProps) { return ( ) } function AccordionItem({ className, ...props }: React.ComponentProps) { return ( ) } function AccordionTrigger({ className, children, ...props }: React.ComponentProps) { return ( {children} ) } function AccordionContent({ className, children, ...props }: React.ComponentProps) { return (

{children}

) } export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } 53:Td06,import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { Slot } from "radix-ui" import { cn } from "@/lib/utils" const buttonVariants = cva( "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/80", outline: "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground", ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50", destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3", sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5", lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", icon: "size-9", "icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3", "icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md", "icon-lg": "size-10", }, }, defaultVariants: { variant: "default", size: "default", }, } ) function Button({ className, variant = "default", size = "default", asChild = false, ...props }: React.ComponentProps<"button"> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot.Root : "button" return ( ) } export { Button, buttonVariants } 54:Tdf4,"use client" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { Tabs as TabsPrimitive } from "radix-ui" import { cn } from "@/lib/utils" function Tabs({ className, orientation = "horizontal", ...props }: React.ComponentProps) { return ( ) } const tabsListVariants = cva( "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none", { variants: { variant: { default: "bg-muted", line: "gap-1 bg-transparent", }, }, defaultVariants: { variant: "default", }, } ) function TabsList({ className, variant = "default", ...props }: React.ComponentProps & VariantProps) { return ( ) } function TabsTrigger({ className, ...props }: React.ComponentProps) { return ( ) } function TabsContent({ className, ...props }: React.ComponentProps) { return ( ) } export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants } 55:T19eb,"use client" import * as React from "react" import { Select as SelectPrimitive } from "radix-ui" import { cn } from "@/lib/utils" import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react" function Select({ ...props }: React.ComponentProps) { return } function SelectGroup({ className, ...props }: React.ComponentProps) { return ( ) } function SelectValue({ ...props }: React.ComponentProps) { return } function SelectTrigger({ className, size = "default", children, ...props }: React.ComponentProps & { size?: "sm" | "default" }) { return ( {children} ) } function SelectContent({ className, children, position = "item-aligned", align = "center", ...props }: React.ComponentProps) { return ( {children} ) } function SelectLabel({ className, ...props }: React.ComponentProps) { return ( ) } function SelectItem({ className, children, ...props }: React.ComponentProps) { return ( {children} ) } function SelectSeparator({ className, ...props }: React.ComponentProps) { return ( ) } function SelectScrollUpButton({ className, ...props }: React.ComponentProps) { return ( ) } function SelectScrollDownButton({ className, ...props }: React.ComponentProps) { return ( ) } export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","class-variance-authority",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"class-variance-authority"}]]}]}],["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","radix-ui",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"radix-ui"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://www.shadcn-ui-blocks.com/r/marketing-faq-sections-code-snippets.json","proxyUrl":"https://shadcnregistry.com/r/shadcn-ui-blocks/marketing-faq-sections-code-snippets","itemId":"@shadcn-ui-blocks/marketing-faq-sections-code-snippets"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"components/blocks/marketing/faq-sections/code-snippets.tsx","content":"$51","type":"registry:component","target":"components/blocks/marketing/faq-sections/code-snippets.tsx"},{"path":"components/ui/accordion.tsx","content":"$52","type":"registry:ui","target":"components/ui/accordion.tsx"},{"path":"components/ui/button.tsx","content":"$53","type":"registry:ui","target":"components/ui/button.tsx"},{"path":"components/ui/input.tsx","content":"import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n return (\n \n )\n}\n\nexport { Input }\n","type":"registry:ui","target":"components/ui/input.tsx"},{"path":"components/ui/tabs.tsx","content":"$54","type":"registry:ui","target":"components/ui/tabs.tsx"},{"path":"components/ui/select.tsx","content":"$55","type":"registry:ui","target":"components/ui/select.tsx"}]}]]}],"$L56"]}]

Code Snippets

Installation

Files

components

Styles