kopia lustrzana https://github.com/Tldraw/Tldraw
133 wiersze
2.6 KiB
TypeScript
133 wiersze
2.6 KiB
TypeScript
/* ---------------------- Lists --------------------- */
|
|
|
|
import React from 'react'
|
|
|
|
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 ------------------- */
|
|
|
|
type Heading = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
|
|
|
|
function heading(heading: Heading, props: any) {
|
|
const Element = ({ ...props }) => React.createElement(heading, props)
|
|
if (props.id) {
|
|
return (
|
|
<Element {...props}>
|
|
<a href={`#${props.id}`}>{props.children}</a>
|
|
</Element>
|
|
)
|
|
}
|
|
|
|
return <Element {...props} />
|
|
}
|
|
|
|
export const Heading1 = (props: any) => {
|
|
return heading('h1', props)
|
|
}
|
|
|
|
export const Heading2 = (props: any) => {
|
|
return heading('h2', props)
|
|
}
|
|
|
|
export const Heading3 = (props: any) => {
|
|
return heading('h3', props)
|
|
}
|
|
|
|
export const Heading4 = (props: any) => {
|
|
return heading('h4', props)
|
|
}
|
|
|
|
export const Heading5 = (props: any) => {
|
|
return heading('h5', props)
|
|
}
|
|
|
|
export const Heading6 = (props: any) => {
|
|
return heading('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.caption && <span className="article__caption">{props.caption}</span>}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
export const Video = (props: any) => {
|
|
return (
|
|
<span className="artcle__video">
|
|
<video alt={props.title} {...props} />
|
|
{props.caption && <span className="article__caption">{props.caption}</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} />
|
|
}
|