Skip to content

Commit e1f4088

Browse files
MAKUSrefMAKUSref
committed
Add examples
1 parent c4b731e commit e1f4088

11 files changed

Lines changed: 502 additions & 5 deletions

File tree

‎src/App.js‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
44

55
export default function App() {
66
return (
7-
<MDBContainer className="d-flex justify-content-center">
7+
<MDBContainer>
88
<Link to="/basic">
99
<MDBBtn className="m-2">
1010
Basic
@@ -20,6 +20,26 @@ export default function App() {
2020
User profile page template
2121
</MDBBtn>
2222
</Link>
23+
<Link to="/attending-users">
24+
<MDBBtn className="m-2">
25+
Project cards with attending users
26+
</MDBBtn>
27+
</Link>
28+
<Link to="/personal-profile">
29+
<MDBBtn className="m-2">
30+
Personal profile with edit icon
31+
</MDBBtn>
32+
</Link>
33+
<Link to="/edit-button">
34+
<MDBBtn className="m-2">
35+
Edit button on profile page
36+
</MDBBtn>
37+
</Link>
38+
<Link to="/profile-statistics">
39+
<MDBBtn className="m-2">
40+
Profile card with statistics
41+
</MDBBtn>
42+
</Link>
2343
</MDBContainer>
2444
);
2545
}

‎src/attendingUsers/AttendingUsers.js‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import React from 'react';
2+
import './attendingUsers.css';
3+
import {
4+
MDBCol,
5+
MDBContainer,
6+
MDBRow,
7+
MDBCard,
8+
MDBCardText,
9+
MDBCardBody,
10+
MDBCardImage,
11+
MDBBtn,
12+
MDBTypography,
13+
MDBIcon
14+
} from 'mdb-react-ui-kit';
15+
16+
export default function AttendingUsers() {
17+
return (
18+
<section className="vh-100" style={{ backgroundColor: '#5f59f7' }}>
19+
<MDBContainer className="py-5 h-100">
20+
<MDBRow className="justify-content-center align-items-center h-100">
21+
<MDBCol xl="10">
22+
<MDBCard className="mb-5" style={{ borderRadius: '15px' }}>
23+
<MDBCardBody className="p-4">
24+
<MDBTypography tag='h3'>Program Title</MDBTypography>
25+
<MDBCardText className="small">
26+
<MDBIcon far icon="star" size="lg" />
27+
<span className="mx-2">|</span> Created by <strong>MDBootstrap</strong> on 11 April , 2021
28+
</MDBCardText>
29+
<hr className="my-4" />
30+
<div className="d-flex justify-content-start align-items-center">
31+
<MDBCardText className="text-uppercase mb-0">
32+
<MDBIcon fas icon="cog me-2" /> <span className="text-muted small">settings</span>
33+
</MDBCardText>
34+
<MDBCardText className="text-uppercase mb-0">
35+
<MDBIcon fas icon="link ms-4 me-2" /> <span className="text-muted small">program link</span>
36+
</MDBCardText>
37+
<MDBCardText className="text-uppercase mb-0">
38+
<MDBIcon fas icon="ellipsis-h ms-4 me-2" /> <span className="text-muted small">program link</span> <span className="ms-3 me-4">|</span>
39+
</MDBCardText>
40+
<a href="#!">
41+
<MDBCardImage
42+
width="35"
43+
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-2.webp"
44+
alt="avatar"
45+
className="rounded-circle me-3"
46+
fluid />
47+
</a>
48+
<MDBBtn outline color="dark" floating size="sm">
49+
<MDBIcon fas icon="plus" />
50+
</MDBBtn>
51+
</div>
52+
</MDBCardBody>
53+
</MDBCard>
54+
55+
<MDBCard className="mb-5" style={{ borderRadius: '15px' }}>
56+
<MDBCardBody className="p-4">
57+
<MDBTypography tag='h3'>Company Culture</MDBTypography>
58+
<MDBCardText className="small">
59+
<MDBIcon fas icon="star text-warning" size="lg" />
60+
<span className="mx-2">|</span> Public <span className="mx-2">|</span> Updated by <strong>MDBootstrap</strong> on 11 April , 2021
61+
</MDBCardText>
62+
<hr className="my-4" />
63+
<div className="d-flex justify-content-start align-items-center">
64+
<MDBCardText className="text-uppercase mb-0">
65+
<MDBIcon fas icon="cog me-2" /> <span className="text-muted small">settings</span>
66+
</MDBCardText>
67+
<MDBCardText className="text-uppercase mb-0">
68+
<MDBIcon fas icon="link ms-4 me-2" /> <span className="text-muted small">program link</span>
69+
</MDBCardText>
70+
<MDBCardText className="text-uppercase mb-0">
71+
<MDBIcon fas icon="ellipsis-h ms-4 me-2" /> <span className="text-muted small">program link</span> <span className="ms-3 me-4">|</span>
72+
</MDBCardText>
73+
<a href="#!">
74+
<MDBCardImage width="35" src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-2.webp" alt="avatar" className="rounded-circle me-1" fluid />
75+
<MDBCardImage width="35" src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-3.webp" alt="avatar" className="rounded-circle me-1" fluid />
76+
<MDBCardImage width="35" src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-4.webp" alt="avatar" className="rounded-circle me-1" fluid />
77+
<MDBCardImage width="35" src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-5.webp" alt="avatar" className="rounded-circle me-3" fluid />
78+
</a>
79+
<MDBBtn outline color="dark" floating size="sm">
80+
<MDBIcon fas icon="plus" />
81+
</MDBBtn>
82+
</div>
83+
</MDBCardBody>
84+
</MDBCard>
85+
</MDBCol>
86+
</MDBRow>
87+
</MDBContainer>
88+
</section>
89+
);
90+
}

‎src/attendingUsers/attendingUsers.css‎

Whitespace-only changes.

‎src/editButton/EditButton.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import React from 'react';
2+
import './editButton.css';
3+
import { MDBCol, MDBContainer, MDBRow, MDBCard, MDBCardText, MDBCardBody, MDBCardImage, MDBBtn, MDBTypography } from 'mdb-react-ui-kit';
4+
5+
export default function EditButton() {
6+
return (
7+
<div className="gradient-custom-2" style={{ backgroundColor: '#9de2ff' }}>
8+
<MDBContainer className="py-5 h-100">
9+
<MDBRow className="justify-content-center align-items-center h-100">
10+
<MDBCol lg="9" xl="7">
11+
<MDBCard>
12+
<div className="rounded-top text-white d-flex flex-row" style={{ backgroundColor: '#000', height: '200px' }}>
13+
<div className="ms-4 mt-5 d-flex flex-column" style={{ width: '150px' }}>
14+
<MDBCardImage src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-profiles/avatar-1.webp"
15+
alt="Generic placeholder image" className="mt-4 mb-2 img-thumbnail" fluid style={{ width: '150px', zIndex: '1' }} />
16+
<MDBBtn outline color="dark" style={{height: '36px'}}>
17+
Edit profile
18+
</MDBBtn>
19+
</div>
20+
<div className="ms-3" style={{ marginTop: '130px' }}>
21+
<MDBTypography tag="h5">Andy Horwitz</MDBTypography>
22+
<MDBCardText>New York</MDBCardText>
23+
</div>
24+
</div>
25+
<div className="p-4 text-black" style={{ backgroundColor: '#f8f9fa' }}>
26+
<div className="d-flex justify-content-end text-center py-1">
27+
<div>
28+
<MDBCardText className="mb-1 h5">253</MDBCardText>
29+
<MDBCardText className="small text-muted mb-0">Photos</MDBCardText>
30+
</div>
31+
<div className="px-3">
32+
<MDBCardText className="mb-1 h5">1026</MDBCardText>
33+
<MDBCardText className="small text-muted mb-0">Followers</MDBCardText>
34+
</div>
35+
<div>
36+
<MDBCardText className="mb-1 h5">478</MDBCardText>
37+
<MDBCardText className="small text-muted mb-0">Following</MDBCardText>
38+
</div>
39+
</div>
40+
</div>
41+
<MDBCardBody className="text-black p-4">
42+
<div className="mb-5">
43+
<p className="lead fw-normal mb-1">About</p>
44+
<div className="p-4" style={{ backgroundColor: '#f8f9fa' }}>
45+
<MDBCardText className="font-italic mb-1">Web Developer</MDBCardText>
46+
<MDBCardText className="font-italic mb-1">Lives in New York</MDBCardText>
47+
<MDBCardText className="font-italic mb-0">Photographer</MDBCardText>
48+
</div>
49+
</div>
50+
<div className="d-flex justify-content-between align-items-center mb-4">
51+
<MDBCardText className="lead fw-normal mb-0">Recent photos</MDBCardText>
52+
<MDBCardText className="mb-0"><a href="#!" className="text-muted">Show all</a></MDBCardText>
53+
</div>
54+
<MDBRow>
55+
<MDBCol className="mb-2">
56+
<MDBCardImage src="https://mdbcdn.b-cdn.net/img/Photos/Lightbox/Original/img%20(112).webp"
57+
alt="image 1" className="w-100 rounded-3" />
58+
</MDBCol>
59+
<MDBCol className="mb-2">
60+
<MDBCardImage src="https://mdbcdn.b-cdn.net/img/Photos/Lightbox/Original/img%20(107).webp"
61+
alt="image 1" className="w-100 rounded-3" />
62+
</MDBCol>
63+
</MDBRow>
64+
<MDBRow className="g-2">
65+
<MDBCol className="mb-2">
66+
<MDBCardImage src="https://mdbcdn.b-cdn.net/img/Photos/Lightbox/Original/img%20(108).webp"
67+
alt="image 1" className="w-100 rounded-3" />
68+
</MDBCol>
69+
<MDBCol className="mb-2">
70+
<MDBCardImage src="https://mdbcdn.b-cdn.net/img/Photos/Lightbox/Original/img%20(114).webp"
71+
alt="image 1" className="w-100 rounded-3" />
72+
</MDBCol>
73+
</MDBRow>
74+
</MDBCardBody>
75+
</MDBCard>
76+
</MDBCol>
77+
</MDBRow>
78+
</MDBContainer>
79+
</div>
80+
);
81+
}

‎src/editButton/editButton.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.gradient-custom-2 {
2+
/* fallback for old browsers */
3+
background: #fbc2eb;
4+
5+
/* Chrome 10-25, Safari 5.1-6 */
6+
background: -webkit-linear-gradient(to right, rgba(251, 194, 235, 1), rgba(166, 193, 238, 1));
7+
8+
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
9+
background: linear-gradient(to right, rgba(251, 194, 235, 1), rgba(166, 193, 238, 1))
10+
}

‎src/index.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom';
88
import App from './App';
99
import ECommerce from './ecommerce/ECommerce';
1010
import UserProfile from './userProfile/UserProfile';
11+
import AttendingUsers from './attendingUsers/AttendingUsers';
12+
import PersonalProfile from './personalProfile/PersonalProfile';
13+
import EditButton from './editButton/EditButton';
14+
import ProfileStatistics from './profileStatistics/ProfileStatistics';
1115

1216
const container = document.getElementById("root");
1317
const root = createRoot(container);
@@ -20,6 +24,10 @@ root.render(
2024
<Route path="/basic" element={<Basic />} />
2125
<Route path="/ecommerce" element={<ECommerce />} />
2226
<Route path="/user-profile" element={<UserProfile />} />
27+
<Route path="/attending-users" element={<AttendingUsers />} />
28+
<Route path="/personal-profile" element={<PersonalProfile />} />
29+
<Route path="/edit-button" element={<EditButton />} />
30+
<Route path="/profile-statistics" element={<ProfileStatistics />} />
2331
</Routes>
2432
</BrowserRouter>
2533
</React.StrictMode>

‎src/personalProfile/PersonalProfile.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React from 'react';
2+
import './personalProfile.css';
3+
import { MDBCol, MDBContainer, MDBRow, MDBCard, MDBCardText, MDBCardBody, MDBCardImage, MDBTypography, MDBIcon } from 'mdb-react-ui-kit';
4+
5+
export default function PersonalProfile() {
6+
return (
7+
<section className="vh-100" style={{ backgroundColor: '#f4f5f7' }}>
8+
<MDBContainer className="py-5 h-100">
9+
<MDBRow className="justify-content-center align-items-center h-100">
10+
<MDBCol lg="6" className="mb-4 mb-lg-0">
11+
<MDBCard className="mb-3" style={{ borderRadius: '.5rem' }}>
12+
<MDBRow className="g-0">
13+
<MDBCol md="4" className="gradient-custom text-center text-white"
14+
style={{ borderTopLeftRadius: '.5rem', borderBottomLeftRadius: '.5rem' }}>
15+
<MDBCardImage src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
16+
alt="Avatar" className="my-5" style={{ width: '80px' }} fluid />
17+
<MDBTypography tag="h5">Marie Horwitz</MDBTypography>
18+
<MDBCardText>Web Designer</MDBCardText>
19+
<MDBIcon far icon="edit mb-5" />
20+
</MDBCol>
21+
<MDBCol md="8">
22+
<MDBCardBody className="p-4">
23+
<MDBTypography tag="h6">Information</MDBTypography>
24+
<hr className="mt-0 mb-4" />
25+
<MDBRow className="pt-1">
26+
<MDBCol size="6" className="mb-3">
27+
<MDBTypography tag="h6">Email</MDBTypography>
28+
<MDBCardText className="text-muted">[email protected]</MDBCardText>
29+
</MDBCol>
30+
<MDBCol size="6" className="mb-3">
31+
<MDBTypography tag="h6">Phone</MDBTypography>
32+
<MDBCardText className="text-muted">123 456 789</MDBCardText>
33+
</MDBCol>
34+
</MDBRow>
35+
36+
<MDBTypography tag="h6">Information</MDBTypography>
37+
<hr className="mt-0 mb-4" />
38+
<MDBRow className="pt-1">
39+
<MDBCol size="6" className="mb-3">
40+
<MDBTypography tag="h6">Email</MDBTypography>
41+
<MDBCardText className="text-muted">[email protected]</MDBCardText>
42+
</MDBCol>
43+
<MDBCol size="6" className="mb-3">
44+
<MDBTypography tag="h6">Phone</MDBTypography>
45+
<MDBCardText className="text-muted">123 456 789</MDBCardText>
46+
</MDBCol>
47+
</MDBRow>
48+
49+
<div className="d-flex justify-content-start">
50+
<a href="#!"><MDBIcon fab icon="facebook me-3" size="lg" /></a>
51+
<a href="#!"><MDBIcon fab icon="twitter me-3" size="lg" /></a>
52+
<a href="#!"><MDBIcon fab icon="instagram me-3" size="lg" /></a>
53+
</div>
54+
</MDBCardBody>
55+
</MDBCol>
56+
</MDBRow>
57+
</MDBCard>
58+
</MDBCol>
59+
</MDBRow>
60+
</MDBContainer>
61+
</section>
62+
);
63+
}

‎src/personalProfile/personalProfile.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.gradient-custom {
2+
/* fallback for old browsers */
3+
background: #f6d365;
4+
5+
/* Chrome 10-25, Safari 5.1-6 */
6+
background: -webkit-linear-gradient(to right bottom, rgba(246, 211, 101, 1), rgba(253, 160, 133, 1));
7+
8+
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
9+
background: linear-gradient(to right bottom, rgba(246, 211, 101, 1), rgba(253, 160, 133, 1))
10+
}

‎src/profileStatistics/ProfileStatistics.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from 'react';
2+
import './profileStatistics.css';
3+
import { MDBCol, MDBContainer, MDBRow, MDBCard, MDBCardText, MDBCardBody, MDBCardImage, MDBBtn, MDBTypography, MDBIcon } from 'mdb-react-ui-kit';
4+
5+
export default function ProfileStatistics() {
6+
return (
7+
<div className="vh-100" style={{ backgroundColor: '#eee' }}>
8+
<MDBContainer className="container py-5 h-100">
9+
<MDBRow className="justify-content-center align-items-center h-100">
10+
<MDBCol md="12" xl="4">
11+
<MDBCard style={{ borderRadius: '15px' }}>
12+
<MDBCardBody className="text-center">
13+
<div className="mt-3 mb-4">
14+
<MDBCardImage src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
15+
className="rounded-circle" fluid style={{ width: '100px' }} />
16+
</div>
17+
<MDBTypography tag="h4">Julie L. Arsenault</MDBTypography>
18+
<MDBCardText className="text-muted mb-4">
19+
@Programmer <span className="mx-2">|</span> <a href="#!">mdbootstrap.com</a>
20+
</MDBCardText>
21+
<div class="mb-4 pb-2">
22+
<MDBBtn outline floating>
23+
<MDBIcon fab icon="facebook" size="lg" />
24+
</MDBBtn>
25+
<MDBBtn outline floating className="mx-1">
26+
<MDBIcon fab icon="twitter" size="lg" />
27+
</MDBBtn>
28+
<MDBBtn outline floating>
29+
<MDBIcon fab icon="skype" size="lg" />
30+
</MDBBtn>
31+
</div>
32+
<MDBBtn rounded size="lg">
33+
Message now
34+
</MDBBtn>
35+
<div className="d-flex justify-content-between text-center mt-5 mb-2">
36+
<div>
37+
<MDBCardText className="mb-1 h5">8471</MDBCardText>
38+
<MDBCardText className="small text-muted mb-0">Wallets Balance</MDBCardText>
39+
</div>
40+
<div className="px-3">
41+
<MDBCardText className="mb-1 h5">8512</MDBCardText>
42+
<MDBCardText className="small text-muted mb-0">Followers</MDBCardText>
43+
</div>
44+
<div>
45+
<MDBCardText className="mb-1 h5">4751</MDBCardText>
46+
<MDBCardText className="small text-muted mb-0">Total Transactions</MDBCardText>
47+
</div>
48+
</div>
49+
</MDBCardBody>
50+
</MDBCard>
51+
</MDBCol>
52+
</MDBRow>
53+
</MDBContainer>
54+
</div>
55+
);
56+
}

‎src/profileStatistics/profileStatistics.css‎

Whitespace-only changes.

0 commit comments

Comments
 (0)