terra-consumer-layout
Version:
A re-usable layout component that puts together our navigation
334 lines (327 loc) • 7.78 kB
JSX
import React from 'react';
import _ from 'lodash'; // eslint-disable-line import/no-extraneous-dependencies
import { BrowserRouter, Route } from 'react-router-dom';
import IconPerson from 'terra-icon/lib/icon/IconPerson';
import IconOutlineQuestionMark from 'terra-consumer-icon/lib/icon/IconOutlineQuestionMark';
import Layout from '../src/Layout';
const data = {
nav: {
navItems: [
{
// any link that doesn't use react router link is external
isExternal: true,
url: 'localhost:8080',
text: 'Home',
},
{
url: '/',
text: 'Dashboard',
icon: <IconPerson />,
},
{
text: 'Messaging',
badgeValue: '12',
icon: <IconPerson />,
subItems: [
{
isExternal: true,
url: '#inbox',
text: 'Inbox',
badgeValue: '2',
},
{
isExternal: true,
url: '#sent',
text: 'Sent',
badgeValue: '2',
},
{
isExternal: true,
url: '#inbox',
text: 'An Active Link',
isActive: false,
badgeValue: 1,
},
{
isExternal: true,
url: '#sent',
text: 'Sent',
badgeValue: 1,
},
{
isExternal: true,
url: '#sent',
text: 'Sent',
badgeValue: 1,
},
{
isExternal: true,
url: '#inbox',
text: 'Inbox',
badgeValue: 1,
},
{
isExternal: true,
url: '#sent',
text: 'Sent',
badgeValue: 1,
},
{
isExternal: true,
url: '#inbox',
text: 'An Active Link',
isActive: true,
badgeValue: 1,
},
{
isExternal: true,
url: '#inbox',
text: 'Inbox',
badgeValue: 1,
},
{
isExternal: true,
url: '#sent',
text: 'Sent',
badgeValue: 1,
},
{
isExternal: true,
url: '#inbox',
text: 'Inbox',
badgeValue: 1,
},
{
isExternal: true,
url: '#sent',
text: 'Sent',
badgeValue: 1,
},
{
isExternal: true,
url: '#inbox',
text: 'An Active Link',
isActive: false,
badgeValue: 1,
},
{
isExternal: true,
url: '#sent',
text: 'Sent',
badgeValue: 1,
},
],
},
{
text: 'Health Record',
badgeValue: 0,
icon: <IconPerson />,
subItems: [
{
isExternal: true,
url: '#health',
text: 'Health',
icon: <IconPerson />,
},
{
isExternal: true,
url: '#record',
text: 'Record',
icon: <IconPerson />,
},
],
},
{
text: 'Test Data',
subItems: [
{
isExternal: true,
url: '#test',
text: 'Test',
icon: <IconPerson />,
},
{
isExternal: true,
url: '#data',
text: 'Data',
icon: <IconPerson />,
},
],
},
{
text: 'More Tests',
subItems: [
{
isExternal: true,
url: '#more',
text: 'More',
},
{
isExternal: true,
url: '#tests',
text: 'Tests',
},
],
},
],
logo: {
url: 'http://photos.prnewswire.com/prnfull/20140210/DC61972LOGO',
altText: 'Placeholder logo',
isCard: true,
link:
{
url: 'http://localhost:8080/',
isExternal: true,
},
},
profile: {
profileLinks:
[
{
target: '_self',
url: 'http://localhost:8080/',
text: 'Account',
subItems: [],
isExternal: true,
icon: 'icon-cog',
},
{
target: '_self',
url: 'http://localhost:8080/',
text: 'Notifications',
subItems: [],
isExternal: true,
icon: 'icon-message-send',
},
{
target: '_self',
url: 'http://localhost:8080/',
text: 'Patient Information',
subItems: [],
isExternal: true,
icon: 'icon-demographics',
},
{
target: '_self',
url: 'http://localhost:8080/',
text: 'Access Logs',
subItems: [],
isExternal: true,
icon: 'icon-client-access-logs',
},
{
target: '_blank',
url: 'http://localhost:8080/',
text: 'Help',
subItems: [],
isExternal: true,
icon: 'icon-client-question-alt',
},
{
target: '_self',
url: '#',
isExternal: true,
text: 'English (United States)‎',
subItems: [
{
'data-locale': 'ar',
isExternal: true,
url: '#1',
text: '‫\u0627\u0644\u0639\u0631\u0628\u064a\u0651\u0629 ‬',
},
{
'data-locale': 'es',
isExternal: true,
url: '#2',
text: 'Espa\u00f1ol',
},
{
'data-locale': 'en-gb',
isExternal: true,
url: '#3',
text: 'English (United Kingdom)‎',
},
{
'data-locale': 'fr-fr',
isExternal: true,
url: '#4',
text: 'Fran\u00e7ais (France)‎',
},
],
},
],
// comment out userName to see signin
userName: 'Rajasekhara Srinivasulu Laxminarayana Siva Venkata Sai',
signinUrl: 'http://localhost:8080/',
signoutUrl: 'http://localhost:8080/',
},
},
helpItems: [
{
text: 'Technical Questions',
icon: (<IconOutlineQuestionMark />),
children: [{
text: 'Need help using this portal or need to report an issue? Contact the support team at 123-xxx-xxxx',
}],
},
{
text: 'Get Support ID',
icon: (<IconOutlineQuestionMark />),
children: [{
text: 'Need help using this portal or need to report an issue? Contact the support team at 123-xxx-xxxx',
}],
},
{
isExternal: true,
text: 'Link',
url: 'http://localhost:8080/',
icon: (<IconOutlineQuestionMark />),
},
{
isExternal: true,
text: 'Another link',
url: 'http://localhost:8080/',
},
{
text: 'Nav Link',
url: '/test',
},
],
};
const cardStyle = {
background: '#FFF',
marginBottom: '10px',
color: '#000',
padding: '10px',
borderRadius: '5px',
};
const card = (
<div style={cardStyle}>
{
_.times(100, i => <span key={i}>Testing </span>)
}
</div>
);
const content = (
<div>
<Route
exact
path="/"
render={() => (
<div>
{
_.times(5, i => <div key={i}>{card}</div>)
}
</div>
)}
/>
<Route exact path="/test" render={() => <h1>Test Link! Works</h1>} />
</div>
);
export default () => (
<BrowserRouter>
<Layout {...data}>
<div>{content}</div>
</Layout>
</BrowserRouter>
);