-
Notifications
You must be signed in to change notification settings - Fork 195
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
268 additions
and
15 deletions.
There are no files selected for viewing
99 changes: 99 additions & 0 deletions
99
packages/webapp/src/components/dashboard/components/main-nav-sm.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<string>("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 ( | ||
| <div className="flex flex-row mx-0 px-0"> | ||
| <Sheet key={"left"} open={open}> | ||
| <SheetTrigger asChild className=" ml-4 mt-4"> | ||
| <Button variant="outline" onClick={()=> setOpen(true)}><MenuIcon className="h-6 w-6" /></Button> | ||
| </SheetTrigger> | ||
| <SheetContent side={"left"} className="p-0"> | ||
| <SheetHeader> | ||
| <SheetTitle className="mx-4 my-4"> | ||
| <img src="logo.png" className="w-16"/> <span className="font-bold">Panora.</span> | ||
| </SheetTitle> | ||
| </SheetHeader> | ||
| <nav | ||
| className={`flex flex-col items-start mt-6`} | ||
| > | ||
| <a | ||
| className={navItemClassName('quickstart')} | ||
| onClick={() => click('quickstart')} | ||
| > | ||
| <p className="mx-4">Quick Start</p> | ||
| </a> | ||
| <a | ||
| className={navItemClassName('dashboard')} | ||
| onClick={() => click('dashboard')} | ||
| > | ||
| <p className="mx-4">Dashboard</p> | ||
| </a> | ||
| <a | ||
| className={navItemClassName('jobs')} | ||
| onClick={() => click('jobs')} | ||
| > | ||
| <p className="mx-4">Jobs</p> | ||
|
|
||
| </a> | ||
| <a | ||
| className={navItemClassName('connections')} | ||
| onClick={() => click('connections')} | ||
| > | ||
| <p className="mx-4">Connections</p> | ||
| </a> | ||
| <a | ||
| className={navItemClassName('configuration')} | ||
| onClick={() => click('configuration')} | ||
| > | ||
| <p className="mx-4">Configuration</p> | ||
| </a> | ||
| <a | ||
| className={navItemClassName('api-keys')} | ||
| onClick={() => click('api-keys')} | ||
| > | ||
| <p className="mx-4">API Keys</p> | ||
| </a> | ||
| <a | ||
| className={`${navItemClassName('docs')} flex items-center`} | ||
| href="https://docs.panora.dev/" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <p className="mx-4">Docs</p> | ||
| <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 2C2.44772 2 2 2.44772 2 3V12C2 12.5523 2.44772 13 3 13H12C12.5523 13 13 12.5523 13 12V8.5C13 8.22386 12.7761 8 12.5 8C12.2239 8 12 8.22386 12 8.5V12H3V3L6.5 3C6.77614 3 7 2.77614 7 2.5C7 2.22386 6.77614 2 6.5 2H3ZM12.8536 2.14645C12.9015 2.19439 12.9377 2.24964 12.9621 2.30861C12.9861 2.36669 12.9996 2.4303 13 2.497L13 2.5V2.50049V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70711L6.85355 8.85355C6.65829 9.04882 6.34171 9.04882 6.14645 8.85355C5.95118 8.65829 5.95118 8.34171 6.14645 8.14645L11.2929 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.4999H12.5C12.5678 2 12.6324 2.01349 12.6914 2.03794C12.7504 2.06234 12.8056 2.09851 12.8536 2.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg> | ||
| </a> | ||
| {/* Add other nav items as needed */} | ||
| </nav> | ||
| </SheetContent> | ||
| </Sheet> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<typeof SheetPrimitive.Overlay>, | ||
| React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SheetPrimitive.Overlay | ||
| className={cn( | ||
| "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", | ||
| className | ||
| )} | ||
| {...props} | ||
| ref={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<typeof SheetPrimitive.Content>, | ||
| VariantProps<typeof sheetVariants> {} | ||
|
|
||
| const SheetContent = React.forwardRef< | ||
| React.ElementRef<typeof SheetPrimitive.Content>, | ||
| SheetContentProps | ||
| >(({ side = "right", className, children, ...props }, ref) => ( | ||
| <SheetPortal> | ||
| <SheetOverlay /> | ||
| <SheetPrimitive.Content | ||
| ref={ref} | ||
| className={cn(sheetVariants({ side }), className)} | ||
| {...props} | ||
| > | ||
| {children} | ||
| <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"> | ||
| <Cross2Icon className="h-4 w-4" /> | ||
| <span className="sr-only">Close</span> | ||
| </SheetPrimitive.Close> | ||
| </SheetPrimitive.Content> | ||
| </SheetPortal> | ||
| )) | ||
| SheetContent.displayName = SheetPrimitive.Content.displayName | ||
|
|
||
| const SheetHeader = ({ | ||
| className, | ||
| ...props | ||
| }: React.HTMLAttributes<HTMLDivElement>) => ( | ||
| <div | ||
| className={cn( | ||
| "flex flex-col space-y-2 text-center sm:text-left", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| ) | ||
| SheetHeader.displayName = "SheetHeader" | ||
|
|
||
| const SheetFooter = ({ | ||
| className, | ||
| ...props | ||
| }: React.HTMLAttributes<HTMLDivElement>) => ( | ||
| <div | ||
| className={cn( | ||
| "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| ) | ||
| SheetFooter.displayName = "SheetFooter" | ||
|
|
||
| const SheetTitle = React.forwardRef< | ||
| React.ElementRef<typeof SheetPrimitive.Title>, | ||
| React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SheetPrimitive.Title | ||
| ref={ref} | ||
| className={cn("text-lg font-semibold text-foreground", className)} | ||
| {...props} | ||
| /> | ||
| )) | ||
| SheetTitle.displayName = SheetPrimitive.Title.displayName | ||
|
|
||
| const SheetDescription = React.forwardRef< | ||
| React.ElementRef<typeof SheetPrimitive.Description>, | ||
| React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SheetPrimitive.Description | ||
| ref={ref} | ||
| className={cn("text-sm text-muted-foreground", className)} | ||
| {...props} | ||
| /> | ||
| )) | ||
| SheetDescription.displayName = SheetPrimitive.Description.displayName | ||
|
|
||
| export { | ||
| Sheet, | ||
| SheetPortal, | ||
| SheetOverlay, | ||
| SheetTrigger, | ||
| SheetClose, | ||
| SheetContent, | ||
| SheetHeader, | ||
| SheetFooter, | ||
| SheetTitle, | ||
| SheetDescription, | ||
| } |