Skip to content

Commit e0cc4f5

Browse files
robertoraggirobertoraggi
committed
Add a placeholder for the sidebar
1 parent 41b5451 commit e0cc4f5

File tree

16 files changed

+1879
-30
lines changed

16 files changed

+1879
-30
lines changed

‎package-lock.json‎

Lines changed: 698 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/cxx-playground/.prettierignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
src/lib/utils.ts
2+
src/hooks/use-mobile.ts
23
src/components/*

‎packages/cxx-playground/eslint.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export default tseslint.config([
99
globalIgnores(["dist"]),
1010
{
1111
files: ["**/*.{ts,tsx}"],
12+
ignores: ["src/components/ui/**", "src/hooks/**"],
1213
extends: [
1314
js.configs.recommended,
1415
tseslint.configs.recommended,

‎packages/cxx-playground/package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13+
"@radix-ui/react-dialog": "^1.1.14",
14+
"@radix-ui/react-separator": "^1.1.7",
15+
"@radix-ui/react-slot": "^1.2.3",
16+
"@radix-ui/react-tooltip": "^1.2.7",
1317
"class-variance-authority": "^0.7.1",
1418
"clsx": "^2.1.1",
1519
"lucide-react": "^0.525.0",

‎packages/cxx-playground/src/App.tsx‎

Lines changed: 29 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,9 @@ import {
3131
ResizablePanel,
3232
ResizablePanelGroup,
3333
} from "@/components/ui/resizable";
34+
import { SidebarProvider } from "@/components/ui/sidebar";
35+
import AppSidebar from "./app-sidebar";
36+
3437
import * as monaco from "monaco-editor";
3538

3639
window.MonacoEnvironment = {
@@ -54,29 +57,32 @@ function App() {
5457
const model = monaco.editor.createModel(DEFAULT_VALUE, "cpp");
5558

5659
return (
57-
<div className="w-svw h-svh">
58-
<QueryClientProvider client={queryClient}>
59-
<CxxProvider fallback={<div />}>
60-
<ModelProvider model={model}>
61-
<EditorProvider model={model}>
62-
<ASTProvider model={model} interval={interval}>
63-
<ResizablePanelGroup
64-
direction="horizontal"
65-
className="w-full h-full"
66-
>
67-
<ResizablePanel className="min-w-1/4">
68-
<Editor />
69-
</ResizablePanel>
70-
<ResizableHandle />
71-
<ResizablePanel className="min-w-1/4" defaultSize={35}>
72-
<AbstractSyntaxTree />
73-
</ResizablePanel>
74-
</ResizablePanelGroup>
75-
</ASTProvider>
76-
</EditorProvider>
77-
</ModelProvider>
78-
</CxxProvider>
79-
</QueryClientProvider>
60+
<div className="w-svw h-svh flex">
61+
<SidebarProvider>
62+
<QueryClientProvider client={queryClient}>
63+
<CxxProvider fallback={<div />}>
64+
<ModelProvider model={model}>
65+
<EditorProvider model={model}>
66+
<ASTProvider model={model} interval={interval}>
67+
<AppSidebar />
68+
<ResizablePanelGroup
69+
direction="horizontal"
70+
className="w-full h-full"
71+
>
72+
<ResizablePanel className="min-w-1/5">
73+
<Editor />
74+
</ResizablePanel>
75+
<ResizableHandle />
76+
<ResizablePanel className="min-w-1/5" defaultSize={35}>
77+
<AbstractSyntaxTree />
78+
</ResizablePanel>
79+
</ResizablePanelGroup>
80+
</ASTProvider>
81+
</EditorProvider>
82+
</ModelProvider>
83+
</CxxProvider>
84+
</QueryClientProvider>
85+
</SidebarProvider>
8086
</div>
8187
);
8288
}

‎packages/cxx-playground/src/app-sidebar.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
// Copyright (c) 2025 Roberto Raggi <[email protected]>
2+
//
3+
// Permission is hereby granted, free of charge, to any person obtaining a copy
4+
// of this software and associated documentation files (the "Software"), to deal
5+
// in the Software without restriction, including without limitation the rights
6+
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7+
// copies of the Software, and to permit persons to whom the Software is
8+
// furnished to do so, subject to the following conditions:
9+
//
10+
// The above copyright notice and this permission notice shall be included in
11+
// all copies or substantial portions of the Software.
12+
//
13+
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14+
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15+
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16+
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17+
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18+
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19+
// SOFTWARE.
20+
21+
import { BracesIcon } from "lucide-react";
22+
import {
23+
Sidebar,
24+
SidebarContent,
25+
SidebarFooter,
26+
SidebarGroup,
27+
SidebarGroupContent,
28+
SidebarGroupLabel,
29+
SidebarHeader,
30+
SidebarMenu,
31+
SidebarMenuButton,
32+
SidebarMenuItem,
33+
} from "@/components/ui/sidebar";
34+
35+
function AppSidebar() {
36+
const codeItems = [
37+
{
38+
name: "main.cc",
39+
icon: BracesIcon,
40+
url: "#",
41+
},
42+
];
43+
44+
return (
45+
<Sidebar>
46+
<SidebarHeader />
47+
<SidebarContent>
48+
<SidebarGroup>
49+
<SidebarGroupLabel>Code</SidebarGroupLabel>
50+
<SidebarGroupContent>
51+
<SidebarMenu>
52+
{codeItems.map((item) => (
53+
<SidebarMenuItem key={item.name}>
54+
<SidebarMenuButton asChild>
55+
<a href={item.url}>
56+
<item.icon />
57+
<span>{item.name}</span>
58+
</a>
59+
</SidebarMenuButton>
60+
</SidebarMenuItem>
61+
))}
62+
</SidebarMenu>
63+
</SidebarGroupContent>
64+
</SidebarGroup>
65+
</SidebarContent>
66+
<SidebarFooter />
67+
</Sidebar>
68+
);
69+
}
70+
71+
export default AppSidebar;

‎packages/cxx-playground/src/components/ui/button.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import * as React from "react"
2+
import { Slot } from "@radix-ui/react-slot"
3+
import { cva, type VariantProps } from "class-variance-authority"
4+
5+
import { cn } from "@/lib/utils"
6+
7+
const buttonVariants = cva(
8+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
9+
{
10+
variants: {
11+
variant: {
12+
default:
13+
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
14+
destructive:
15+
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
16+
outline:
17+
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
18+
secondary:
19+
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
20+
ghost:
21+
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
22+
link: "text-primary underline-offset-4 hover:underline",
23+
},
24+
size: {
25+
default: "h-9 px-4 py-2 has-[>svg]:px-3",
26+
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
27+
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
28+
icon: "size-9",
29+
},
30+
},
31+
defaultVariants: {
32+
variant: "default",
33+
size: "default",
34+
},
35+
}
36+
)
37+
38+
function Button({
39+
className,
40+
variant,
41+
size,
42+
asChild = false,
43+
...props
44+
}: React.ComponentProps<"button"> &
45+
VariantProps<typeof buttonVariants> & {
46+
asChild?: boolean
47+
}) {
48+
const Comp = asChild ? Slot : "button"
49+
50+
return (
51+
<Comp
52+
data-slot="button"
53+
className={cn(buttonVariants({ variant, size, className }))}
54+
{...props}
55+
/>
56+
)
57+
}
58+
59+
export { Button, buttonVariants }

‎packages/cxx-playground/src/components/ui/input.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import * as React from "react"
2+
3+
import { cn } from "@/lib/utils"
4+
5+
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
6+
return (
7+
<input
8+
type={type}
9+
data-slot="input"
10+
className={cn(
11+
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12+
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
13+
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
14+
className
15+
)}
16+
{...props}
17+
/>
18+
)
19+
}
20+
21+
export { Input }

‎packages/cxx-playground/src/components/ui/separator.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import * as SeparatorPrimitive from "@radix-ui/react-separator"
5+
6+
import { cn } from "@/lib/utils"
7+
8+
function Separator({
9+
className,
10+
orientation = "horizontal",
11+
decorative = true,
12+
...props
13+
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
14+
return (
15+
<SeparatorPrimitive.Root
16+
data-slot="separator"
17+
decorative={decorative}
18+
orientation={orientation}
19+
className={cn(
20+
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
21+
className
22+
)}
23+
{...props}
24+
/>
25+
)
26+
}
27+
28+
export { Separator }

0 commit comments

Comments
 (0)