Perfect direct links and add buttons that link to TopFlix and Support to about us

src/components/layout/Navigation.tsx

@@ -103,7 +103,7 @@ export function Navigation(props: NavigationProps) {
                 <IconPatch icon={Icons.GITHUB} clickable downsized />
               </a>
               <a
-                href="/flix"
+                href={`${window.location.pathname}#flix`}
                 rel="noreferrer"
                 className="text-xl text-white tabbable rounded-full"
               >

src/pages/About.tsx

@@ -1,4 +1,6 @@
+import classNames from "classnames";
 import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
 
 import { ThinContainer } from "@/components/layout/ThinContainer";
 import { Ol } from "@/components/utils/Ol";
@@ -16,6 +18,27 @@ function Question(props: { title: string; children: React.ReactNode }) {
   );
 }
 
+function Button(props: {
+  className: string;
+  onClick?: () => void;
+  children: React.ReactNode;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      className={classNames(
+        "font-bold rounded h-10 w-40 scale-90 hover:scale-95 transition-all duration-200",
+        props.className,
+      )}
+      type="button"
+      onClick={props.onClick}
+      disabled={props.disabled}
+    >
+      {props.children}
+    </button>
+  );
+}
+
 export function AboutPage() {
   const { t } = useTranslation();
   return (
@@ -44,6 +67,21 @@ export function AboutPage() {
             </Question>,
           ]}
         />
+        <div
+          style={{ display: "flex", justifyContent: "space-between" }}
+          className="w-full"
+        >
+          <Link to="/flix">
+            <Button className="py-px mt-8 box-content bg-buttons-secondary hover:bg-buttons-secondaryHover bg-opacity-90 text-buttons-secondaryText justify-center items-center">
+              Top Flix
+            </Button>
+          </Link>
+          <Link to="/support">
+            <Button className="py-px mt-8 box-content bg-buttons-secondary hover:bg-buttons-secondaryHover bg-opacity-90 text-buttons-secondaryText justify-center items-center">
+              Support
+            </Button>
+          </Link>
+        </div>
       </ThinContainer>
     </SubPageLayout>
   );

src/pages/TopFlix.tsx

@@ -31,9 +31,9 @@ function Button(props: {
   );
 }
 
-function isShowOrMovie(tmdbFullId: string): "show" | "movie" | "unknown" {
+function isShowOrMovie(tmdbFullId: string): "series" | "movie" | "unknown" {
   if (tmdbFullId.includes("show-")) {
-    return "show";
+    return "series";
   }
   if (tmdbFullId.includes("movie-")) {
     return "movie";
@@ -42,12 +42,15 @@ function isShowOrMovie(tmdbFullId: string): "show" | "movie" | "unknown" {
 }
 
 function directLinkToContent(tmdbFullId: string) {
-  const currentDomain = window.location.href.split("#")[0];
-  if (isShowOrMovie(tmdbFullId) === "show") {
-    return `${currentDomain}/media/tmdb-movie-${tmdbFullId.split("-")[1]}`;
+  if (isShowOrMovie(tmdbFullId) === "series") {
+    return `${window.location.pathname}#/media/tmdb-movie-${
+      tmdbFullId.split("-")[1]
+    }`;
   }
   if (isShowOrMovie(tmdbFullId) === "movie") {
-    return `${currentDomain}/media/tmdb-tv-${tmdbFullId.split("-")[1]}`;
+    return `${window.location.pathname}#/media/tmdb-tv-${
+      tmdbFullId.split("-")[1]
+    }`;
   }
   return null;
 }
@@ -61,7 +64,7 @@ function ConfigValue(props: {
   return (
     <>
       <div className="flex">
-        <p className="flex-1 font-bold text-white pr-5">
+        <p className="flex-1 font-bold text-white pr-5 pl-3">
           {link ? (
             <Link to={link} className="hover:underline">
               {props.name}
@@ -70,7 +73,7 @@ function ConfigValue(props: {
             <p>{props.name}</p>
           )}
         </p>
-        <p>{props.children}</p>
+        <p className="pr-3">{props.children}</p>
       </div>
       <Divider marginClass="my-3" />
     </>
@@ -207,7 +210,9 @@ export function TopFlix() {
                 id={item.tmdbFullId}
                 name={item.title}
               >
-                {`${item.providerId} - Views: `}
+                {`${item.providerId}, ${isShowOrMovie(
+                  item.tmdbFullId,
+                )} - Views: `}
                 <strong>{item.count}</strong>
               </ConfigValue>
             );