CodeSandBox/judge4c-old
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(playground): refactor PlaygroundSidebar component by removing unused changes section and reorganizing imports

Browse Source
This commit is contained in:
ngc2207 2024-12-13 17:57:39 +08:00
parent 1aba2bdc0f
commit a872a33052
1 changed files with 9 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/app/playground/components/playground-sidebar.tsx
View File

@ -1,10 +1,4 @@
import * as React from "react"; import * as React from "react";
import { ChevronRight, File, Folder } from "lucide-react";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { import {
Sidebar, Sidebar,
SidebarContent, SidebarContent,
@ -12,28 +6,19 @@ import {
SidebarGroupContent, SidebarGroupContent,
SidebarGroupLabel, SidebarGroupLabel,
SidebarMenu, SidebarMenu,
SidebarMenuBadge,
SidebarMenuButton, SidebarMenuButton,
SidebarMenuItem, SidebarMenuItem,
SidebarMenuSub, SidebarMenuSub,
SidebarRail, SidebarRail,
} from "@/components/ui/sidebar"; } from "@/components/ui/sidebar";
// This is sample data. import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { ChevronRight, File, Folder } from "lucide-react";
const data = { const data = {
changes: [
{
file: "README.md",
state: "M",
},
{
file: "api/hello/route.ts",
state: "U",
},
{
file: "app/layout.tsx",
state: "M",
},
],
tree: [ tree: [
[ [
"app", "app",
@ -61,28 +46,13 @@ const data = {
"README.md", "README.md",
], ],
}; };
export function PlaygroundSidebar({ export function PlaygroundSidebar({
...props ...props
}: React.ComponentProps<typeof Sidebar>) { }: React.ComponentProps<typeof Sidebar>) {
return ( return (
<Sidebar {...props}> <Sidebar {...props}>
<SidebarContent> <SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Changes</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{data.changes.map((item, index) => (
<SidebarMenuItem key={index}>
<SidebarMenuButton>
<File />
{item.file}
</SidebarMenuButton>
<SidebarMenuBadge>{item.state}</SidebarMenuBadge>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
<SidebarGroup> <SidebarGroup>
<SidebarGroupLabel>Files</SidebarGroupLabel> <SidebarGroupLabel>Files</SidebarGroupLabel>
<SidebarGroupContent> <SidebarGroupContent>
@ -98,6 +68,7 @@ export function PlaygroundSidebar({
</Sidebar> </Sidebar>
); );
} }
function Tree({ item }: { item: string | any[] }) { function Tree({ item }: { item: string | any[] }) {
const [name, ...items] = Array.isArray(item) ? item : [item]; const [name, ...items] = Array.isArray(item) ? item : [item];
if (!items.length) { if (!items.length) {