calendars.tsx — ui Source File
Architecture documentation for calendars.tsx, a tsx file in the ui codebase. 4 imports, 0 dependents.
Entity Profile
Dependency Diagram
graph LR 667178f0_6397_d8a7_9aab_3b5ae2f1a776["calendars.tsx"] 1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"] 667178f0_6397_d8a7_9aab_3b5ae2f1a776 --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2 d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3["lucide-react"] 667178f0_6397_d8a7_9aab_3b5ae2f1a776 --> d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3 15033e2e_6724_b8b6_29a9_beac566a0689["collapsible"] 667178f0_6397_d8a7_9aab_3b5ae2f1a776 --> 15033e2e_6724_b8b6_29a9_beac566a0689 742f06fb_c1e8_243e_1fc4_8b1cf11704c2["sidebar"] 667178f0_6397_d8a7_9aab_3b5ae2f1a776 --> 742f06fb_c1e8_243e_1fc4_8b1cf11704c2 style 667178f0_6397_d8a7_9aab_3b5ae2f1a776 fill:#6366f1,stroke:#818cf8,color:#fff
Relationship Graph
Source Code
import * as React from "react"
import { Check, ChevronRight } from "lucide-react"
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/registry/default/ui/collapsible"
import {
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarSeparator,
} from "@/registry/default/ui/sidebar"
export function Calendars({
calendars,
}: {
calendars: {
name: string
items: string[]
}[]
}) {
return (
<>
{calendars.map((calendar, index) => (
<React.Fragment key={calendar.name}>
<SidebarGroup key={calendar.name} className="py-0">
<Collapsible
defaultOpen={index === 0}
className="group/collapsible"
>
<SidebarGroupLabel
asChild
className="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
>
<CollapsibleTrigger>
{calendar.name}{" "}
<ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
</CollapsibleTrigger>
</SidebarGroupLabel>
<CollapsibleContent>
<SidebarGroupContent>
<SidebarMenu>
{calendar.items.map((item, index) => (
<SidebarMenuItem key={item}>
<SidebarMenuButton>
<div
data-active={index < 2}
className="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
>
<Check className="hidden size-3 group-data-[active=true]/calendar-item:block" />
</div>
{item}
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</CollapsibleContent>
</Collapsible>
</SidebarGroup>
<SidebarSeparator className="mx-0" />
</React.Fragment>
))}
</>
)
}
Domain
Subdomains
Functions
Dependencies
- collapsible
- lucide-react
- react
- sidebar
Source
Frequently Asked Questions
What does calendars.tsx do?
calendars.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, ChartRegistry subdomain.
What functions are defined in calendars.tsx?
calendars.tsx defines 1 function(s): Calendars.
What does calendars.tsx depend on?
calendars.tsx imports 4 module(s): collapsible, lucide-react, react, sidebar.
Where is calendars.tsx in the architecture?
calendars.tsx is located at deprecated/www/registry/default/blocks/sidebar-12/components/calendars.tsx (domain: ComponentRegistry, subdomain: ChartRegistry, directory: deprecated/www/registry/default/blocks/sidebar-12/components).
Analyze Your Own Codebase
Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.
Try Supermodel Free