diff --git a/src/components/app.js b/src/components/app.js new file mode 100644 index 0000000..8e41931 --- /dev/null +++ b/src/components/app.js @@ -0,0 +1,55 @@ +import React from 'react'; +import MaterialIcon from 'material-icons-react'; +import styled from 'styled-components'; +import selectedTheme from './themeManager'; + +const AppContainer = styled.div` + display: flex; + flex: auto 25%; + padding: 1rem; +`; + +const IconContainer = styled.div` + margin-right: 0.5vh; +`; + +const DetailsContainer = styled.div` + display: flex; + flex-direction: column; +`; + +const AppLink = styled.a` + font-family: Roboto, sans-serif; + flex: 1 0 auto; + color: ${selectedTheme.mainColor}; + font-weight: 500; + text-transform: uppercase; + margin: 0; + text-decoration: none; + font-size: 1rem; + + &:hover { + text-decoration: underline; + } +`; + +const AppDescription = styled.p` + font-family: Roboto, sans-serif; + text-transform: uppercase; + margin: 0; + font-size: 0.65rem; + font-weight: 400; + color: ${selectedTheme.accentColor}; +`; + +export const App = ({ name, icon, url, displayURL }) => ( + + + + + + {name} + {displayURL} + + +); diff --git a/src/components/appList.js b/src/components/appList.js index f937184..3c2c486 100644 --- a/src/components/appList.js +++ b/src/components/appList.js @@ -1,62 +1,16 @@ import React, { useCallback, useEffect, useState } from 'react'; -import MaterialIcon from 'material-icons-react'; -import styled from 'styled-components'; - -import selectedTheme from './themeManager'; +import { App } from './app'; +import { Category } from './category'; import { handleResponse, Headline, - SubHeadline, ListContainer, ItemList, Item, ErrorMessage, } from './elements'; -const IconContainer = styled.div` - margin-right: 0.5vh; -`; - -const DetailsContainer = styled.div` - display: flex; - flex-direction: column; -`; - -const Link = styled.a` - font-family: Roboto, sans-serif; - flex: 1 0 auto; - color: ${selectedTheme.mainColor}; - font-weight: 500; - text-transform: uppercase; - margin: 0; - text-decoration: none; - font-size: 1rem; - - &:hover { - text-decoration: underline; - } -`; - -const Description = styled.p` - font-family: Roboto, sans-serif; - text-transform: uppercase; - margin: 0; - font-size: 0.65rem; - font-weight: 400; - color: ${selectedTheme.accentColor}; -`; - -const CategoryContainer = styled.div` - padding: 1rem 0; -`; - -const App = styled.div` - display: flex; - flex: auto 25%; - padding: 1rem; -`; - const useAppData = () => { const [appData, setAppData] = useState({ apps: [], error: false }); const fetchAppData = useCallback(() => { @@ -86,58 +40,25 @@ const AppList = () => { Applications - {categories && ( - - {categories.map((category, idx) => ( - <> - - {category.name} - - - {category.items.map((app, idx) => ( - - - - - - - - {app.name} - - - {app.displayURL} - - - - - ))} - - - ))} - - )} + {categories && + categories.map((category, idx) => ( + + ))} {error && {error}} {apps.map((app, idx) => ( - - - - - - {app.name} - {app.displayURL} - - + ))} diff --git a/src/components/bookmarkList.js b/src/components/bookmarkList.js index 5b0e67e..df5ca60 100644 --- a/src/components/bookmarkList.js +++ b/src/components/bookmarkList.js @@ -5,20 +5,13 @@ import selectedTheme from './themeManager'; import { handleResponse, Headline, + SubHeadline, ListContainer, ItemList, Item, ErrorMessage, } from './elements'; -const Group = styled.h4` - font-family: Roboto, sans-serif; - font-weight: 700; - margin: 0; - text-transform: uppercase; - color: ${selectedTheme.mainColor}; -`; - const BookmarkGroup = styled.div` display: flex; flex-direction: column; @@ -27,7 +20,6 @@ const BookmarkGroup = styled.div` `; const Bookmark = styled.a` - font-family: Roboto, sans-serif; font-weight: 400; text-decoration: none; color: ${selectedTheme.accentColor}; @@ -77,7 +69,7 @@ const BookmarkList = () => { return ( - {group.name} + {group.name} {group.items.map(({ url, name: linkName }) => ( {linkName} diff --git a/src/components/category.js b/src/components/category.js new file mode 100644 index 0000000..3ba1530 --- /dev/null +++ b/src/components/category.js @@ -0,0 +1,31 @@ +import React from 'react'; +import styled from 'styled-components'; +import { App } from './app'; +import { ItemList, Item, SubHeadline } from './elements'; + +const CategoryHeadline = styled(SubHeadline)` + font-size: 1.25rem; +`; + +const CategoryContainer = styled.div` + width: 100%; + padding-top: 1rem; +`; + +export const Category = ({ name, items }) => ( + + {name} + + {items.map((app, idx) => ( + + + + ))} + + +); diff --git a/src/components/data/apps.json b/src/components/data/apps.json index 903c79f..0ada2c5 100644 --- a/src/components/data/apps.json +++ b/src/components/data/apps.json @@ -1,4 +1,124 @@ { + "categories": [ + { + "name": "Test", + "items": [ + { + "name": "Pihole", + "displayURL": "example.com", + "URL": "https://example.com", + "icon": "vpn_lock" + }, + { + "name": "Plex", + "displayURL": "example.com", + "URL": "https://example.com", + "icon": "tv" + }, + { + "name": "NextCloud", + "displayURL": "example.com", + "URL": "https://example.com", + "icon": "filter_drama" + }, + { + "name": "Ghost", + "displayURL": "example.com", + "URL": "https://example.com", + "icon": "rss_feed" + }, + { + "name": "Minecraft", + "displayURL": "example.com", + "URL": "https://example.com", + "icon": "games" + }, + { + "name": "pfSense", + "displayURL": "example.com", + "URL": "https://example.com", + "icon": "security" + }, + { + "name": "ESXi", + "displayURL": "example.com", + "URL": "https://example.com", + "icon": "dns" + }, + { + "name": "Tautulli", + "displayURL": "example.com", + "URL": "https://example.com", + "icon": "bar_chart" + }, + { + "name": "Grafana", + "displayURL": "example.com", + "URL": "https://example.com", + "icon": "show_chart" + } + ] + }, + { + "name": "Test again", + "items": [ + { + "name": "Pihole", + "displayURL": "example.com", + "URL": "https://example.com", + "icon": "vpn_lock" + }, + { + "name": "Plex", + "displayURL": "example.com", + "URL": "https://example.com", + "icon": "tv" + }, + { + "name": "NextCloud", + "displayURL": "example.com", + "URL": "https://example.com", + "icon": "filter_drama" + }, + { + "name": "Ghost", + "displayURL": "example.com", + "URL": "https://example.com", + "icon": "rss_feed" + }, + { + "name": "Minecraft", + "displayURL": "example.com", + "URL": "https://example.com", + "icon": "games" + }, + { + "name": "pfSense", + "displayURL": "example.com", + "URL": "https://example.com", + "icon": "security" + }, + { + "name": "ESXi", + "displayURL": "example.com", + "URL": "https://example.com", + "icon": "dns" + }, + { + "name": "Tautulli", + "displayURL": "example.com", + "URL": "https://example.com", + "icon": "bar_chart" + }, + { + "name": "Grafana", + "displayURL": "example.com", + "URL": "https://example.com", + "icon": "show_chart" + } + ] + } + ], "apps": [ { "name": "Pihole", diff --git a/src/components/elements.js b/src/components/elements.js index f1dd701..6e4bec6 100644 --- a/src/components/elements.js +++ b/src/components/elements.js @@ -16,7 +16,7 @@ export const ListContainer = styled.div` padding: 2rem 0; `; -export const Headline = styled.h3` +export const Headline = styled.h2` display: inline-block; font-weight: 900; text-transform: uppercase; @@ -25,12 +25,11 @@ export const Headline = styled.h3` color: ${selectedTheme.mainColor}; `; -export const SubHeadline = styled.h4` +export const SubHeadline = styled.h3` display: inline-block; font-weight: 700; text-transform: uppercase; - margin: 0px; - font-size: 1.5rem; + margin: 0; color: ${selectedTheme.mainColor}; `;