ratkit 0.2.16

A comprehensive collection of reusable TUI components for ratatui including resizable splits, tree views, markdown rendering, toast notifications, dialogs, and terminal embedding
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

import { Anthropic, Google, OpenAI } from "@lobehub/icons";
import { DynamicCodeBlock } from "fumadocs-ui/components/dynamic-codeblock";
import {
	Tabs,
	TabsContent,
	TabsList,
	TabsTrigger,
} from "fumadocs-ui/components/tabs";
import {
	anthropicGenerateText,
	anthropicStreamText,
	googleGenerateText,
	googleStreamText,
	openaiGenerateText,
	openaiStreamText,
} from "./codes";

// store the icons and codes components in a map for easy access
const icons = { OpenAI: OpenAI, Anthropic: Anthropic, Google: Google.Color };
const codes = {
	OpenAIGenerateText: openaiGenerateText,
	AnthropicGenerateText: anthropicGenerateText,
	GoogleGenerateText: googleGenerateText,
	OpenAIStreamText: openaiStreamText,
	AnthropicStreamText: anthropicStreamText,
	GoogleStreamText: googleStreamText,
};

interface TabData {
	code:
		| "OpenAIGenerateText"
		| "AnthropicGenerateText"
		| "GoogleGenerateText"
		| "OpenAIStreamText"
		| "AnthropicStreamText"
		| "GoogleStreamText";
	icon: "OpenAI" | "Anthropic" | "Google";
	value: "openai" | "anthropic" | "google";
	label: string;
}

interface CompletedTabData extends Omit<TabData, "icon" | "code"> {
	icon: React.ComponentType;
	code: string;
}

interface CustomCodeTabsProps {
	tabsData: TabData[];
}

export const CustomCodeTabs = ({ tabsData }: CustomCodeTabsProps) => {
	const completedTabsData: CompletedTabData[] = tabsData.map((tab) => ({
		...tab,
		icon: icons[tab.icon],
		code: codes[tab.code],
	}));

	return (
		<Tabs defaultValue={completedTabsData[0]?.value}>
			<TabsList>
				{completedTabsData.map((tab) => (
					<TabsTrigger key={tab.value} value={tab.value}>
						<tab.icon />
						{tab.label}
					</TabsTrigger>
				))}
			</TabsList>
			{completedTabsData.map((tab) => (
				<TabsContent key={tab.value} value={tab.value}>
					<DynamicCodeBlock lang="rust" code={tab.code} />
				</TabsContent>
			))}
		</Tabs>
	);
};