Tldraw/apps/docs/components/mdx-components/generic.tsx

125 wiersze
2.4 KiB
TypeScript

/* ---------------------- Lists --------------------- */
import { Icon } from '../Icon'
export const UnorderedList = (props: any) => {
return <ul {...props} />
}
export const OrderedList = (props: any) => {
return <ol {...props} />
}
export const ListItem = (props: any) => {
return <li {...props} />
}
/* ------------------- Typography ------------------- */
export const Heading1 = (props: any) => {
return <h1 {...props} />
}
export const Heading2 = (props: any) => {
return <h2 {...props} />
}
export const Heading3 = (props: any) => {
return (
<div className="article__title">
<h3 {...props} />
<button className="icon-button" onClick={() => window.scrollTo(0, 0)}>
<Icon icon="back-to-top" />
</button>
</div>
)
}
export const Heading4 = (props: any) => {
return <h4 {...props} />
}
export const Heading5 = (props: any) => {
return <h5 {...props} />
}
export const Heading6 = (props: any) => {
return <h6 {...props} />
}
export const Paragraph = (props: any) => {
return <p {...props} />
}
export const A = (props: any) => {
return <a {...props} />
}
export const Divider = (props: any) => {
return <hr {...props} />
}
export const Blockquote = (props: any) => {
return <blockquote {...props} />
}
export const Small = (props: any) => {
return (
<p className="article__small">
<small {...props} />
</p>
)
}
/* --------------------- Tables --------------------- */
export const Table = (props: any) => {
return <table {...props} />
}
export const THead = (props: any) => {
return <thead {...props} />
}
export const TR = (props: any) => {
return <tr {...props} />
}
export const TD = (props: any) => {
return <td {...props} />
}
/* --------------------- Media --------------------- */
export const Image = (props: any) => {
return (
<span className="artcle__image">
<img alt={props.title} {...props} />
{props.title && <span className="article__caption">{props.title}</span>}
</span>
)
}
export const Video = (props: any) => {
return (
<span className="artcle__video">
<video alt={props.title} {...props} />
{props.title && <span className="article__caption">{props.title}</span>}
</span>
)
}
/* ------------------- Code Blocks ------------------ */
export const Pre = (props: any) => {
return <pre {...props} />
}
export const Code = (props: any) => {
return <code {...props} />
}
export const Footnotes = (props: any) => {
return <div {...props} />
}