-
Notifications
You must be signed in to change notification settings - Fork 135
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Setup routing and layout templates
- Loading branch information
Jason Healy
committed
Jan 24, 2020
1 parent
31b69a8
commit 19236cd
Showing
20 changed files
with
3,361 additions
and
154 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
35 changes: 35 additions & 0 deletions
35
examples/react-graphql/client/src/components/Panel/Panel.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import React, { useState } from 'react' | ||
| import { Box, Text, Heading } from 'rimble-ui' | ||
|
|
||
| interface PanelProps { | ||
| heading: string | ||
| description?: string | ||
| headerRight?: React.ReactNode | ||
| headerBorder?: number | ||
| } | ||
|
|
||
| const Panel: React.FC<PanelProps> = props => { | ||
| return ( | ||
| <Box borderRadius={1} bg="#222222" flex={1} mb={32}> | ||
| <Box | ||
| p={3} | ||
| borderBottom={props.headerBorder !== undefined ? props.headerBorder : 1} | ||
| borderColor={'#4B4B4B'} | ||
| flexDirection={'row'} | ||
| display={'flex'} | ||
| alignItems={'center'} | ||
| justifyContent={'space-between'} | ||
| height={60} | ||
| > | ||
| <Box> | ||
| <Heading as={'h5'}>{props.heading}</Heading> | ||
| {props.description && <Text small>{props.description}</Text>} | ||
| </Box> | ||
| {props.headerRight && props.headerRight} | ||
| </Box> | ||
| <Box>{props.children}</Box> | ||
| </Box> | ||
| ) | ||
| } | ||
|
|
||
| export default Panel |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import React, { useState } from 'react' | ||
| import { useQuery, useMutation } from '@apollo/react-hooks' | ||
|
|
||
| import { Flex, Box, Text, Heading, Button, Icon, Table, Field, Input } from 'rimble-ui' | ||
| import { Switch, Route, BrowserRouter as Router } from 'react-router-dom' | ||
|
|
||
| import Activity from '../views/Activity/Activity' | ||
| import Explore from '../views/Explore/Explore' | ||
| import IdentityManager from '../views/Identity/IdentitiyManager' | ||
| import IdentityDetail from '../views/Identity/IdentityDetail' | ||
| import Request from '../views/Request/Request' | ||
| import Connections from '../views/Connections/Connections' | ||
| import Issue from '../views/Issue/Issue' | ||
|
|
||
| import Sidebar from './Sidebar' | ||
| import NavigationLeft from './NavigationLeft' | ||
|
|
||
| interface DashboardProps {} | ||
|
|
||
| const Dashboard: React.FC<DashboardProps> = () => { | ||
| const [sidePanelOpen, toggleSidePanel] = useState(true) | ||
|
|
||
| return ( | ||
| <Router> | ||
| <Flex flexDirection={'row'} flex={1}> | ||
| <Sidebar /> | ||
| <NavigationLeft /> | ||
| <Box flex={1} bg="#1C1C1C"> | ||
| <Switch> | ||
| <Route exact path="/"> | ||
| <Activity /> | ||
| </Route> | ||
| <Route path="/explore"> | ||
| <Explore /> | ||
| </Route> | ||
| <Route path="/issue"> | ||
| <Issue /> | ||
| </Route> | ||
| <Route path="/request"> | ||
| <Request /> | ||
| </Route> | ||
| <Route path="/identities"> | ||
| <IdentityManager /> | ||
| </Route> | ||
| <Route path="/connections"> | ||
| <Connections /> | ||
| </Route> | ||
| </Switch> | ||
| </Box> | ||
|
|
||
| <Switch> | ||
| <Route path="/identities/:id"> | ||
| <IdentityDetail /> | ||
| </Route> | ||
| </Switch> | ||
| </Flex> | ||
| </Router> | ||
| ) | ||
| } | ||
|
|
||
| export default Dashboard |
38 changes: 38 additions & 0 deletions
38
examples/react-graphql/client/src/layout/NavigationLeft.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import React from 'react' | ||
| import { Box, Text, Heading } from 'rimble-ui' | ||
| import { NavLink } from 'react-router-dom' | ||
|
|
||
| const Component = () => { | ||
| return ( | ||
| <Box p={3} width={220} bg="#28292B" borderRight={1} borderColor={'#4B4B4B'}> | ||
| <Box mb={32}> | ||
| <Heading as={'h3'}>Daf Dashboard</Heading> | ||
| <Text>Description</Text> | ||
| </Box> | ||
| <ul className={'left-nav-list'}> | ||
| <li className={'left-nav-item'}> | ||
| <NavLink exact to="/"> | ||
| Activity | ||
| </NavLink> | ||
| </li> | ||
| <li className={'left-nav-item'}> | ||
| <NavLink to="/explore">Explore</NavLink> | ||
| </li> | ||
| <li className={'left-nav-item'}> | ||
| <NavLink to="/issue">Issue Credential</NavLink> | ||
| </li> | ||
| <li className={'left-nav-item'}> | ||
| <NavLink to="/request">Request</NavLink> | ||
| </li> | ||
| <li className={'left-nav-item'}> | ||
| <NavLink to="/identities">Identities</NavLink> | ||
| </li> | ||
| <li className={'left-nav-item'}> | ||
| <NavLink to="/connections">Connections</NavLink> | ||
| </li> | ||
| </ul> | ||
| </Box> | ||
| ) | ||
| } | ||
|
|
||
| export default Component |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import React from 'react' | ||
| import { Box, Heading } from 'rimble-ui' | ||
|
|
||
| const Component = (props: any) => { | ||
| return ( | ||
| <> | ||
| <Box | ||
| p={3} | ||
| bg="#1C1C1C" | ||
| borderBottom={1} | ||
| borderColor={'#4B4B4B'} | ||
| flexDirection={'row'} | ||
| display={'flex'} | ||
| justifyContent={'space-between'} | ||
| > | ||
| <Heading as={'h4'}>{props.title}</Heading> | ||
| </Box> | ||
| <Box p={3} flex={1} pb={64} className={'scroll-container'}> | ||
| {props.children} | ||
| </Box> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default Component |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import React from 'react' | ||
| import { Flex, Box, Text, Heading, Button, Icon, Table, Field, Input } from 'rimble-ui' | ||
| import { Switch, Route, useParams } from 'react-router-dom' | ||
| import IdentityDetail from '../views/Identity/IdentityDetail' | ||
|
|
||
| const Component = () => { | ||
| return <IdentityDetail /> | ||
| } | ||
|
|
||
| export default Component |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import React from 'react' | ||
| import { Box } from 'rimble-ui' | ||
|
|
||
| const Component = () => { | ||
| return ( | ||
| <Box | ||
| p={3} | ||
| bg="#1C1C1C" | ||
| alignItems={'center'} | ||
| justifyContent={'space-between'} | ||
| display={'flex'} | ||
| flexDirection={'column'} | ||
| > | ||
| <Box borderRadius={25} width={50} height={50} bg="#FFFFFF" p={3}></Box> | ||
| <Box borderRadius={5} width={45} height={45} bg="#FFFFFF" p={3}></Box> | ||
| </Box> | ||
| ) | ||
| } | ||
|
|
||
| export default Component |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 12 additions & 0 deletions
12
examples/react-graphql/client/src/views/Activity/Activity.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import React from 'react' | ||
| import { Flex, Box, Text, Heading, Button, Icon, Table, Field, Input } from 'rimble-ui' | ||
| import Panel from '../../components/Panel/Panel' | ||
| import Page from '../../layout/Page' | ||
|
|
||
| interface Activity {} | ||
|
|
||
| const Activity: React.FC<Activity> = () => { | ||
| return <Page title={'Activity'}></Page> | ||
| } | ||
|
|
||
| export default Activity |
9 changes: 9 additions & 0 deletions
9
examples/react-graphql/client/src/views/Connections/Connections.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import React from 'react' | ||
| import { Box, Heading } from 'rimble-ui' | ||
| import Page from '../../layout/Page' | ||
|
|
||
| const Component = () => { | ||
| return <Page title={'Connections'}></Page> | ||
| } | ||
|
|
||
| export default Component |
Oops, something went wrong.