snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)
This commit is contained in:
upstream-mirror
@@ -0,0 +1,360 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
|
||||
import { NavFavorites } from "@/registry/bases/base/blocks/sidebar-10/components/nav-favorites"
|
||||
import { NavMain } from "@/registry/bases/base/blocks/sidebar-10/components/nav-main"
|
||||
import { NavSecondary } from "@/registry/bases/base/blocks/sidebar-10/components/nav-secondary"
|
||||
import { NavWorkspaces } from "@/registry/bases/base/blocks/sidebar-10/components/nav-workspaces"
|
||||
import { TeamSwitcher } from "@/registry/bases/base/blocks/sidebar-10/components/team-switcher"
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarHeader,
|
||||
SidebarRail,
|
||||
} from "@/registry/bases/base/ui/sidebar"
|
||||
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
|
||||
|
||||
// This is sample data.
|
||||
const data = {
|
||||
teams: [
|
||||
{
|
||||
name: "Acme Inc",
|
||||
logo: (
|
||||
<IconPlaceholder
|
||||
lucide="TerminalIcon"
|
||||
tabler="IconCommand"
|
||||
hugeicons="CommandIcon"
|
||||
phosphor="CommandIcon"
|
||||
remixicon="RiCommandLine"
|
||||
/>
|
||||
),
|
||||
plan: "Enterprise",
|
||||
},
|
||||
{
|
||||
name: "Acme Corp.",
|
||||
logo: (
|
||||
<IconPlaceholder
|
||||
lucide="AudioLinesIcon"
|
||||
tabler="IconWaveSine"
|
||||
hugeicons="AudioWave01Icon"
|
||||
phosphor="WaveformIcon"
|
||||
remixicon="RiPulseLine"
|
||||
/>
|
||||
),
|
||||
plan: "Startup",
|
||||
},
|
||||
{
|
||||
name: "Evil Corp.",
|
||||
logo: (
|
||||
<IconPlaceholder
|
||||
lucide="TerminalIcon"
|
||||
tabler="IconCommand"
|
||||
hugeicons="CommandIcon"
|
||||
phosphor="CommandIcon"
|
||||
remixicon="RiCommandLine"
|
||||
/>
|
||||
),
|
||||
plan: "Free",
|
||||
},
|
||||
],
|
||||
navMain: [
|
||||
{
|
||||
title: "Search",
|
||||
url: "#",
|
||||
icon: (
|
||||
<IconPlaceholder
|
||||
lucide="SearchIcon"
|
||||
tabler="IconSearch"
|
||||
hugeicons="SearchIcon"
|
||||
phosphor="MagnifyingGlassIcon"
|
||||
remixicon="RiSearchLine"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Ask AI",
|
||||
url: "#",
|
||||
icon: (
|
||||
<IconPlaceholder
|
||||
lucide="SparklesIcon"
|
||||
tabler="IconSparkles"
|
||||
hugeicons="SparklesIcon"
|
||||
phosphor="SparkleIcon"
|
||||
remixicon="RiSparklingLine"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Home",
|
||||
url: "#",
|
||||
icon: (
|
||||
<IconPlaceholder
|
||||
lucide="HomeIcon"
|
||||
tabler="IconHome"
|
||||
hugeicons="HomeIcon"
|
||||
phosphor="HouseIcon"
|
||||
remixicon="RiHomeLine"
|
||||
/>
|
||||
),
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
title: "Inbox",
|
||||
url: "#",
|
||||
icon: (
|
||||
<IconPlaceholder
|
||||
lucide="InboxIcon"
|
||||
tabler="IconInbox"
|
||||
hugeicons="InboxIcon"
|
||||
phosphor="TrayIcon"
|
||||
remixicon="RiInboxLine"
|
||||
/>
|
||||
),
|
||||
badge: "10",
|
||||
},
|
||||
],
|
||||
navSecondary: [
|
||||
{
|
||||
title: "Calendar",
|
||||
url: "#",
|
||||
icon: (
|
||||
<IconPlaceholder
|
||||
lucide="CalendarIcon"
|
||||
tabler="IconCalendar"
|
||||
hugeicons="CalendarIcon"
|
||||
phosphor="CalendarIcon"
|
||||
remixicon="RiCalendarLine"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Settings",
|
||||
url: "#",
|
||||
icon: (
|
||||
<IconPlaceholder
|
||||
lucide="Settings2Icon"
|
||||
tabler="IconSettings"
|
||||
hugeicons="Settings05Icon"
|
||||
phosphor="GearIcon"
|
||||
remixicon="RiSettingsLine"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Templates",
|
||||
url: "#",
|
||||
icon: (
|
||||
<IconPlaceholder
|
||||
lucide="BlocksIcon"
|
||||
tabler="IconCube"
|
||||
hugeicons="CubeIcon"
|
||||
phosphor="CubeIcon"
|
||||
remixicon="RiBox3Line"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Trash",
|
||||
url: "#",
|
||||
icon: (
|
||||
<IconPlaceholder
|
||||
lucide="Trash2Icon"
|
||||
tabler="IconTrash"
|
||||
hugeicons="Delete02Icon"
|
||||
phosphor="TrashIcon"
|
||||
remixicon="RiDeleteBinLine"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Help",
|
||||
url: "#",
|
||||
icon: (
|
||||
<IconPlaceholder
|
||||
lucide="MessageCircleQuestionIcon"
|
||||
tabler="IconMessageQuestion"
|
||||
hugeicons="MessageQuestionIcon"
|
||||
phosphor="ChatCircleIcon"
|
||||
remixicon="RiQuestionLine"
|
||||
/>
|
||||
),
|
||||
},
|
||||
],
|
||||
favorites: [
|
||||
{
|
||||
name: "Project Management & Task Tracking",
|
||||
url: "#",
|
||||
emoji: "📊",
|
||||
},
|
||||
{
|
||||
name: "Family Recipe Collection & Meal Planning",
|
||||
url: "#",
|
||||
emoji: "🍳",
|
||||
},
|
||||
{
|
||||
name: "Fitness Tracker & Workout Routines",
|
||||
url: "#",
|
||||
emoji: "💪",
|
||||
},
|
||||
{
|
||||
name: "Book Notes & Reading List",
|
||||
url: "#",
|
||||
emoji: "📚",
|
||||
},
|
||||
{
|
||||
name: "Sustainable Gardening Tips & Plant Care",
|
||||
url: "#",
|
||||
emoji: "🌱",
|
||||
},
|
||||
{
|
||||
name: "Language Learning Progress & Resources",
|
||||
url: "#",
|
||||
emoji: "🗣️",
|
||||
},
|
||||
{
|
||||
name: "Home Renovation Ideas & Budget Tracker",
|
||||
url: "#",
|
||||
emoji: "🏠",
|
||||
},
|
||||
{
|
||||
name: "Personal Finance & Investment Portfolio",
|
||||
url: "#",
|
||||
emoji: "💰",
|
||||
},
|
||||
{
|
||||
name: "Movie & TV Show Watchlist with Reviews",
|
||||
url: "#",
|
||||
emoji: "🎬",
|
||||
},
|
||||
{
|
||||
name: "Daily Habit Tracker & Goal Setting",
|
||||
url: "#",
|
||||
emoji: "✅",
|
||||
},
|
||||
],
|
||||
workspaces: [
|
||||
{
|
||||
name: "Personal Life Management",
|
||||
emoji: "🏠",
|
||||
pages: [
|
||||
{
|
||||
name: "Daily Journal & Reflection",
|
||||
url: "#",
|
||||
emoji: "📔",
|
||||
},
|
||||
{
|
||||
name: "Health & Wellness Tracker",
|
||||
url: "#",
|
||||
emoji: "🍏",
|
||||
},
|
||||
{
|
||||
name: "Personal Growth & Learning Goals",
|
||||
url: "#",
|
||||
emoji: "🌟",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Professional Development",
|
||||
emoji: "💼",
|
||||
pages: [
|
||||
{
|
||||
name: "Career Objectives & Milestones",
|
||||
url: "#",
|
||||
emoji: "🎯",
|
||||
},
|
||||
{
|
||||
name: "Skill Acquisition & Training Log",
|
||||
url: "#",
|
||||
emoji: "🧠",
|
||||
},
|
||||
{
|
||||
name: "Networking Contacts & Events",
|
||||
url: "#",
|
||||
emoji: "🤝",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Creative Projects",
|
||||
emoji: "🎨",
|
||||
pages: [
|
||||
{
|
||||
name: "Writing Ideas & Story Outlines",
|
||||
url: "#",
|
||||
emoji: "✍️",
|
||||
},
|
||||
{
|
||||
name: "Art & Design Portfolio",
|
||||
url: "#",
|
||||
emoji: "🖼️",
|
||||
},
|
||||
{
|
||||
name: "Music Composition & Practice Log",
|
||||
url: "#",
|
||||
emoji: "🎵",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Home Management",
|
||||
emoji: "🏡",
|
||||
pages: [
|
||||
{
|
||||
name: "Household Budget & Expense Tracking",
|
||||
url: "#",
|
||||
emoji: "💰",
|
||||
},
|
||||
{
|
||||
name: "Home Maintenance Schedule & Tasks",
|
||||
url: "#",
|
||||
emoji: "🔧",
|
||||
},
|
||||
{
|
||||
name: "Family Calendar & Event Planning",
|
||||
url: "#",
|
||||
emoji: "📅",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Travel & Adventure",
|
||||
emoji: "🧳",
|
||||
pages: [
|
||||
{
|
||||
name: "Trip Planning & Itineraries",
|
||||
url: "#",
|
||||
emoji: "🗺️",
|
||||
},
|
||||
{
|
||||
name: "Travel Bucket List & Inspiration",
|
||||
url: "#",
|
||||
emoji: "🌎",
|
||||
},
|
||||
{
|
||||
name: "Travel Journal & Photo Gallery",
|
||||
url: "#",
|
||||
emoji: "📸",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
|
||||
return (
|
||||
<Sidebar className="border-r-0" {...props}>
|
||||
<SidebarHeader>
|
||||
<TeamSwitcher teams={data.teams} />
|
||||
<NavMain items={data.navMain} />
|
||||
</SidebarHeader>
|
||||
<SidebarContent>
|
||||
<NavFavorites favorites={data.favorites} />
|
||||
<NavWorkspaces workspaces={data.workspaces} />
|
||||
<NavSecondary items={data.navSecondary} className="mt-auto" />
|
||||
</SidebarContent>
|
||||
<SidebarRail />
|
||||
</Sidebar>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,252 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
|
||||
import { Button } from "@/registry/bases/base/ui/button"
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/registry/bases/base/ui/popover"
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
} from "@/registry/bases/base/ui/sidebar"
|
||||
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
|
||||
|
||||
const data = [
|
||||
[
|
||||
{
|
||||
label: "Customize Page",
|
||||
icon: (
|
||||
<IconPlaceholder
|
||||
lucide="Settings2Icon"
|
||||
tabler="IconSettings"
|
||||
hugeicons="Settings05Icon"
|
||||
phosphor="GearIcon"
|
||||
remixicon="RiSettingsLine"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Turn into wiki",
|
||||
icon: (
|
||||
<IconPlaceholder
|
||||
lucide="FileTextIcon"
|
||||
tabler="IconFileText"
|
||||
hugeicons="File01Icon"
|
||||
phosphor="FileTextIcon"
|
||||
remixicon="RiFileTextLine"
|
||||
/>
|
||||
),
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
label: "Copy Link",
|
||||
icon: (
|
||||
<IconPlaceholder
|
||||
lucide="LinkIcon"
|
||||
tabler="IconLink"
|
||||
hugeicons="LinkIcon"
|
||||
phosphor="LinkIcon"
|
||||
remixicon="RiLinksLine"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Duplicate",
|
||||
icon: (
|
||||
<IconPlaceholder
|
||||
lucide="CopyIcon"
|
||||
tabler="IconCopy"
|
||||
hugeicons="Copy01Icon"
|
||||
phosphor="CopyIcon"
|
||||
remixicon="RiFileCopyLine"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Move to",
|
||||
icon: (
|
||||
<IconPlaceholder
|
||||
lucide="CornerUpRightIcon"
|
||||
tabler="IconCornerUpRight"
|
||||
hugeicons="RedoIcon"
|
||||
phosphor="ArrowBendUpRightIcon"
|
||||
remixicon="RiCornerUpRightLine"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Move to Trash",
|
||||
icon: (
|
||||
<IconPlaceholder
|
||||
lucide="Trash2Icon"
|
||||
tabler="IconTrash"
|
||||
hugeicons="Delete02Icon"
|
||||
phosphor="TrashIcon"
|
||||
remixicon="RiDeleteBinLine"
|
||||
/>
|
||||
),
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
label: "Undo",
|
||||
icon: (
|
||||
<IconPlaceholder
|
||||
lucide="CornerUpLeftIcon"
|
||||
tabler="IconCornerUpLeft"
|
||||
hugeicons="UndoIcon"
|
||||
phosphor="ArrowBendUpLeftIcon"
|
||||
remixicon="RiCornerUpLeftLine"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "View analytics",
|
||||
icon: (
|
||||
<IconPlaceholder
|
||||
lucide="ChartLineIcon"
|
||||
tabler="IconChartLine"
|
||||
hugeicons="ChartIcon"
|
||||
phosphor="ChartLineIcon"
|
||||
remixicon="RiLineChartLine"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Version History",
|
||||
icon: (
|
||||
<IconPlaceholder
|
||||
lucide="GalleryVerticalEndIcon"
|
||||
tabler="IconLayoutRows"
|
||||
hugeicons="LayoutBottomIcon"
|
||||
phosphor="RowsIcon"
|
||||
remixicon="RiGalleryLine"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Show delete pages",
|
||||
icon: (
|
||||
<IconPlaceholder
|
||||
lucide="TrashIcon"
|
||||
tabler="IconTrash"
|
||||
hugeicons="DeleteIcon"
|
||||
phosphor="TrashIcon"
|
||||
remixicon="RiDeleteBinLine"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Notifications",
|
||||
icon: (
|
||||
<IconPlaceholder
|
||||
lucide="BellIcon"
|
||||
tabler="IconBell"
|
||||
hugeicons="NotificationIcon"
|
||||
phosphor="BellIcon"
|
||||
remixicon="RiNotificationLine"
|
||||
/>
|
||||
),
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
label: "Import",
|
||||
icon: (
|
||||
<IconPlaceholder
|
||||
lucide="ArrowUpIcon"
|
||||
tabler="IconArrowUp"
|
||||
hugeicons="ArrowUpIcon"
|
||||
phosphor="ArrowUpIcon"
|
||||
remixicon="RiArrowUpLine"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Export",
|
||||
icon: (
|
||||
<IconPlaceholder
|
||||
lucide="ArrowDownIcon"
|
||||
tabler="IconArrowDown"
|
||||
hugeicons="ArrowDownIcon"
|
||||
phosphor="ArrowDownIcon"
|
||||
remixicon="RiArrowDownLine"
|
||||
/>
|
||||
),
|
||||
},
|
||||
],
|
||||
]
|
||||
export function NavActions() {
|
||||
const [isOpen, setIsOpen] = React.useState(false)
|
||||
React.useEffect(() => {
|
||||
setIsOpen(true)
|
||||
}, [])
|
||||
return (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<div className="hidden font-medium text-muted-foreground md:inline-block">
|
||||
Edit Oct 08
|
||||
</div>
|
||||
<Button variant="ghost" size="icon" className="h-7 w-7">
|
||||
<IconPlaceholder
|
||||
lucide="StarIcon"
|
||||
tabler="IconStar"
|
||||
hugeicons="StarIcon"
|
||||
phosphor="StarIcon"
|
||||
remixicon="RiStarLine"
|
||||
/>
|
||||
</Button>
|
||||
<Popover open={isOpen} onOpenChange={setIsOpen}>
|
||||
<PopoverTrigger
|
||||
render={
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 data-open:bg-accent"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<IconPlaceholder
|
||||
lucide="MoreHorizontalIcon"
|
||||
tabler="IconDots"
|
||||
hugeicons="MoreHorizontalCircle01Icon"
|
||||
phosphor="DotsThreeOutlineIcon"
|
||||
remixicon="RiMoreLine"
|
||||
/>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="w-56 overflow-hidden rounded-lg p-0"
|
||||
align="end"
|
||||
>
|
||||
<Sidebar collapsible="none" className="bg-transparent">
|
||||
<SidebarContent>
|
||||
{data.map((group, index) => (
|
||||
<SidebarGroup key={index} className="border-b last:border-none">
|
||||
<SidebarGroupContent className="gap-0">
|
||||
<SidebarMenu>
|
||||
{group.map((item, index) => (
|
||||
<SidebarMenuItem key={index}>
|
||||
<SidebarMenuButton>
|
||||
{item.icon} <span>{item.label}</span>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
))}
|
||||
</SidebarContent>
|
||||
</Sidebar>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/registry/bases/base/ui/dropdown-menu"
|
||||
import {
|
||||
SidebarGroup,
|
||||
SidebarGroupLabel,
|
||||
SidebarMenu,
|
||||
SidebarMenuAction,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
useSidebar,
|
||||
} from "@/registry/bases/base/ui/sidebar"
|
||||
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
|
||||
|
||||
export function NavFavorites({
|
||||
favorites,
|
||||
}: {
|
||||
favorites: {
|
||||
name: string
|
||||
url: string
|
||||
emoji: string
|
||||
}[]
|
||||
}) {
|
||||
const { isMobile } = useSidebar()
|
||||
return (
|
||||
<SidebarGroup className="group-data-[collapsible=icon]:hidden">
|
||||
<SidebarGroupLabel>Favorites</SidebarGroupLabel>
|
||||
<SidebarMenu>
|
||||
{favorites.map((item) => (
|
||||
<SidebarMenuItem key={item.name}>
|
||||
<SidebarMenuButton render={<a href={item.url} title={item.name} />}>
|
||||
<span>{item.emoji}</span>
|
||||
<span>{item.name}</span>
|
||||
</SidebarMenuButton>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
render={
|
||||
<SidebarMenuAction
|
||||
showOnHover
|
||||
className="aria-expanded:bg-muted"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<IconPlaceholder
|
||||
lucide="MoreHorizontalIcon"
|
||||
tabler="IconDots"
|
||||
hugeicons="MoreHorizontalCircle01Icon"
|
||||
phosphor="DotsThreeOutlineIcon"
|
||||
remixicon="RiMoreLine"
|
||||
/>
|
||||
<span className="sr-only">More</span>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
className="w-56 rounded-lg"
|
||||
side={isMobile ? "bottom" : "right"}
|
||||
align={isMobile ? "end" : "start"}
|
||||
>
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem>
|
||||
<IconPlaceholder
|
||||
lucide="StarOffIcon"
|
||||
tabler="IconStarOff"
|
||||
hugeicons="StarOffIcon"
|
||||
phosphor="StarIcon"
|
||||
remixicon="RiStarOffLine"
|
||||
className="text-muted-foreground"
|
||||
/>
|
||||
<span>Remove from Favorites</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem>
|
||||
<IconPlaceholder
|
||||
lucide="LinkIcon"
|
||||
tabler="IconLink"
|
||||
hugeicons="LinkIcon"
|
||||
phosphor="LinkIcon"
|
||||
remixicon="RiLinksLine"
|
||||
className="text-muted-foreground"
|
||||
/>
|
||||
<span>Copy Link</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<IconPlaceholder
|
||||
lucide="ArrowUpRightIcon"
|
||||
tabler="IconArrowUpRight"
|
||||
hugeicons="ArrowUpRightIcon"
|
||||
phosphor="ArrowUpRightIcon"
|
||||
remixicon="RiArrowRightUpLine"
|
||||
className="text-muted-foreground"
|
||||
/>
|
||||
<span>Open in New Tab</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>
|
||||
<IconPlaceholder
|
||||
lucide="Trash2Icon"
|
||||
tabler="IconTrash"
|
||||
hugeicons="Delete02Icon"
|
||||
phosphor="TrashIcon"
|
||||
remixicon="RiDeleteBinLine"
|
||||
className="text-muted-foreground"
|
||||
/>
|
||||
<span>Delete</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton className="text-sidebar-foreground/70">
|
||||
<IconPlaceholder
|
||||
lucide="MoreHorizontalIcon"
|
||||
tabler="IconDots"
|
||||
hugeicons="MoreHorizontalCircle01Icon"
|
||||
phosphor="DotsThreeOutlineIcon"
|
||||
remixicon="RiMoreLine"
|
||||
/>
|
||||
<span>More</span>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarGroup>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
} from "@/registry/bases/base/ui/sidebar"
|
||||
|
||||
export function NavMain({
|
||||
items,
|
||||
}: {
|
||||
items: {
|
||||
title: string
|
||||
url: string
|
||||
icon: React.ReactNode
|
||||
isActive?: boolean
|
||||
}[]
|
||||
}) {
|
||||
return (
|
||||
<SidebarMenu>
|
||||
{items.map((item) => (
|
||||
<SidebarMenuItem key={item.title}>
|
||||
<SidebarMenuButton
|
||||
isActive={item.isActive}
|
||||
render={<a href={item.url} />}
|
||||
>
|
||||
{item.icon}
|
||||
<span>{item.title}</span>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
"use client"
|
||||
|
||||
import React from "react"
|
||||
|
||||
import {
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
SidebarMenu,
|
||||
SidebarMenuBadge,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
} from "@/registry/bases/base/ui/sidebar"
|
||||
|
||||
export function NavSecondary({
|
||||
items,
|
||||
...props
|
||||
}: {
|
||||
items: {
|
||||
title: string
|
||||
url: string
|
||||
icon: React.ReactNode
|
||||
badge?: React.ReactNode
|
||||
}[]
|
||||
} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
|
||||
return (
|
||||
<SidebarGroup {...props}>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{items.map((item) => (
|
||||
<SidebarMenuItem key={item.title}>
|
||||
<SidebarMenuButton render={<a href={item.url} />}>
|
||||
{item.icon}
|
||||
<span>{item.title}</span>
|
||||
</SidebarMenuButton>
|
||||
{item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/registry/bases/base/ui/collapsible"
|
||||
import {
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
SidebarGroupLabel,
|
||||
SidebarMenu,
|
||||
SidebarMenuAction,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarMenuSub,
|
||||
SidebarMenuSubButton,
|
||||
SidebarMenuSubItem,
|
||||
} from "@/registry/bases/base/ui/sidebar"
|
||||
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
|
||||
|
||||
export function NavWorkspaces({
|
||||
workspaces,
|
||||
}: {
|
||||
workspaces: {
|
||||
name: string
|
||||
emoji: React.ReactNode
|
||||
pages: {
|
||||
name: string
|
||||
emoji: React.ReactNode
|
||||
}[]
|
||||
}[]
|
||||
}) {
|
||||
return (
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>Workspaces</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{workspaces.map((workspace) => (
|
||||
<Collapsible key={workspace.name}>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton render={<a href="#" />}>
|
||||
<span>{workspace.emoji}</span>
|
||||
<span>{workspace.name}</span>
|
||||
</SidebarMenuButton>
|
||||
<SidebarMenuAction
|
||||
render={<CollapsibleTrigger />}
|
||||
className="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-open:rotate-90"
|
||||
showOnHover
|
||||
>
|
||||
<IconPlaceholder
|
||||
lucide="ChevronRightIcon"
|
||||
tabler="IconChevronRight"
|
||||
hugeicons="ArrowRight01Icon"
|
||||
phosphor="CaretRightIcon"
|
||||
remixicon="RiArrowRightSLine"
|
||||
/>
|
||||
</SidebarMenuAction>
|
||||
<SidebarMenuAction showOnHover>
|
||||
<IconPlaceholder
|
||||
lucide="PlusIcon"
|
||||
tabler="IconPlus"
|
||||
hugeicons="PlusSignIcon"
|
||||
phosphor="PlusIcon"
|
||||
remixicon="RiAddLine"
|
||||
/>
|
||||
</SidebarMenuAction>
|
||||
<CollapsibleContent>
|
||||
<SidebarMenuSub>
|
||||
{workspace.pages.map((page) => (
|
||||
<SidebarMenuSubItem key={page.name}>
|
||||
<SidebarMenuSubButton render={<a href="#" />}>
|
||||
<span>{page.emoji}</span>
|
||||
<span>{page.name}</span>
|
||||
</SidebarMenuSubButton>
|
||||
</SidebarMenuSubItem>
|
||||
))}
|
||||
</SidebarMenuSub>
|
||||
</CollapsibleContent>
|
||||
</SidebarMenuItem>
|
||||
</Collapsible>
|
||||
))}
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton className="text-sidebar-foreground/70">
|
||||
<IconPlaceholder
|
||||
lucide="MoreHorizontalIcon"
|
||||
tabler="IconDots"
|
||||
hugeicons="MoreHorizontalCircle01Icon"
|
||||
phosphor="DotsThreeOutlineIcon"
|
||||
remixicon="RiMoreLine"
|
||||
/>
|
||||
<span>More</span>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/registry/bases/base/ui/dropdown-menu"
|
||||
import {
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
} from "@/registry/bases/base/ui/sidebar"
|
||||
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
|
||||
|
||||
export function TeamSwitcher({
|
||||
teams,
|
||||
}: {
|
||||
teams: {
|
||||
name: string
|
||||
logo: React.ReactNode
|
||||
plan: string
|
||||
}[]
|
||||
}) {
|
||||
const [activeTeam, setActiveTeam] = React.useState(teams[0])
|
||||
if (!activeTeam) {
|
||||
return null
|
||||
}
|
||||
return (
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
render={<SidebarMenuButton className="w-fit px-1.5" />}
|
||||
>
|
||||
<div className="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
|
||||
{activeTeam.logo}
|
||||
</div>
|
||||
<span className="truncate font-medium">{activeTeam.name}</span>
|
||||
<IconPlaceholder
|
||||
lucide="ChevronDownIcon"
|
||||
tabler="IconChevronDown"
|
||||
hugeicons="ArrowDown01Icon"
|
||||
phosphor="CaretDownIcon"
|
||||
remixicon="RiArrowDownSLine"
|
||||
className="opacity-50"
|
||||
/>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
className="w-64 rounded-lg"
|
||||
align="start"
|
||||
side="bottom"
|
||||
sideOffset={4}
|
||||
>
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuLabel className="text-xs text-muted-foreground">
|
||||
Teams
|
||||
</DropdownMenuLabel>
|
||||
{teams.map((team, index) => (
|
||||
<DropdownMenuItem
|
||||
key={team.name}
|
||||
onClick={() => setActiveTeam(team)}
|
||||
className="gap-2 p-2"
|
||||
>
|
||||
<div className="flex size-6 items-center justify-center rounded-xs border">
|
||||
{team.logo}
|
||||
</div>
|
||||
{team.name}
|
||||
<DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuGroup>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem className="gap-2 p-2">
|
||||
<div className="flex size-6 items-center justify-center rounded-md border bg-background">
|
||||
<IconPlaceholder
|
||||
lucide="PlusIcon"
|
||||
tabler="IconPlus"
|
||||
hugeicons="PlusSignIcon"
|
||||
phosphor="PlusIcon"
|
||||
remixicon="RiAddLine"
|
||||
className="size-4"
|
||||
/>
|
||||
</div>
|
||||
<div className="font-medium text-muted-foreground">
|
||||
Add team
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
)
|
||||
}
|
||||
49
apps/v4/registry/bases/base/blocks/sidebar-10/page.tsx
Normal file
49
apps/v4/registry/bases/base/blocks/sidebar-10/page.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import { AppSidebar } from "@/registry/bases/base/blocks/sidebar-10/components/app-sidebar"
|
||||
import { NavActions } from "@/registry/bases/base/blocks/sidebar-10/components/nav-actions"
|
||||
import {
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbList,
|
||||
BreadcrumbPage,
|
||||
} from "@/registry/bases/base/ui/breadcrumb"
|
||||
import { Separator } from "@/registry/bases/base/ui/separator"
|
||||
import {
|
||||
SidebarInset,
|
||||
SidebarProvider,
|
||||
SidebarTrigger,
|
||||
} from "@/registry/bases/base/ui/sidebar"
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<SidebarProvider>
|
||||
<AppSidebar />
|
||||
<SidebarInset>
|
||||
<header className="flex h-14 shrink-0 items-center gap-2">
|
||||
<div className="flex flex-1 items-center gap-2 px-3">
|
||||
<SidebarTrigger />
|
||||
<Separator
|
||||
orientation="vertical"
|
||||
className="mr-2 data-vertical:h-4 data-vertical:self-auto"
|
||||
/>
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbPage className="line-clamp-1">
|
||||
Project Management & Task Tracking
|
||||
</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
</div>
|
||||
<div className="ml-auto px-3">
|
||||
<NavActions />
|
||||
</div>
|
||||
</header>
|
||||
<div className="flex flex-1 flex-col gap-4 px-4 py-10">
|
||||
<div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
|
||||
<div className="mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50" />
|
||||
</div>
|
||||
</SidebarInset>
|
||||
</SidebarProvider>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user