mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-10-04 19:50:55 +00:00
261 lines
11 KiB
JavaScript
Vendored
261 lines
11 KiB
JavaScript
Vendored
// @flow
|
|
|
|
import React from "react";
|
|
|
|
import {
|
|
Container,
|
|
Grid,
|
|
Card,
|
|
Button,
|
|
Form,
|
|
Avatar,
|
|
Profile,
|
|
List,
|
|
Media,
|
|
Text,
|
|
Comment,
|
|
} from "tabler-react";
|
|
|
|
import SiteWrapper from "../SiteWrapper.react";
|
|
|
|
function ProfilePage() {
|
|
return (
|
|
<SiteWrapper>
|
|
<div className="my-3 my-md-5">
|
|
<Container>
|
|
<Grid.Row>
|
|
<Grid.Col lg={4}>
|
|
<Profile
|
|
name="Peter Richards"
|
|
backgroundURL="demo/photos/eberhard-grossgasteiger-311213-500.jpg"
|
|
avatarURL="demo/faces/male/16.jpg"
|
|
twitterURL="test"
|
|
>
|
|
Big belly rude boy, million dollar hustler. Unemployed.
|
|
</Profile>
|
|
<Card>
|
|
<Card.Body>
|
|
<Media>
|
|
<Avatar
|
|
size="xxl"
|
|
className="mr-5"
|
|
imageURL="demo/faces/male/21.jpg"
|
|
/>
|
|
<Media.BodySocial
|
|
name="Juan Hernandez"
|
|
workTitle="Webdeveloper"
|
|
facebook="Facebook"
|
|
twitter="Twitter"
|
|
phone="1234567890"
|
|
skype="@skypename"
|
|
/>
|
|
</Media>
|
|
</Card.Body>
|
|
</Card>
|
|
<Card>
|
|
<Card.Header>
|
|
<Card.Title>My Profile</Card.Title>
|
|
</Card.Header>
|
|
<Card.Body>
|
|
<Form>
|
|
<Grid.Row>
|
|
<Grid.Col auto>
|
|
<Avatar size="xl" imageURL="demo/faces/female/9.jpg" />
|
|
</Grid.Col>
|
|
<Grid.Col>
|
|
<Form.Group>
|
|
<Form.Label>Email-Address</Form.Label>
|
|
<Form.Input placeholder="your-email@domain.com" />
|
|
</Form.Group>
|
|
</Grid.Col>
|
|
</Grid.Row>
|
|
<Form.Group>
|
|
<Form.Label>Bio</Form.Label>
|
|
<Form.Textarea rows={5}>
|
|
Big belly rude boy, million dollar hustler. Unemployed.
|
|
</Form.Textarea>
|
|
</Form.Group>
|
|
<Form.Group>
|
|
<Form.Label>Email-Address</Form.Label>
|
|
<Form.Input placeholder="your-email@domain.com" />
|
|
</Form.Group>
|
|
<Form.Group>
|
|
<Form.Label>Password</Form.Label>
|
|
<Form.Input type="password" value="Password" />
|
|
</Form.Group>
|
|
<Form.Footer>
|
|
<Button color="primary" block>
|
|
Save
|
|
</Button>
|
|
</Form.Footer>
|
|
</Form>
|
|
</Card.Body>
|
|
</Card>
|
|
</Grid.Col>
|
|
<Grid.Col lg={8}>
|
|
<Card>
|
|
<Card.Header>
|
|
<Form.InputGroup>
|
|
<Form.Input type="text" placeholder="Message" />
|
|
<Form.InputGroup append>
|
|
<Button icon="camera" color="secondary" />
|
|
</Form.InputGroup>
|
|
</Form.InputGroup>
|
|
</Card.Header>
|
|
<Comment.List>
|
|
<Comment
|
|
avatarURL="demo/faces/male/16.jpg"
|
|
name="Peter Richards"
|
|
date="4 min"
|
|
text="Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."
|
|
replies={
|
|
<React.Fragment>
|
|
<Comment.Reply
|
|
name="Debra Beck"
|
|
avatarURL="demo/faces/female/17.jpg"
|
|
text="Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis."
|
|
/>
|
|
<Comment.Reply
|
|
name="Jack Ruiz"
|
|
avatarURL="demo/faces/male/32.jpg"
|
|
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus."
|
|
/>
|
|
</React.Fragment>
|
|
}
|
|
/>
|
|
<Comment
|
|
avatarURL="demo/faces/male/16.jpg"
|
|
date="12 min"
|
|
name="Peter Richards"
|
|
text="Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis."
|
|
/>
|
|
<Comment
|
|
avatarURL="demo/faces/male/16.jpg"
|
|
date="34 min"
|
|
name="Peter Richards"
|
|
text="Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui."
|
|
replies={
|
|
<Comment.Reply
|
|
name="Wayne Holland"
|
|
avatarURL="demo/faces/male/26.jpg"
|
|
text=" Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis."
|
|
/>
|
|
}
|
|
/>
|
|
</Comment.List>
|
|
</Card>
|
|
<Form className="card">
|
|
<Card.Body>
|
|
<Card.Title>Edit Profile</Card.Title>
|
|
<Grid.Row>
|
|
<Grid.Col md={5}>
|
|
<Form.Group>
|
|
<Form.Label>Company</Form.Label>
|
|
<Form.Input
|
|
type="text"
|
|
disabled
|
|
placeholder="Company"
|
|
value="Creative Code Inc."
|
|
/>
|
|
</Form.Group>
|
|
</Grid.Col>
|
|
<Grid.Col sm={6} md={3}>
|
|
<Form.Group>
|
|
<Form.Label>Username</Form.Label>
|
|
<Form.Input
|
|
type="text"
|
|
placeholder="Username"
|
|
value="michael23"
|
|
/>
|
|
</Form.Group>
|
|
</Grid.Col>
|
|
<Grid.Col sm={6} md={4}>
|
|
<Form.Group>
|
|
<Form.Label>Email address</Form.Label>
|
|
<Form.Input type="email" placeholder="Email" />
|
|
</Form.Group>
|
|
</Grid.Col>
|
|
<Grid.Col sm={6} md={6}>
|
|
<Form.Group>
|
|
<Form.Label>First Name</Form.Label>
|
|
<Form.Input
|
|
type="text"
|
|
placeholder="First Name"
|
|
value="Chet"
|
|
/>
|
|
</Form.Group>
|
|
</Grid.Col>
|
|
<Grid.Col sm={6} md={6}>
|
|
<Form.Group>
|
|
<Form.Label>Last Name</Form.Label>
|
|
<Form.Input
|
|
type="text"
|
|
placeholder="Last Name"
|
|
value="Faker"
|
|
/>
|
|
</Form.Group>
|
|
</Grid.Col>
|
|
<Grid.Col md={12}>
|
|
<Form.Group>
|
|
<Form.Label>Address</Form.Label>
|
|
<Form.Input
|
|
type="text"
|
|
placeholder="Home Address"
|
|
value="Melbourne, Australia"
|
|
/>
|
|
</Form.Group>
|
|
</Grid.Col>
|
|
<Grid.Col sm={6} md={4}>
|
|
<Form.Group>
|
|
<Form.Label>City</Form.Label>
|
|
<Form.Input
|
|
type="text"
|
|
placeholder="City"
|
|
value="Melbourne"
|
|
/>
|
|
</Form.Group>
|
|
</Grid.Col>
|
|
<Grid.Col sm={6} md={3}>
|
|
<Form.Group>
|
|
<Form.Label>Postal Code</Form.Label>
|
|
<Form.Input type="number" placeholder="ZIP Code" />
|
|
</Form.Group>
|
|
</Grid.Col>
|
|
<Grid.Col md={5}>
|
|
<Form.Group>
|
|
<Form.Label>Country</Form.Label>
|
|
<Form.Select>
|
|
<option>Germany</option>
|
|
</Form.Select>
|
|
</Form.Group>
|
|
</Grid.Col>
|
|
<Grid.Col md={12}>
|
|
<Form.Group className="mb=0" label="About Me">
|
|
<Form.Textarea
|
|
rows={5}
|
|
placeholder="Here can be your description"
|
|
>
|
|
Oh so, your weak rhyme You doubt I'll bother, reading
|
|
into it I'll probably won't, left to my own devices
|
|
But that's the difference in our opinions.
|
|
</Form.Textarea>
|
|
</Form.Group>
|
|
</Grid.Col>
|
|
</Grid.Row>
|
|
</Card.Body>
|
|
<Card.Footer className="text-right">
|
|
<Button type="submit" color="primary">
|
|
Update Profile
|
|
</Button>
|
|
</Card.Footer>
|
|
</Form>
|
|
</Grid.Col>
|
|
</Grid.Row>
|
|
</Container>
|
|
</div>
|
|
</SiteWrapper>
|
|
);
|
|
}
|
|
|
|
export default ProfilePage;
|