Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from 'react';
- import './App.css';
- import { Value, Image, List } from '@solid/react';
- import Email from './Email';
- import 'bootstrap/dist/css/bootstrap.min.css';
- class App extends React.Component {
- state = {
- profile: '',
- renderProfile: false
- };
- viewProfile(profile) {
- this.setState({ profile: profile, renderProfile: true });
- }
- render() {
- const { profile, renderProfile } = this.state;
- return (
- <div className="bg-dark text-white" style={{width:100 + '%',height:1500 + 'px'}}>
- <nav className="navbar navbar-dark bg-secondary">
- <span className="navbar-brand mb-0 h1">Profile viewer</span>
- </nav>
- <div style={{marginLeft:50 + "px"}}>
- <h3>Input solid profile:</h3>
- <p>
- <label htmlFor="profile">Profile:</label>
- <input id="profile" value={profile} onChange={e => this.setState({ profile: e.target.value })} />
- <button onClick={() => this.viewProfile(profile)}>View</button>
- </p>
- {renderProfile &&
- <div>
- <p>
- <Image className="profile-img" src={`[${profile}][foaf:img]`} />
- <br />
- <label htmlFor="name">Name: </label>
- <span id="name">
- <Value src={`[${profile}][foaf:name]`} />
- </span>
- <br />
- <label htmlFor="email">Email: </label>
- <span id="email">
- <Email src={`[${profile}][foaf:mbox]`} />
- </span>
- <br />
- <label htmlFor="friends">Friends: </label>
- </p>
- <List class="list-group " src={`[${profile}][foaf:knows]`}>{friend =>
- <li style={{width:80 + '%'}} class="list-group-item bg-dark text-white" key={friend}>
- <Image className="profile-img" src={`[${friend}][foaf:img]`} />
- <br />
- <label>Name: </label>
- <button style={{color:'white'}} onClick={() => this.viewProfile(friend)}>
- <Value src={`[${friend}].name`}>{`${friend}`}</Value>
- </button>
- <br />
- <label>Email: </label>
- <Email src={`[${friend}][foaf:mbox]`} />
- </li>}
- </List>
- </div>
- }
- </div>
- </div>
- );
- }
- }
- export default App;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement