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};
`;