diff --git a/README.md b/README.md index 2fd0356a..78a3d049 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,8 @@ # movie-web Small web app for watching movies easily. Check it out at **[movie.squeezebox.dev](https://movie.squeezebox.dev)**. + +**[Join the Discord community](https://discord.gg/vXsRvye8BS)** + ## Credits - Thanks to [@JipFr](https://github.com/JipFr) for initial work on [movie-cli](https://github.com/JipFr/movie-cli) - Thanks to [@mrjvs](https://github.com/mrjvs) for help porting to React, and for the beautiful design diff --git a/src/components/DiscordBanner.css b/src/components/DiscordBanner.css new file mode 100644 index 00000000..6fa3fe5d --- /dev/null +++ b/src/components/DiscordBanner.css @@ -0,0 +1,16 @@ +.discordBanner { + margin-top: 0.5rem; + border-inline-start: none; + font-size: 16px; + font-weight: normal; + letter-spacing: -.01em; + padding: .5rem 1rem .5rem .75rem; + border-radius: .25rem; + background-color: var(--button); + color: var(--button-text); +} + +.discordBanner a { + color: var(--button-text); + /* text-decoration: none; */ +} \ No newline at end of file diff --git a/src/components/DiscordBanner.js b/src/components/DiscordBanner.js new file mode 100644 index 00000000..2b952104 --- /dev/null +++ b/src/components/DiscordBanner.js @@ -0,0 +1,12 @@ +import React from 'react'; +import './DiscordBanner.css'; + +export function DiscordBanner() { + return ( +
+ ) +} \ No newline at end of file diff --git a/src/views/Search.js b/src/views/Search.js index 306bf4c2..c6d20743 100644 --- a/src/views/Search.js +++ b/src/views/Search.js @@ -11,6 +11,7 @@ import { useMovie } from '../hooks/useMovie'; import { TypeSelector } from '../components/TypeSelector'; import './Search.css'; +import { DiscordBanner } from '../components/DiscordBanner'; export function SearchView() { const { navigate, setStreamUrl, setStreamData } = useMovie(); @@ -115,6 +116,7 @@ export function SearchView() { return (