diff --git a/packages/webapp/src/components/dashboard/components/main-nav-sm.tsx b/packages/webapp/src/components/dashboard/components/main-nav-sm.tsx new file mode 100644 index 000000000..5d8b42b3c --- /dev/null +++ b/packages/webapp/src/components/dashboard/components/main-nav-sm.tsx @@ -0,0 +1,99 @@ +"use client" + +import { Button } from "@/components/ui/button" +import { + Sheet, + SheetContent, + SheetHeader, + SheetTitle, + SheetTrigger, +} from "@/components/ui/sheet" +import { MenuIcon } from "lucide-react" +import { useState } from "react" + + +export function SmallNav({ + onLinkClick +} : { + onLinkClick: (name: string) => void +}) { + const [selectedItem, setSelectedItem] = useState("dashboard"); + const [open, setOpen] = useState(false); + const navItemClassName = (itemName: string) => + `text-sm border-b font-medium w-full text-left mx-0 py-2 hover:bg-gray-900 cursor-pointer ${ + selectedItem === itemName ? "bg-gray-900" : "text-muted-foreground" + } transition-colors`; + + function click(name: string) { + setSelectedItem(name); + onLinkClick(name); + setOpen(false); + } + return ( +
+ + + + + + + + Panora. + + + + + +
+ ) +} diff --git a/packages/webapp/src/components/dashboard/index.tsx b/packages/webapp/src/components/dashboard/index.tsx index d87aa901c..852cb2d2f 100644 --- a/packages/webapp/src/components/dashboard/index.tsx +++ b/packages/webapp/src/components/dashboard/index.tsx @@ -1,16 +1,30 @@ import { MainNav } from "./components/main-nav" import TeamSwitcher from "../shared/team-switcher" import { UserNav } from "./components/user-nav" -import { useState } from "react" +import { useEffect, useState } from "react" import JobsPage from "../jobs" import ConnectionsPage from "../connections" import MainPage from "../main-component" import ConfigurationPage from "../configuration" import ApiKeysPage from "../api-keys" import QuickStartPage from "../quickstart" +import { SmallNav } from "./components/main-nav-sm" export default function DashboardPage() { const [activePage, setActivePage] = useState('dashboard'); + const [windowWidth, setWindowWidth] = useState(window.innerWidth); + + useEffect(() => { + const handleResize = () => setWindowWidth(window.innerWidth); + + window.addEventListener('resize', handleResize); + + // Clean up the event listener when the component unmounts + return () => window.removeEventListener('resize', handleResize); + }, []); + + const lgBreakpoint = 1024; // Tailwind's 'lg' breakpoint + let ContentComponent; switch (activePage) { @@ -37,18 +51,20 @@ export default function DashboardPage() { } return ( <> -
-
-
- Panora. - - -
- +
+ { windowWidth < lgBreakpoint ? : +
+
+ Panora. + + +
+ +
-
-
+ } +
diff --git a/packages/webapp/src/components/jobs/JobsTable.tsx b/packages/webapp/src/components/jobs/JobsTable.tsx index 31041d971..025c8bd59 100644 --- a/packages/webapp/src/components/jobs/JobsTable.tsx +++ b/packages/webapp/src/components/jobs/JobsTable.tsx @@ -7,6 +7,7 @@ import { DataTableLoading } from "../shared/data-table-loading"; export default function JobsTable() { const { data: jobs, isLoading, error } = useJobs(); + //TODO const transformedJobs = jobs?.map((job: Job) => ({ method: '', // replace with actual value url: '', // replace with actual value diff --git a/packages/webapp/src/components/shared/data-table-toolbar.tsx b/packages/webapp/src/components/shared/data-table-toolbar.tsx index d61d7d4f1..6d30efa8b 100644 --- a/packages/webapp/src/components/shared/data-table-toolbar.tsx +++ b/packages/webapp/src/components/shared/data-table-toolbar.tsx @@ -24,9 +24,9 @@ export function DataTableToolbar({
- table.getColumn("title")?.setFilterValue(event.target.value) + table.getColumn("method")?.setFilterValue(event.target.value) } className="h-8 w-[150px] lg:w-[250px]" /> diff --git a/packages/webapp/src/components/shared/data-table.tsx b/packages/webapp/src/components/shared/data-table.tsx index d120b56c9..cc416bc35 100644 --- a/packages/webapp/src/components/shared/data-table.tsx +++ b/packages/webapp/src/components/shared/data-table.tsx @@ -26,7 +26,6 @@ import { } from "@/components/ui/table" import { DataTablePagination } from "./data-table-pagination" -import { DataTableToolbar } from "./data-table-toolbar" interface DataTableProps { columns: ColumnDef[] @@ -69,7 +68,7 @@ export function DataTable({ return (
- + {/**/}
diff --git a/packages/webapp/src/components/ui/sheet.tsx b/packages/webapp/src/components/ui/sheet.tsx new file mode 100644 index 000000000..7df0d9be7 --- /dev/null +++ b/packages/webapp/src/components/ui/sheet.tsx @@ -0,0 +1,138 @@ +import * as React from "react" +import * as SheetPrimitive from "@radix-ui/react-dialog" +import { Cross2Icon } from "@radix-ui/react-icons" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const Sheet = SheetPrimitive.Root + +const SheetTrigger = SheetPrimitive.Trigger + +const SheetClose = SheetPrimitive.Close + +const SheetPortal = SheetPrimitive.Portal + +const SheetOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SheetOverlay.displayName = SheetPrimitive.Overlay.displayName + +const sheetVariants = cva( + "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500", + { + variants: { + side: { + top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", + bottom: + "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom", + left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm", + right: + "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm", + }, + }, + defaultVariants: { + side: "right", + }, + } +) + +interface SheetContentProps + extends React.ComponentPropsWithoutRef, + VariantProps {} + +const SheetContent = React.forwardRef< + React.ElementRef, + SheetContentProps +>(({ side = "right", className, children, ...props }, ref) => ( + + + + {children} + + + Close + + + +)) +SheetContent.displayName = SheetPrimitive.Content.displayName + +const SheetHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +SheetHeader.displayName = "SheetHeader" + +const SheetFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +SheetFooter.displayName = "SheetFooter" + +const SheetTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SheetTitle.displayName = SheetPrimitive.Title.displayName + +const SheetDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SheetDescription.displayName = SheetPrimitive.Description.displayName + +export { + Sheet, + SheetPortal, + SheetOverlay, + SheetTrigger, + SheetClose, + SheetContent, + SheetHeader, + SheetFooter, + SheetTitle, + SheetDescription, +}