From 6fcdef3fd77e5e8b19a0f062a8af4dc1e29d3b81 Mon Sep 17 00:00:00 2001 From: Jip Fr Date: Wed, 6 Sep 2023 20:27:17 +0200 Subject: [PATCH] Add DMCA & FAQ (sorta) pages --- src/components/Icon.tsx | 2 + src/components/buttons/IconPatch.tsx | 2 +- src/components/layout/BrandPill.tsx | 2 +- src/components/layout/Navigation.tsx | 11 ++-- src/components/utils/Text.tsx | 43 ++++++++++++++++ src/pages/About.tsx | 73 +++++++++++++++++++++++++++ src/pages/Dmca.tsx | 25 +++++++++ src/pages/layouts/SubPageLayout.tsx | 24 +++++++++ src/setup/App.tsx | 4 ++ src/setup/locales/en/translation.json | 4 ++ tailwind.config.js | 41 ++++++++------- 11 files changed, 207 insertions(+), 24 deletions(-) create mode 100644 src/components/utils/Text.tsx create mode 100644 src/pages/About.tsx create mode 100644 src/pages/Dmca.tsx create mode 100644 src/pages/layouts/SubPageLayout.tsx diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index af71ab4e..21f6ac24 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -41,6 +41,7 @@ export enum Icons { PICTURE_IN_PICTURE = "pictureInPicture", CHECKMARK = "checkmark", TACHOMETER = "tachometer", + MAIL = "mail", } export interface IconProps { @@ -89,6 +90,7 @@ const iconList: Record = { pictureInPicture: ``, checkmark: ``, tachometer: ``, + mail: ``, }; function ChromeCastButton() { diff --git a/src/components/buttons/IconPatch.tsx b/src/components/buttons/IconPatch.tsx index d51f20b1..3d431d40 100644 --- a/src/components/buttons/IconPatch.tsx +++ b/src/components/buttons/IconPatch.tsx @@ -23,7 +23,7 @@ export function IconPatch(props: IconPatchProps) { return (
diff --git a/src/components/layout/BrandPill.tsx b/src/components/layout/BrandPill.tsx index 3c7e1fea..ea9fc081 100644 --- a/src/components/layout/BrandPill.tsx +++ b/src/components/layout/BrandPill.tsx @@ -10,7 +10,7 @@ export function BrandPill(props: { return (
-
-
- + {!props.noLightbar ? ( +
+
+ +
-
+ ) : null}
+ {props.children} + + ); +} + +export function Heading2(props: TextProps) { + return ( +

+ {props.children} +

+ ); +} + +export function Paragraph(props: TextProps) { + return ( +

+ {props.children} +

+ ); +} diff --git a/src/pages/About.tsx b/src/pages/About.tsx new file mode 100644 index 00000000..38e1ca3d --- /dev/null +++ b/src/pages/About.tsx @@ -0,0 +1,73 @@ +/* eslint-disable react/no-unescaped-entities */ +import { ThinContainer } from "@/components/layout/ThinContainer"; +import { Heading1, Heading2, Paragraph } from "@/components/utils/Text"; + +import { SubPageLayout } from "./layouts/SubPageLayout"; + +export function AboutPage() { + return ( + + + About us + + Blue, oh so blue, like the tranquil sky on a summer's day. It's the + color of calm and serenity, a gentle embrace for your senses. When you + think of blue, you think of the vast ocean stretching endlessly, + inviting you to dive deep into its azure depths. Blue is the color of + dreams, where the world slows down, and you can hear the whispers of + the wind in the tall grass. It's a symphony of peacefulness that + resonates with your soul, like a melody that lingers in your heart. + + How does it work? + + Blue, well, it's like this cosmic wavelength, man, and it's like the + universe is just vibin', you know? It's like, when you stare at the + blue, it's like you're staring at the secrets of the cosmos, like, + whoa, it's like a trippy trip to another dimension where time doesn't + even matter, and you're just floating in a sea of, like, blue, man. + And it's like, it's not just a color, it's a whole experience, like, + you're in this cosmic rollercoaster ride through the quantum soup of + existence, and you're just riding the blue wave, man. + + + Blue, like, it's totally, um, the essence of like, everything, you + know? It's like, you look at it, and it's like, it's there, but it's + also not there, and it's like, you're trying to grasp the concept of + blue, but it's like trying to catch a dream in a net made of + spaghetti, you know? It's like, it's the ultimate paradox, and it's + like, it's just blowing your mind, man, like, it's like trying to find + the meaning of life in a jar of peanut butter, but the peanut butter + is made of pure energy, man, and it's like, whoa. + + Frequently asked questions + + Blue, blue, b-b-b-bluuuuuueeeeeeeee, zippity zappity zoooooo, it's + like, you know, it's like, blue is like, um, you know, it's like, um, + like a thing, but it's also not a thing, and it's like, whoa, dude, + it's like, it's like trying to juggle invisible watermelons while + riding a unicycle made of rubber bands and ketchup, and it's like, + you're just floating in the cosmic jellyfish of existence, and the + jellyfish are like, playing the accordion, man, and it's like, the + accordion is made of, like, spaghetti and, like, um, interdimensional + cheese, and it's like, whoa, dude, like, whoa. + + + Bloo-bloo-bloo, bleepity-bloop, blibber-blabber, blarble-blurble, blue + is like, um, you know, flibberflabberfloober, like, + zoomity-zamity-zoom, and it's like, um, sproingity-sproing, like, uh, + gibber-gabber-gobblygook, you know, it's like, um, + jibber-jabber-jibberish, like, whatchamacallit, thingamajig, + doodad-doodad-dingdong, like, ploopity-ploop, um, blibbity-blam, + flibbity-floo, like, gobbledygook-gobbledygook, + whoopsy-daisy-dingleberry, and it's like, uh, + flibberflabberflooberzoomity-sproing, um, like, + blibber-gibber-jibber-jabber, thingamajig-whatchamacallit, like, you + know, thingamajig-doodad-doodledee, and it's like, um, + doodad-gobbledygook-doodley-doo, like, + ploopity-whoopsy-doodleberry-flibber, you know, it's like, uh, blue, + man, like, totally, um, blue. + + + + ); +} diff --git a/src/pages/Dmca.tsx b/src/pages/Dmca.tsx new file mode 100644 index 00000000..c74ee85a --- /dev/null +++ b/src/pages/Dmca.tsx @@ -0,0 +1,25 @@ +/* eslint-disable react/no-unescaped-entities */ +import { useTranslation } from "react-i18next"; + +import { Icon, Icons } from "@/components/Icon"; +import { ThinContainer } from "@/components/layout/ThinContainer"; +import { Heading1, Paragraph } from "@/components/utils/Text"; + +import { SubPageLayout } from "./layouts/SubPageLayout"; + +export function DmcaPage() { + const { t } = useTranslation(); + + return ( + + + {t("dmca.title")} + {t("dmca.description")} + + + dmca@movie-web.app + + + + ); +} diff --git a/src/pages/layouts/SubPageLayout.tsx b/src/pages/layouts/SubPageLayout.tsx new file mode 100644 index 00000000..f5c7ca50 --- /dev/null +++ b/src/pages/layouts/SubPageLayout.tsx @@ -0,0 +1,24 @@ +import { FooterView } from "@/components/layout/Footer"; +import { Navigation } from "@/components/layout/Navigation"; + +export function SubPageLayout(props: { children: React.ReactNode }) { + return ( +
+ {/* Blur elipsis */} +
+
+ + {/* Main page */} + + +
{props.children}
+ +
+ ); +} diff --git a/src/setup/App.tsx b/src/setup/App.tsx index 318ca4ac..dc47e9e7 100644 --- a/src/setup/App.tsx +++ b/src/setup/App.tsx @@ -11,6 +11,8 @@ import { import { convertLegacyUrl, isLegacyUrl } from "@/backend/metadata/getmeta"; import { generateQuickSearchMediaUrl } from "@/backend/metadata/tmdb"; import { BannerContextProvider } from "@/hooks/useBanner"; +import { AboutPage } from "@/pages/About"; +import { DmcaPage } from "@/pages/Dmca"; import { NotFoundPage } from "@/pages/errors/NotFoundPage"; import { HomePage } from "@/pages/HomePage"; import { MediaView } from "@/pages/media/MediaView"; @@ -87,6 +89,8 @@ function App() { path={["/browse/:query?", "/"]} component={HomePage} /> + + {/* other */}