diff --git a/demo/DemoApp.jsx b/demo/DemoApp.jsx index 57adbc8..d8f4daa 100644 --- a/demo/DemoApp.jsx +++ b/demo/DemoApp.jsx @@ -1,12 +1,14 @@ import React from 'react'; import { Route, BrowserRouter, Switch } from 'react-router-dom'; -import DemoDashboard from './pages/DemoDashboard'; +import DemoDashboard from './pages/dashboard/DemoDashboard'; import DemoHeader from './layout/DemoHeader'; import DemoSidebar from './layout/DemoSidebar'; import ContentWrapper from './layout/ContentWrapper'; import MainFooter from './layout/MainFooter'; import Demo404 from './pages/Demo404'; +import './data/IconLib'; + const getBasename = () => `/${process.env.PUBLIC_URL.split('/').pop()}`; export default function DemoApp() { diff --git a/demo/data/IconLib.js b/demo/data/IconLib.js new file mode 100644 index 0000000..9ce36f4 --- /dev/null +++ b/demo/data/IconLib.js @@ -0,0 +1,13 @@ +import { library } from '@fortawesome/fontawesome-svg-core'; +import { + faChartBar, + faChartPie, + faCog, + faShoppingBasket, + faShoppingCart, + faThumbsUp, + faUserPlus, + faUsers, +} from '@fortawesome/free-solid-svg-icons'; + +library.add(faCog, faThumbsUp, faShoppingCart, faUsers, faUserPlus, faChartPie, faShoppingBasket, faChartBar); diff --git a/demo/pages/DemoDashboard.jsx b/demo/pages/DemoDashboard.jsx deleted file mode 100644 index 504daa1..0000000 --- a/demo/pages/DemoDashboard.jsx +++ /dev/null @@ -1,421 +0,0 @@ -import { faChartBar, faComment, faHeart } from '@fortawesome/free-regular-svg-icons'; -import { - faArrowUp, - faBars, - faChartPie, - faCloudDownloadAlt, - faCog, - faComments, - faDownload, - faMinus, - faRedo, - faShoppingBasket, - faShoppingCart, - faTag, - faThumbsUp, - faTimes, - faUserPlus, - faUsers, -} from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import React from 'react'; -import { - Badge, - Button, - Card, - CardBody, - CardFooter, - CardHeader, - CardTitle, - Col, - Form, - Input, - InputGroup, - InputGroupAddon, - Row, - Table, -} from 'reactstrap'; -import LteContent from '../../src/components/LteContent'; -import LteContentHeader from '../../src/components/LteContentHeader'; -import LteInfoBox from '../../src/components/LteInfoBox'; -import LteSmallBox from '../../src/components/LteSmallBox'; -import { user1, user2, user3, user4, user5, user6, user7, user8 } from '../data/images'; -import LteDirectChatMsg from '../../src/components/directchat/LteDirectChatMsg'; -import LteDirectChatMessages from '../../src/components/directchat/LteDirectChatMessages'; -import LteDirectChat from '../../src/components/directchat/LteDirectChat'; -import LteDirectChatContacts from '../../src/components/directchat/LteDirectChatContacts'; -import LteContactsList from '../../src/components/directchat/LteContactsList'; -import LteContactsListItem from '../../src/components/directchat/LteContactsListItem'; -import LteCardTools from '../../src/components/card/LteCardTools'; -import LteUsersList from '../../src/components/userslist/LteUsersList'; -import LteUsersListItem from '../../src/components/userslist/LteUsersListItem'; - -export default function DemoDashboard() { - return ( - <> - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - Latest Orders - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Order IDItemStatusPopularity
OR9842Call of Duty IV - - Shipped - - -
- 90,80,90,-70,61,-83,63 -
-
OR1848Samsung Smart TV - - Pending - - -
- 90,80,-90,70,61,-83,68 -
-
OR7429iPhone 6 Plus - - Delivered - - -
- 90,-80,90,70,-61,83,63 -
-
OR7429Samsung Smart TV - - Processing - - -
- 90,80,-90,70,-61,83,63 -
-
OR1848Samsung Smart TV - - Pending - - -
- 90,80,-90,70,61,-83,68 -
-
OR7429iPhone 6 Plus - - Delivered - - -
- 90,-80,90,70,-61,83,63 -
-
OR9842Call of Duty IV - - Shipped - - -
- 90,80,90,-70,61,-83,63 -
-
- - - - - - - - Direct Chat - - - 3 - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - -
- - - - - - - Latest Members - - 8 New Members - - - - - - - - - - - - - - - - - - - - - - - - - - - - Online Store Overview - - - - - - -
-

- -

-

- - - 12% - - CONVERSION RATE -

-
-
-

- -

-

- - 0.8% - - SALES RATE -

-
-
-

- -

-

- - 1% - - REGISTRATION RATE -

-
- - - - - - - ); -} diff --git a/demo/pages/dashboard/DemoDashboard.jsx b/demo/pages/dashboard/DemoDashboard.jsx new file mode 100644 index 0000000..a8343eb --- /dev/null +++ b/demo/pages/dashboard/DemoDashboard.jsx @@ -0,0 +1,134 @@ +import { faComment, faHeart } from '@fortawesome/free-regular-svg-icons'; +import { + faArrowUp, + faBars, + faCloudDownloadAlt, + faDownload, + faMinus, + faRedo, + faShoppingCart, + faTag, + faTimes, + faUsers, +} from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import React from 'react'; +import { Badge, Button, Card, CardBody, CardHeader, CardTitle, Col, Row } from 'reactstrap'; +import LteContent from '../../../src/components/LteContent'; +import LteContentHeader from '../../../src/components/LteContentHeader'; +import LteInfoBox from '../../../src/components/LteInfoBox'; +import { user1, user2, user3, user4, user5, user6, user7, user8 } from '../../data/images'; +import LteCardTools from '../../../src/components/card/LteCardTools'; +import LteUsersList from '../../../src/components/userslist/LteUsersList'; +import LteUsersListItem from '../../../src/components/userslist/LteUsersListItem'; +import InfoboxTop from './components/InfoboxTop'; +import Smallbox from './components/Smallbox'; +import LatestOrder from './components/LatestOrder'; +import DirectChat from './components/DirectChat'; + +export default function DemoDashboard() { + return ( + <> + + + + + + + + + + + + + + + + + Latest Members + + 8 New Members + + + + + + + + + + + + + + + + + + + + + + + + + + + + Online Store Overview + + + + + + +
+

+ +

+

+ + + 12% + + CONVERSION RATE +

+
+
+

+ +

+

+ + 0.8% + + SALES RATE +

+
+
+

+ +

+

+ + 1% + + REGISTRATION RATE +

+
+ + + + + + + ); +} diff --git a/demo/pages/dashboard/components/DirectChat.jsx b/demo/pages/dashboard/components/DirectChat.jsx new file mode 100644 index 0000000..5c221f3 --- /dev/null +++ b/demo/pages/dashboard/components/DirectChat.jsx @@ -0,0 +1,153 @@ +import React from 'react'; +import { + Badge, + Button, + CardBody, + CardFooter, + CardHeader, + CardTitle, + Form, + Input, + InputGroup, + InputGroupAddon, +} from 'reactstrap'; +import { faComments, faMinus, faTimes } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import LteCardTools from '../../../../src/components/card/LteCardTools'; +import LteContactsListItem from '../../../../src/components/directchat/LteContactsListItem'; +import LteDirectChatMsg from '../../../../src/components/directchat/LteDirectChatMsg'; +import LteDirectChat from '../../../../src/components/directchat/LteDirectChat'; +import LteDirectChatMessages from '../../../../src/components/directchat/LteDirectChatMessages'; +import LteDirectChatContacts from '../../../../src/components/directchat/LteDirectChatContacts'; +import LteContactsList from '../../../../src/components/directchat/LteContactsList'; +import { user1, user3, user5, user6, user7, user8 } from '../../../data/images'; + +const messageData = [ + { + name: 'Alexander Pierce', + date: '23 Jan 2:00 pm', + image: user1, + message: "Is this template really for free? That's unbelievable!", + }, + { + name: 'Sarah Bullock', + date: '23 Jan 2:05 pm', + image: user3, + message: 'You better believe it!', + }, + { + name: 'Alexander Pierce', + date: '23 Jan 5:37 pm', + image: user1, + message: 'Working with AdminLTE on a great new app! Wanna join?', + }, + { + name: 'Sarah Bullock', + date: '23 Jan 6:10 pm', + image: user3, + message: 'I would love to.', + }, +]; + +const contactData = [ + { + href: '/contacts', + image: user1, + name: 'Count Dracula', + date: '2/28/2015', + message: 'How have you been? I was...', + }, + { + href: '/contacts', + image: user7, + name: 'Sarah Doe', + date: '2/23/2015', + message: 'I will be waiting for...', + }, + { + href: '/contacts', + image: user3, + name: 'Nadia Jolie', + date: '2/20/2015', + message: "I'll call you back at...", + }, + { + href: '/contacts', + image: user5, + name: 'Nora S. Vans', + date: '2/10/2015', + message: 'Where is your new...', + }, + { + href: '/contacts', + image: user6, + name: 'John K.', + date: '1/27/2015', + message: 'Can I take a look at...', + }, + { + href: '/contacts', + image: user8, + name: 'Kenneth M.', + date: '1/4/2015', + message: 'Never mind I found...', + }, +]; + +const MessageItem = ({ data }) => { + return data.map(({ name, date, image, message }) => { + return ; + }); +}; + +const ContactItem = ({ data }) => { + return data.map(({ href, image, name, date, message }) => { + return ; + }); +}; + +const DirectChat = () => { + return ( + + + Direct Chat + + + 3 + + + + + + + + + + + + + + + + + +
+ + + + + + +
+ + + ); +}; + +export default DirectChat; diff --git a/demo/pages/dashboard/components/InfoboxTop.jsx b/demo/pages/dashboard/components/InfoboxTop.jsx new file mode 100644 index 0000000..bdefde5 --- /dev/null +++ b/demo/pages/dashboard/components/InfoboxTop.jsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { Row, Col } from 'reactstrap'; +import LteInfoBox from '../../../../src/components/LteInfoBox'; + +const data = [ + { + icon: 'cog', + text: 'CPU Traffic', + number: '10%', + color: 'info', + }, + { + icon: 'thumbs-up', + text: 'Likes', + number: '41,410', + color: 'danger', + }, + { + icon: 'shopping-cart', + text: 'Sales', + number: '760', + color: 'success', + }, + { + icon: 'users', + text: 'New Members', + number: '2,000', + color: 'warning', + }, +]; + +const Item = ({ infoData }) => { + return infoData.map(({ icon, text, number, color }) => { + return ( + + + + ); + }); +}; + +const InfoboxTop = () => { + return ( + + + + ); +}; + +export default InfoboxTop; diff --git a/demo/pages/dashboard/components/LatestOrder.jsx b/demo/pages/dashboard/components/LatestOrder.jsx new file mode 100644 index 0000000..e0c1d6a --- /dev/null +++ b/demo/pages/dashboard/components/LatestOrder.jsx @@ -0,0 +1,113 @@ +import React from 'react'; +import { faMinus, faTimes } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Badge, Button, Card, CardBody, CardHeader, CardTitle, Table } from 'reactstrap'; +import LteCardTools from '../../../../src/components/card/LteCardTools'; + +const mockData = [ + { + orderID: 'OR9842', + item: 'Call of Duty IV', + status: 'Shipped', + statusColor: 'success', + popularity: '90,80,90,-70,61,-83,63', + }, + { + orderID: 'OR1848', + item: 'Samsung Smart TV', + status: 'Pending', + statusColor: 'warning', + popularity: '90,80,-90,70,61,-83,68', + }, + { + orderID: 'OR7429', + item: 'iPhone 6 Plus', + status: 'Delivered', + statusColor: 'danger', + popularity: '90,-80,90,70,-61,83,63', + }, + { + orderID: 'OR7429', + item: 'Samsung Smart TV', + status: 'Processing', + statusColor: 'info', + popularity: '90,80,-90,70,-61,83,63', + }, + { + orderID: 'OR1848', + item: 'Samsung Smart TV', + status: 'Pending', + statusColor: 'warning', + popularity: '90,80,-90,70,61,-83,68', + }, + { + orderID: 'OR7429', + item: 'iPhone 6 Plus', + status: 'Delivered', + statusColor: 'danger', + popularity: '90,-80,90,70,-61,83,63', + }, + { + orderID: 'OR9842', + item: 'Call of Duty IV', + status: 'Shipped', + statusColor: 'success', + popularity: '90,80,90,-70,61,-83,63', + }, +]; + +const Item = ({ data }) => { + return data.map(({ orderID, item, status, statusColor, popularity }) => { + return ( + + {orderID} + {item} + + + {status} + + + +
+ {popularity} +
+ + + ); + }); +}; + +const LatestOrder = () => { + return ( + + + Latest Orders + + + + + + + + + + + + + + + + + + +
Order IDItemStatusPopularity
+ + + ); +}; + +export default LatestOrder; diff --git a/demo/pages/dashboard/components/Smallbox.jsx b/demo/pages/dashboard/components/Smallbox.jsx new file mode 100644 index 0000000..0b0d149 --- /dev/null +++ b/demo/pages/dashboard/components/Smallbox.jsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { Row, Col } from 'reactstrap'; +import LteSmallBox from '../../../../src/components/LteSmallBox'; + +const mockData = [ + { + title: '150', + message: 'New Orders', + icon: 'shopping-basket', + color: 'info', + }, + { + title: '53%', + message: 'Bounce Rate', + icon: 'chart-bar', + color: 'success', + }, + { + title: '44', + message: 'User Registrations', + icon: 'user-plus', + color: 'warning', + }, + { + title: '65', + message: 'Unique Visitors', + icon: 'chart-pie', + color: 'danger', + }, +]; + +const Item = ({ data }) => { + return data.map(({ title, message, icon, color }) => { + return ( + + + + ); + }); +}; + +const Smallbox = () => { + return ( + + + + ); +}; + +export default Smallbox;