chore: Refactored React components folder structure

packages/dashboard/src/components/JobStatsTile.tsx

@@ -0,0 +1,42 @@
+import { cn } from "@/lib/utils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+type JobStatsTileProps = {
+  value: number;
+  className: string;
+  onClick: () => void;
+  active: boolean;
+  tooltip: string;
+};
+
+export function JobStatsTile({
+  value,
+  className,
+  onClick,
+  active,
+  tooltip,
+}: JobStatsTileProps) {
+  return (
+    <Tooltip>
+      <TooltipTrigger>
+        <li
+          onClick={onClick}
+          className={cn(
+            "flex flex-col items-center justify-center text-xs w-10 h-10 rounded-lg",
+            active && "bg-muted text-primary",
+          )}
+        >
+          {value}
+          <div className={cn("w-2 h-2 rounded-full", className)} />
+        </li>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{tooltip}</p>
+      </TooltipContent>
+    </Tooltip>
+  );
+}

packages/dashboard/src/components/JobsStats.tsx

@@ -1,10 +1,5 @@
-import { cn } from "@/lib/utils";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { JobStatsTile } from "./JobStatsTile";
 import type { JobDto } from "@/tsr";
 import type { JobsFilterData } from "./types";
 
@@ -45,28 +40,28 @@ export function JobsStats({ jobs, filter, onChange }: JobsStatsProps) {
   return (
     <TooltipProvider delayDuration={0}>
       <div className="flex">
-        <Tile
+        <JobStatsTile
           value={completed}
           className="bg-emerald-400"
           onClick={() => filterJobState("completed")}
           active={filter.state === "completed"}
           tooltip="Completed"
         />
-        <Tile
+        <JobStatsTile
           value={failed}
           className="bg-red-400"
           onClick={() => filterJobState("failed")}
           active={filter.state === "failed"}
           tooltip="Failed"
         />
-        <Tile
+        <JobStatsTile
           value={running}
           className="bg-blue-400"
           onClick={() => filterJobState("running")}
           active={filter.state === "running"}
           tooltip="Running"
         />
-        <Tile
+        <JobStatsTile
           value={waiting}
           className="bg-violet-400"
           onClick={() => filterJobState("waiting")}
@@ -77,37 +72,3 @@ export function JobsStats({ jobs, filter, onChange }: JobsStatsProps) {
     </TooltipProvider>
   );
 }
-
-function Tile({
-  value,
-  className,
-  onClick,
-  active,
-  tooltip,
-}: {
-  value: number;
-  className: string;
-  onClick: () => void;
-  active: boolean;
-  tooltip: string;
-}) {
-  return (
-    <Tooltip>
-      <TooltipTrigger>
-        <li
-          onClick={onClick}
-          className={cn(
-            "flex flex-col items-center justify-center text-xs w-10 h-10 rounded-lg",
-            active && "bg-muted text-primary",
-          )}
-        >
-          {value}
-          <div className={cn("w-2 h-2 rounded-full", className)} />
-        </li>
-      </TooltipTrigger>
-      <TooltipContent>
-        <p>{tooltip}</p>
-      </TooltipContent>
-    </Tooltip>
-  );
-}

packages/dashboard/src/components/Sidebar.tsx

@@ -1,11 +1,11 @@
 import logo from "../assets/logo.svg";
-import { cn } from "@/lib/utils";
-import { Link, useLocation } from "react-router-dom";
+import { SidebarTitle } from "./SidebarTitle";
+import { Link } from "react-router-dom";
 import Rows3 from "lucide-react/icons/rows-3";
 import Sailboat from "lucide-react/icons/sailboat";
 import Play from "lucide-react/icons/play";
 import Box from "lucide-react/icons/box";
-import type { ReactNode } from "react";
+import { SidebarNavLink } from "./SidebarNavLink";
 
 export function Sidebar() {
   return (
@@ -17,60 +17,29 @@ export function Sidebar() {
         </Link>
       </div>
       <div className="flex-1">
-        <Title className="mb-4 mt-2">Manage</Title>
+        <SidebarTitle className="mb-4 mt-2">Manage</SidebarTitle>
         <nav className="grid items-start px-4 text-sm font-medium mb-4">
-          <NavLink to="/jobs">
+          <SidebarNavLink to="/jobs">
             <Rows3 className="h-4 w-4" />
             Jobs
-          </NavLink>
-          <NavLink to="/storage">
+          </SidebarNavLink>
+          <SidebarNavLink to="/storage">
             <Box className="h-4 w-4" />
             Storage
-          </NavLink>
+          </SidebarNavLink>
         </nav>
-        <Title className="my-4">Tools</Title>
+        <SidebarTitle className="my-4">Tools</SidebarTitle>
         <nav className="grid items-start px-4 text-sm font-medium">
-          <NavLink to="/player">
+          <SidebarNavLink to="/player">
             <Play className="h-4 w-4" />
             Player
-          </NavLink>
-          <NavLink to="/api">
+          </SidebarNavLink>
+          <SidebarNavLink to="/api">
             <Sailboat className="h-4 w-4" />
             API
-          </NavLink>
+          </SidebarNavLink>
         </nav>
       </div>
     </div>
   );
 }
-
-function NavLink({ children, to }: { children: ReactNode; to: string }) {
-  const { pathname } = useLocation();
-
-  return (
-    <Link
-      to={to}
-      className={cn(
-        "flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary",
-
-        pathname.startsWith(to) && "bg-muted text-primary",
-      )}
-    >
-      {children}
-    </Link>
-  );
-}
-
-function Title({
-  children,
-  className,
-}: {
-  children: ReactNode;
-  className?: string;
-}) {
-  return (
-    <div className={cn("text-xs px-3 ml-4 font-medium", className)}>
-      {children}
-    </div>
-  );
-}

packages/dashboard/src/components/SidebarNavLink.tsx

@@ -0,0 +1,25 @@
+import { Link, useLocation } from "react-router-dom";
+import { cn } from "@/lib/utils";
+import type { ReactNode } from "react";
+
+type SidebarNavLinkProps = {
+  children: ReactNode;
+  to: string;
+};
+
+export function SidebarNavLink({ children, to }: SidebarNavLinkProps) {
+  const { pathname } = useLocation();
+
+  return (
+    <Link
+      to={to}
+      className={cn(
+        "flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary",
+
+        pathname.startsWith(to) && "bg-muted text-primary",
+      )}
+    >
+      {children}
+    </Link>
+  );
+}

packages/dashboard/src/components/SidebarTitle.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils";
+import type { ReactNode } from "react";
+
+type SidebarTitleProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export function SidebarTitle({ children, className }: SidebarTitleProps) {
+  return (
+    <div className={cn("text-xs px-3 ml-4 font-medium", className)}>
+      {children}
+    </div>
+  );
+}