Artifact Panel

Side panel for viewing and interacting with AI-generated artifacts like code, documents, and previews.

AITailwind CSS

Overview

Side panel for viewing and interacting with AI-generated artifacts like code, documents, and previews.

Preview

sortArray.ts

TypeScript

function sortArray<T>(
  arr: T[],
  compareFn?: (a: T, b: T) => number
): T[] {
  return [...arr].sort(compareFn);
}

// Usage
const numbers = [3, 1, 4, 1, 5];
const sorted = sortArray(numbers);
console.log(sorted); // [1, 1, 3, 4, 5]

Usage

html
<!-- Tailwind CSS pattern - copy the HTML/classes below -->

Class Variations

No class variations documented for this pattern.

Guidelines

No specific guidelines documented for this component yet.

Examples

Code Artifact

sortArray.ts

TypeScript

function sortArray<T>(
  arr: T[],
  compareFn?: (a: T, b: T) => number
): T[] {
  return [...arr].sort(compareFn);
}

// Usage
const numbers = [3, 1, 4, 1, 5];
const sorted = sortArray(numbers);
console.log(sorted); // [1, 1, 3, 4, 5]

With View Toggle

Interactive Chart

[Chart Preview]

Related Components