components/Profile/Avatar/Fragment.ts
import gql from 'graphql-tag';
export default gql`
fragment ProfileAvatarFragment on Profile {
id
name
kind
imageUrl
}
`;
import * as React from "react";
import Text from "components/Text";
{text}
Slide 66
Slide 66 text
import * as React from "react";
import styles from "./styles.css";
export function Text({ children }) {
return (
{children}
);
}
components/Text/index.tsx
import * as React from "react";
import Text from "components/Text";
text
// -> text
Slide 69
Slide 69 text
import * as React from "react";
import Text from "components/Text";
text
// -> text
text
// ->
text
Slide 70
Slide 70 text
import * as React from "react";
import styles from "./styles.css";
export function Text({ as, ...props }) {
Component = as || "span";
return ;
}
) Pass custom component as prop
Slide 71
Slide 71 text
import * as React from "react";
import Text from "components/Text";
text
// -> Text
Slide 72
Slide 72 text
import * as React from "react";
import Text from "components/Text";
import styles from "./styles.css";
text
// -> text
Slide 73
Slide 73 text
import * as React from "react";
import styles from "./styles.css";
import classNames from "classnames";
export function Text({ as, className, ...props }) {
Component = as || "span";
return
Slide 74
Slide 74 text
yarn install "classnames"
Slide 75
Slide 75 text
import * as React from "react";
import Text from "components/Text";
text
// -> text
text
// -> text
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
Slide 79
Slide 79 text
Input
Slide 80
Slide 80 text
Input Loading
Slide 81
Slide 81 text
Input Loading
Success
Slide 82
Slide 82 text
Input Loading
Success
Errors
Slide 83
Slide 83 text
Submit Server
Success
Errors
Slide 84
Slide 84 text
remoteCall Server
{ result: 'ok' }
{ errors: {…} }