import React from "react"; import Body from "./Body"; import Caption from "./Caption"; import Caption2 from "./Caption2"; import Footnote from "./Footnote"; import Headline from "./Headline"; import Largetitle from "./Largetitle"; import Overline from "./Overline"; import Subheadline from "./Subheadline"; import Subtitle from "./Subtitle"; import Title from "./Title"; import Title2 from "./Title2"; import Title3 from "./Title3"; import classnames from "classnames"; type Props = { variant?: | "overline" | "caption" | "body" | "caption2" | "footnote" | "headline" | "largetitle" | "subheadline" | "subtitle" | "title" | "title2" | "title3"; children: any; text?: string; tx?: string; className?: string; color?: string; }; export type TextProps = { children: any; text?: string; tx?: string; color?: string; className?: string; }; /** * static let largeTitle: Font * A font with the large title text style. * * static let title: Font * A font with the title text style. * * static let title2: Font * Create a font for second level hierarchical headings. * * static let title3: Font * Create a font for third level hierarchical headings. * * static let headline: Font * A font with the headline text style. * * static let subheadline: Font * A font with the subheadline text style. * * static let body: Font * A font with the body text style. * * static let callout: Font * A font with the callout text style. * * static let caption: Font * A font with the caption text style. * * static let caption2: Font * Create a font with the alternate caption text style. * * static let footnote: Font * A font with the footnote text style. */ const Text: React.FunctionComponent = (props: Props) => { const classes = classnames(props?.className, props?.color); switch (props?.variant) { case "overline": return ( {props.children} ); case "body": return ( {props.children} ); case "caption": return ( {props.children} ); case "caption2": return ( {props.children} ); case "footnote": return ( {props.children} ); case "headline": return ( {props.children} ); case "largetitle": return ( {props.children} ); case "subheadline": return ( {props.children} ); case "subtitle": return ( {props.children} ); case "title": return ( {props.children} ); case "title2": return ( {props.children} ); case "title3": return ( {props.children} ); default: return ( {props.children} ); } }; export default Text;