-
-
Notifications
You must be signed in to change notification settings - Fork 303
/
Components.tsx
47 lines (44 loc) · 1.36 KB
/
Components.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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import React, { ReactElement } from "react";
import {
CardHeader,
CardTitle,
CardContent,
CardActions,
} from "@react-md/card";
import { Divider } from "@react-md/divider";
import { MediaContainer } from "@react-md/media";
import { Text } from "@react-md/typography";
import Code from "components/Code";
import CodeBlock from "components/CodeBlock";
import LinkButton from "components/LinkButton";
import { Component as SVG } from "./components.svg";
import JumpStartCard from "./JumpStartCard";
export default function Components(): ReactElement {
return (
<JumpStartCard>
<CardHeader>
<CardTitle>Components and Styles</CardTitle>
</CardHeader>
<MediaContainer fullWidth>
<SVG role="presentation" />
</MediaContainer>
<CardContent disableSecondaryColor>
<Text>
Once you've installed <Code>react-md</Code>, it's time to
check out all the components that are available and how to use them.
</Text>
</CardContent>
<CodeBlock language="tsx">
{`<Button id="example-button" onClick={() => console.log("I was clicked!")}>
Example Button
</Button>`}
</CodeBlock>
<Divider />
<CardActions>
<LinkButton href="/packages/alert/demos" themeType="outline">
See Examples!
</LinkButton>
</CardActions>
</JumpStartCard>
);
}