[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" import { FiltersSidebar } from "@/components/filters-sidebar" import { MainNav } from "@/components/main-nav" import { Sidebar } from "@/components/sidebar" import type React from "react" // Import React export default function Layout({ children }: { children: React.ReactNode }) { return (

{/* Left Sidebar */} {/* Main Content */}

{/* Breadcrumb */}

{/* Content Area */}

{children}

{/* Right Sidebar - Filters */}

) } [V0_FILE]typescriptreact:file="components/main-nav.tsx" import { BarChart2, FileText, Settings, User } from "lucide-react" import Link from "next/link" export function MainNav() { return (

) } [V0_FILE]typescriptreact:file="components/sidebar.tsx" isFixed="true" isQuickEdit="true" import type React from "react" import { cn } from "@/lib/utils" interface SidebarProps extends React.HTMLAttributes { children?: React.ReactNode } export function Sidebar({ className, children, ...props }: SidebarProps) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isQuickEdit="true" import Layout from "./layout" export default function Page() { return ( {/* Your page content goes here */}

Welcome to Project Sushi

{/* Add more content as needed */}

) } [V0_FILE]typescriptreact:file="components/filters-sidebar.tsx" import { FiltersSidebarContent } from "./filters-sidebar-content" export function FiltersSidebar() { return (

) } [V0_FILE]typescriptreact:file="components/filters-sidebar-content.tsx" "use client" import { Search, X, ChevronRight } from "lucide-react" import * as React from "react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { ScrollArea } from "@/components/ui/scroll-area" interface FilterSection { title: string items: string[] } const selectSections: FilterSection[] = [ { title: "Current Deal Files", items: [ "Exacta DDQ (2023 3Q) - 20240102.pdf", "Appendix 2. Portfolio Updates Table.xlsx", "Exacta - Summary 20240102.pdf", ], }, { title: "Other Deals", items: ["Deal A", "Deal B", "Deal C"], }, { title: "Managers", items: ["Manager 1", "Manager 2", "Manager 3"], }, { title: "Global Files", items: ["Global File 1", "Global File 2", "Global File 3"], }, ] const filterSections: FilterSection[] = [ { title: "Document Type", items: ["PDF", "Excel", "Word", "PowerPoint"], }, { title: "Sector", items: ["Technology", "Healthcare", "Finance", "Energy"], }, { title: "Geography", items: ["North America", "Europe", "Asia", "South America"], }, ] export function FiltersSidebarContent() { const [selectSearchQuery, setSelectSearchQuery] = React.useState("") const [filterSearchQuery, setFilterSearchQuery] = React.useState("") return (

Select files from

setSelectSearchQuery(e.target.value)} className="pl-8 pr-8" /> {selectSearchQuery && ( )}

{selectSections.map((section) => ( ))}

Filter files by

setFilterSearchQuery(e.target.value)} className="pl-8 pr-8" /> {filterSearchQuery && ( )}

{filterSections.map((section) => ( ))}

) } function FilterSection({ section, searchQuery }: { section: FilterSection; searchQuery: string }) { const [isOpen, setIsOpen] = React.useState(true) const [selectedItems, setSelectedItems] = React.useState>(new Set()) const filteredItems = section.items.filter((item) => item.toLowerCase().includes(searchQuery.toLowerCase())) const handleSelectAll = () => { setSelectedItems(new Set(filteredItems)) } const handleUnselectAll = () => { setSelectedItems(new Set()) } const toggleItem = (item: string) => { const newSelected = new Set(selectedItems) if (newSelected.has(item)) { newSelected.delete(item) } else { newSelected.add(item) } setSelectedItems(newSelected) } return (

{section.title}

{selectedItems.size} / {filteredItems.length}

{filteredItems.map((item) => (

toggleItem(item)} className="mt-1 h-4 w-4 rounded border-gray-300" /> {item}

))}

) }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This