export default function Contacts() { return ( <ContactContextProvider> <Segment basic> <Header as="h3">Contacts</Header> <ContactForm /> <ContactTable /> </Segment> </ContactContextProvider> ); }
export default function Counter() { return ( <useCounterContext.Provider> <h3>Counter</h3> <Segment textAlign="center"> <CounterDisplay /> <CounterButtons /> </Segment> </useCounterContext.Provider> ) }
this.state.books.map((book) => ( <Grid.Column key={book.id}> <Segment as={ Link } to={'/books/' + book.id} className='book__link'> <div className='image__holder--small'> <Image centered src={book.book_cover.thumb.url} /> </div> <Header as='h4' textAlign='center'>{book.name}</Header> </Segment> </Grid.Column> ))
export default function CounterView() { return ( <CounterContextProvider> <h3>Counter</h3> <Segment textAlign="center"> <CounterDisplay /> <CounterButtons /> </Segment> </CounterContextProvider> ); }
const HeroBar = props => { return ( <Segment> <Header as='h1' icon textAlign='center'> <Icon name='cogs' /> <Header.Content>{props.children}</Header.Content> </Header> </Segment> ); }
const GallerySlide = (props) => { const { component, centerVisible, animationDirection } = props; const duration = 200 return ( <Transition visible={centerVisible} animation={animationDirection} duration={duration}> <Segment basic> <ComponentWrapper type={component.type} title={component.name} card> {handleBuildComponent(component)} </ComponentWrapper > </Segment> </Transition> ) }
const LoaderSpinner = () => ( <Segment> <Dimmer active> <Loader>Loading</Loader> </Dimmer> <Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' /> </Segment> )
render() { return ( <Visibility once={false} onOnScreen={this.masterHeaderOnScreen} onOffScreen={this.masterHeaderOffScreen} > <Segment inverted vertical textAlign='center' className="masthead"> <HomepageMenu /> <SloganContainer /> </Segment> </Visibility> ); }
const Questiontype1 = () => ( <div> <Segment className=" mrgt40 mrgb40 padb40"> <Container text className="pad20"> <QuestiontypeHeader/> <QuestionAnswer/> </Container> </Segment> </div> )
export default function Contacts() { return ( // Wrap the components that you want to share your custom hook state <useContactsContext.Provider> <Segment basic> <Header as="h3">Contacts</Header> <ContactForm /> <ContactTable /> </Segment> </useContactsContext.Provider> ); }
const TutorialSlide = (props) => { const { centerVisible, animationDirection, currentPage } = props; const duration = 200 return ( <Transition visible={centerVisible} animation={animationDirection} duration={duration}> <Segment basic> {handleBuildTutorialSlide(currentPage)} </Segment> </Transition> ) }
const NoUsername = () => { return ( <Segment placeholder> <Header icon> <Icon name='search' /> Enter a username in the box above and click the button! </Header> </Segment> ) }
const Main = ({ children }) => ( <DesktopContainer> <Segment vertical> <Container> {children} </Container> </Segment> </DesktopContainer> )
this.state.newestBooks.map((book) => ( <Grid.Column key={book.id}> <Segment as={ Link } to={'/books/' + book.id} className='book__link'> <div className='image__holder'> <Image centered src={book.book_cover.small.url} /> </div> <Header as='h3' textAlign='center'>{book.name}</Header> </Segment> </Grid.Column> ))
this.state.books.map(book => ( <Grid.Column key={book.id}> <Segment as={ Link } to={'/books/' + book.id} className='book__link'> <div className='image__holder--small'> <Image centered src={book.book_cover.thumb.url} /> </div> <Header as='h4' textAlign='center'>{book.name}</Header> </Segment> </Grid.Column> ))