Added console sidebar

This commit is contained in:
Emir Karabeg
2025-01-31 11:51:09 -08:00
parent fb4808c097
commit 0d0464e4d7
2 changed files with 51 additions and 0 deletions

View File

@@ -0,0 +1,49 @@
'use client'
import { useState } from 'react'
import { PanelLeftClose, PanelLeft, Terminal } from 'lucide-react'
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@/components/ui/tooltip'
export function Console() {
const [isCollapsed, setIsCollapsed] = useState(false)
if (isCollapsed) {
return (
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={() => setIsCollapsed(false)}
className="fixed right-4 bottom-[18px] z-10 flex h-9 w-9 items-center justify-center rounded-lg bg-background text-muted-foreground transition-colors hover:text-foreground hover:bg-accent border"
>
<Terminal className="h-5 w-5" />
<span className="sr-only">Open Console</span>
</button>
</TooltipTrigger>
<TooltipContent side="left">Open Console</TooltipContent>
</Tooltip>
)
}
return (
<div className="fixed right-0 top-16 z-10 h-[calc(100vh-4rem)] overflow-y-auto w-72 border-l bg-background sm:block">
{/* Console content will go here */}
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={() => setIsCollapsed(true)}
className="absolute left-4 bottom-[18px] flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground hover:bg-accent"
>
<PanelLeftClose className="h-5 w-5" />
<span className="sr-only">Close Console</span>
</button>
</TooltipTrigger>
<TooltipContent side="right">Close Console</TooltipContent>
</Tooltip>
</div>
)
}

View File

@@ -2,6 +2,7 @@ import Providers from './providers'
import { Toolbar } from './components/toolbar/toolbar'
import { ControlBar } from './components/control-bar/control-bar'
import { Sidebar } from './components/sidebar/sidebar'
import { Console } from './components/console/console'
export default function WorkspaceLayout({
children,
@@ -18,6 +19,7 @@ export default function WorkspaceLayout({
<ControlBar />
<div className="h-16">
<Toolbar />
<Console />
<main className="grid items-start gap-2 bg-muted/40 h-[calc(100vh-4rem)]">
{children}
</main>