chore: Simplified header

superstreamerapp · Sep 18, 2024 · 1020eab · 1020eab
1 parent ceb39c8
commit 1020eab
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 108 deletions.
diff --git a/packages/dashboard/src/components/BrowserMockup.tsx b/packages/dashboard/src/components/BrowserMockup.tsx
diff --git a/packages/dashboard/src/components/Header.tsx b/packages/dashboard/src/components/Header.tsx
@@ -1,6 +1,6 @@
 import logo from "../assets/logo.svg";
+import { cn } from "@/lib/utils";
 import { Link, useLocation } from "react-router-dom";
-import { Button } from "./ui/button";
 
 export function Header() {
   const { pathname } = useLocation();
@@ -11,28 +11,34 @@ export function Header() {
         <img src={logo} className="w-[24px]" />
         <span className="font-medium">Mixwave</span>
       </Link>
-      <div className="flex gap-2 ml-4">
-        <Button
-          asChild
-          variant={pathname.startsWith("/jobs") ? "secondary" : "link"}
-          className="h-8"
+      <div className="flex items-center gap-8 ml-8">
+        <Link
+          to="/jobs"
+          className={cn(
+            "text-muted-foreground",
+            pathname.startsWith("/jobs") && "text-black",
+          )}
         >
-          <Link to="/jobs">jobs</Link>
-        </Button>
-        <Button
-          asChild
-          variant={pathname.startsWith("/api") ? "secondary" : "link"}
-          className="h-8"
+          jobs
+        </Link>
+        <Link
+          to="/api"
+          className={cn(
+            "text-muted-foreground",
+            pathname.startsWith("/api") && "text-black",
+          )}
         >
-          <Link to="/api">api</Link>
-        </Button>
-        <Button
-          asChild
-          variant={pathname.startsWith("/player") ? "secondary" : "link"}
-          className="h-8"
+          api
+        </Link>
+        <Link
+          to="/player"
+          className={cn(
+            "text-muted-foreground",
+            pathname.startsWith("/player") && "text-black",
+          )}
         >
-          <Link to="/player">player</Link>
-        </Button>
+          player
+        </Link>
       </div>
     </div>
   );

diff --git a/packages/dashboard/src/components/JobsStats.tsx b/packages/dashboard/src/components/JobsStats.tsx
@@ -44,63 +44,39 @@ export function JobsStats({ jobs, filter, onChange }: JobsStatsProps) {
 
   return (
     <TooltipProvider delayDuration={0}>
-      <ul className="flex bg-white border border-border rounded-md overflow-hidden">
-        <Tooltip>
-          <TooltipTrigger>
-            <Tile
-              value={completed}
-              className="bg-emerald-400"
-              outerClassName="border-r border-border"
-              onClick={() => filterJobState("completed")}
-              active={filter.state === "completed"}
-            />
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Completed</p>
-          </TooltipContent>
-        </Tooltip>
-        <Tooltip>
-          <TooltipTrigger>
-            <Tile
-              value={failed}
-              className="bg-red-400"
-              outerClassName="border-r border-border"
-              onClick={() => filterJobState("failed")}
-              active={filter.state === "failed"}
-            />
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Failed</p>
-          </TooltipContent>
-        </Tooltip>
-        <Tooltip>
-          <TooltipTrigger>
-            <Tile
-              value={running}
-              className="bg-blue-400"
-              outerClassName="border-r border-border"
-              onClick={() => filterJobState("running")}
-              active={filter.state === "running"}
-            />
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Running</p>
-          </TooltipContent>
-        </Tooltip>
-        <Tooltip>
-          <TooltipTrigger>
-            <Tile
-              value={waiting}
-              className="bg-violet-400"
-              onClick={() => filterJobState("waiting")}
-              active={filter.state === "waiting"}
-            />
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Waiting</p>
-          </TooltipContent>
-        </Tooltip>
-      </ul>
+      <div className="flex bg-white border border-border rounded-md overflow-hidden">
+        <Tile
+          value={completed}
+          className="bg-emerald-400"
+          outerClassName="border-r border-border"
+          onClick={() => filterJobState("completed")}
+          active={filter.state === "completed"}
+          tooltip="Completed"
+        />
+        <Tile
+          value={failed}
+          className="bg-red-400"
+          outerClassName="border-r border-border"
+          onClick={() => filterJobState("failed")}
+          active={filter.state === "failed"}
+          tooltip="Failed"
+        />
+        <Tile
+          value={running}
+          className="bg-blue-400"
+          outerClassName="border-r border-border"
+          onClick={() => filterJobState("running")}
+          active={filter.state === "running"}
+          tooltip="Running"
+        />
+        <Tile
+          value={waiting}
+          className="bg-violet-400"
+          onClick={() => filterJobState("waiting")}
+          active={filter.state === "waiting"}
+          tooltip="Waiting"
+        />
+      </div>
     </TooltipProvider>
   );
 }
@@ -111,24 +87,33 @@ function Tile({
   outerClassName,
   onClick,
   active,
+  tooltip,
 }: {
   value: number;
   className: string;
   outerClassName?: string;
   onClick: () => void;
   active: boolean;
+  tooltip: string;
 }) {
   return (
-    <li
-      onClick={onClick}
-      className={cn(
-        "flex items-center justify-center px-2 h-10 text-xs font-medium",
-        outerClassName,
-        active && "bg-secondary",
-      )}
-    >
-      {value}
-      <div className={cn("ml-1 w-2 h-2 rounded-full", className)} />
-    </li>
+    <Tooltip>
+      <TooltipTrigger>
+        <li
+          onClick={onClick}
+          className={cn(
+            "flex items-center justify-center px-2 h-10 text-xs font-medium",
+            outerClassName,
+            active && "bg-secondary",
+          )}
+        >
+          {value}
+          <div className={cn("ml-1 w-2 h-2 rounded-full", className)} />
+        </li>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{tooltip}</p>
+      </TooltipContent>
+    </Tooltip>
   );
 }
diff --git a/packages/dashboard/src/pages/PlayerPage.tsx b/packages/dashboard/src/pages/PlayerPage.tsx
@@ -2,7 +2,6 @@ import { useEffect, useState, lazy, Suspense } from "react";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Alert } from "@/components/ui/alert";
-import { BrowserMockup } from "@/components/BrowserMockup";
 import { StretchLoader } from "@/components/StretchLoader";
 
 const LazyEditor = lazy(() =>
@@ -73,9 +72,7 @@ export function PlayerPage() {
         <div className="basis-1/2 p-4">
           {masterUrl ? (
             <>
-              <BrowserMockup>
-                <LazyPlayer url={masterUrl} />
-              </BrowserMockup>
+              <LazyPlayer url={masterUrl} />
               <div className="mt-4">
                 <Label>Playlist URL</Label>
                 <Input