diff --git a/components/ColorSchemeToggle/ColorSchemeSwitch.tsx b/components/ColorSchemeToggle/ColorSchemeSwitch.tsx
new file mode 100644
index 00000000000..b8fb154885a
--- /dev/null
+++ b/components/ColorSchemeToggle/ColorSchemeSwitch.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { createStyles, Switch, Group, useMantineColorScheme } from '@mantine/core';
+import { Sun, MoonStars } from 'tabler-icons-react';
+
+const useStyles = createStyles((theme) => ({
+ root: {
+ position: 'relative',
+ '& *': {
+ cursor: 'pointer',
+ },
+ },
+
+ icon: {
+ pointerEvents: 'none',
+ position: 'absolute',
+ zIndex: 1,
+ top: 3,
+ },
+
+ iconLight: {
+ left: 4,
+ color: theme.white,
+ },
+
+ iconDark: {
+ right: 4,
+ color: theme.colors.gray[6],
+ },
+}));
+
+export function ColorSchemeSwitch() {
+ const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+ const { classes, cx } = useStyles();
+
+ return (
+
+
+
+
+ toggleColorScheme()} size="md" />
+
+ Switch to {colorScheme === 'dark' ? 'light' : 'dark'} mode
+
+ );
+}
diff --git a/components/Settings/SettingsMenu.tsx b/components/Settings/SettingsMenu.tsx
index 3da9f5e7d8b..70b7c48cdac 100644
--- a/components/Settings/SettingsMenu.tsx
+++ b/components/Settings/SettingsMenu.tsx
@@ -8,13 +8,16 @@ import {
Tooltip,
SegmentedControl,
} from '@mantine/core';
+import { useColorScheme } from '@mantine/hooks';
import { useState } from 'react';
import { Settings as SettingsIcon } from 'tabler-icons-react';
import { useConfig } from '../../tools/state';
+import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
import SaveConfigComponent from '../Config/SaveConfig';
function SettingsMenu(props: any) {
const { config, setConfig } = useConfig();
+ const colorScheme = useColorScheme();
const matches = [
{ label: 'Google', value: 'https://google.com/search?q=' },
{ label: 'DuckDuckGo', value: 'https://duckduckgo.com/?q=' },
@@ -46,6 +49,7 @@ function SettingsMenu(props: any) {
setConfig({
...config,
@@ -59,6 +63,7 @@ function SettingsMenu(props: any) {
label="Enable search bar"
/>
+
-
diff --git a/components/modules/calendar/CalendarModule.tsx b/components/modules/calendar/CalendarModule.tsx
index 699485497e1..bf66a47b670 100644
--- a/components/modules/calendar/CalendarModule.tsx
+++ b/components/modules/calendar/CalendarModule.tsx
@@ -6,6 +6,7 @@ import { CalendarIcon } from '@modulz/radix-icons';
import { RadarrMediaDisplay, SonarrMediaDisplay } from './MediaDisplay';
import { useConfig } from '../../../tools/state';
import { MHPModule } from '../modules';
+import React from 'react';
export const CalendarModule: MHPModule = {
title: 'Calendar',
@@ -93,8 +94,12 @@ function DayComponent(props: any) {
setOpened(true);
}}
>
- {radarrFiltered.length > 0 && }
- {sonarrFiltered.length > 0 && }
+ {radarrFiltered.length > 0 && (
+
+ )}
+ {sonarrFiltered.length > 0 && (
+
+ )}
- {sonarrFiltered.length > 0 && }
+ {sonarrFiltered.map((media: any, index: number) => {
+ return (
+
+
+ {index < sonarrFiltered.length - 1 && }
+
+ );
+ })}
{radarrFiltered.length > 0 && sonarrFiltered.length > 0 && (
)}
- {radarrFiltered.length > 0 && }
+ {radarrFiltered.map((media: any, index: number) => {
+ return (
+
+
+ {index < radarrFiltered.length - 1 && }
+
+ );
+ })}
diff --git a/components/modules/calendar/MediaDisplay.tsx b/components/modules/calendar/MediaDisplay.tsx
index 5c6a5c2bcaa..dcea62458b6 100644
--- a/components/modules/calendar/MediaDisplay.tsx
+++ b/components/modules/calendar/MediaDisplay.tsx
@@ -2,22 +2,20 @@ import { Stack, Image, Group, Title, Badge, Text, ActionIcon, Anchor } from '@ma
import { Link } from 'tabler-icons-react';
export interface IMedia {
- id: string;
+ overview: string;
+ imdbId: any;
title: string;
- description: string;
poster: string;
- type: string;
genres: string[];
+ seasonNumber?: number;
+ episodeNumber?: number;
}
-export function RadarrMediaDisplay(props: any) {
- const { media }: { media: any } = props;
- // Find a poster CoverType
- const poster = media.images.find((image: any) => image.coverType === 'poster');
- // Return a movie poster containting the title and the description
+function MediaDisplay(props: { media: IMedia }) {
+ const { media }: { media: IMedia } = props;
return (
-
-
+
+
({
@@ -33,7 +31,17 @@ export function RadarrMediaDisplay(props: any) {
- {media.overview}
+ {media.episodeNumber && media.seasonNumber && (
+
+ Season {media.seasonNumber} episode {media.episodeNumber}
+
+ )}
+ {media.overview}
{/*Add the genres at the bottom of the poster*/}
@@ -46,46 +54,40 @@ export function RadarrMediaDisplay(props: any) {
);
}
+export function RadarrMediaDisplay(props: any) {
+ const { media }: { media: any } = props;
+ // Find a poster CoverType
+ const poster = media.images.find((image: any) => image.coverType === 'poster');
+ // Return a movie poster containting the title and the description
+ return (
+
+ );
+}
+
export function SonarrMediaDisplay(props: any) {
const { media }: { media: any } = props;
// Find a poster CoverType
const poster = media.series.images.find((image: any) => image.coverType === 'poster');
// Return a movie poster containting the title and the description
return (
-
-
- ({
- height: 400,
- })}
- >
-
-
- {media.series.title}
-
-
-
-
-
-
-
- Season {media.seasonNumber} episode {media.episodeNumber}
-
- {media.series.overview}
-
- {/*Add the genres at the bottom of the poster*/}
-
- {media.series.genres.map((genre: string, i: number) => (
- {genre}
- ))}
-
-
-
+
);
}
diff --git a/package.json b/package.json
index f9b72e64f73..30a1ebd53e9 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,12 @@
{
- "name": "mantine-next-template",
- "version": "1.0.0",
- "private": true,
+ "name": "homarr",
+ "version": "0.0.1",
+ "private": "false",
+ "description": "Customizable browser's home page to interact with your homeserver's Docker containers (i.e. Sonarr/Radarr)",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/ajnart/myhomepage"
+ },
"scripts": {
"dev": "next dev",
"build": "next build",
@@ -76,4 +81,4 @@
"ts-jest": "^27.1.4",
"typescript": "4.6.3"
}
-}
+}
\ No newline at end of file