All files / packages/app/features/playground text-showcase.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { HighlightedText } from "~components/highlighted-text";
import { Text } from "~components/text";
 
import { Group, Section } from "./showcase-section";
 
const TextExample = () => (
	<Section title="Text">
		{(["span", "h1", "h2", "h3", "h4", "p", "blockquote", "code"] as const).map(
			(variant) => (
				<Text key={variant} variant={variant}>
					Variant {variant}
				</Text>
			),
		)}
	</Section>
);
 
const HighlightedTextShowcase = () => (
	<Section title="HighlightedText">
		<HighlightedText>Highlighted example</HighlightedText>
	</Section>
);
 
export const TextShowcase = () => (
	<Group title="Text">
		<TextExample />
		<HighlightedTextShowcase />
	</Group>
);