Skip to content

Commit ff4230e

Browse files
jesusmpcjesusmpc
committed
chore: wip
1 parent 1fb7e66 commit ff4230e

File tree

7 files changed

+389
-2
lines changed

7 files changed

+389
-2
lines changed

‎code/components/room-components/help-drawer.tsx‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import { Button } from "@/components/ui/button";
2+
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
3+
import {
4+
Drawer,
5+
DrawerClose,
6+
DrawerContent,
7+
DrawerHeader,
8+
DrawerTitle,
9+
DrawerTrigger,
10+
} from "@/components/ui/drawer";
11+
import { Keyboard } from "lucide-react";
12+
import { ToolbarButton } from "./toolbar/toolbar-button";
13+
14+
export const HelpDrawer = () => {
15+
return (
16+
<Drawer>
17+
<DrawerTrigger>
18+
<ToolbarButton
19+
icon={<Keyboard />}
20+
onClick={() => {}}
21+
label="Keyboard shortcuts"
22+
tooltipSide="top"
23+
/>
24+
</DrawerTrigger>
25+
<DrawerContent className="p-5 bg-black flex flex-col justify-center items-center">
26+
<DrawerHeader className="w-full flex justify-center items-centers">
27+
<DrawerTitle className="text-center text-white font-noto-sans-mono">
28+
Keyboard shortcuts
29+
</DrawerTitle>
30+
</DrawerHeader>
31+
<Tabs defaultValue="tools" className="w-[1024px] my-5 mb-7 p-0">
32+
<TabsList className="w-full bg-zinc-700 rounded-none h-auto">
33+
<TabsTrigger
34+
value="tools"
35+
className="cursor-pointer bg-black rounded-none p-1"
36+
>
37+
Tools
38+
</TabsTrigger>
39+
<TabsTrigger
40+
value="view"
41+
className="cursor-pointer bg-black rounded-none p-1"
42+
>
43+
View
44+
</TabsTrigger>
45+
<TabsTrigger
46+
value="zoom"
47+
className="cursor-pointer bg-black rounded-none p-1"
48+
>
49+
Zoom
50+
</TabsTrigger>
51+
<TabsTrigger
52+
value="selection"
53+
className="cursor-pointer bg-black rounded-none p-1"
54+
>
55+
Selection
56+
</TabsTrigger>
57+
<TabsTrigger
58+
value="edit"
59+
className="cursor-pointer bg-black rounded-none p-1"
60+
>
61+
Edit
62+
</TabsTrigger>
63+
<TabsTrigger
64+
value="arrange"
65+
className="cursor-pointer bg-black rounded-none p-1"
66+
>
67+
Arrange
68+
</TabsTrigger>
69+
</TabsList>
70+
<TabsContent value="tools" className="border border-white">
71+
<div className=""></div>
72+
</TabsContent>
73+
<TabsContent value="view" className="border border-white">
74+
Change your password here.
75+
</TabsContent>
76+
<TabsContent value="zoom" className="border border-white">
77+
Change your password here.
78+
</TabsContent>
79+
<TabsContent value="selection" className="border border-white">
80+
Change your password here.
81+
</TabsContent>
82+
<TabsContent value="edit" className="border border-white">
83+
Change your password here.
84+
</TabsContent>
85+
<TabsContent value="arrange" className="border border-white">
86+
Change your password here.
87+
</TabsContent>
88+
</Tabs>
89+
<DrawerClose>
90+
<Button className="rounded-none font-noto-sans-mono">CLOSE</Button>
91+
</DrawerClose>
92+
</DrawerContent>
93+
</Drawer>
94+
);
95+
};

‎code/components/room-components/overlay/zoom-handler-overlay.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import React from "react";
44
import { ToolbarButton } from "../toolbar/toolbar-button";
55
import { Fullscreen, Maximize, ZoomIn, ZoomOut } from "lucide-react";
66
import { useWeave } from "@inditextech/weavejs-react";
7+
import { HelpDrawer } from "../help-drawer";
78

89
export function ZoomHandlerOverlay() {
910
const instance = useWeave((state) => state.instance);
@@ -28,8 +29,8 @@ export function ZoomHandlerOverlay() {
2829
);
2930

3031
return (
31-
<div className="absolute bottom-2 right-2 flex flex-col gap-1 justify-center items-center">
32-
<div className="w-[320px] p-1 bg-white border border-zinc-200 shadow-xs flex flex-col justify-start items-center">
32+
<div className="absolute bottom-2 right-2 flex gap-1 justify-center items-center">
33+
<div className="p-1 bg-white border border-zinc-200 shadow-xs flex justify-start items-center">
3334
<div className="w-full flex justify-between items-center">
3435
<div className="w-full grid grid-cols-[auto_1fr]">
3536
<div className="flex justify-start items-center gap-1">
@@ -75,6 +76,15 @@ export function ZoomHandlerOverlay() {
7576
</div>
7677
</div>
7778
</div>
79+
<div className="p-1 bg-white border border-zinc-200 shadow-xs flex justify-start items-center">
80+
<div className="w-full flex justify-between items-center">
81+
<div className="w-full grid grid-cols-[auto_1fr]">
82+
<div className="flex justify-start items-center gap-1">
83+
<HelpDrawer />
84+
</div>
85+
</div>
86+
</div>
87+
</div>
7888
</div>
7989
);
8090
}

‎code/components/room/room.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ import {
5858
ArrowDown,
5959
} from "lucide-react";
6060
import Threads from "../ui/reactbits/Backgrounds/Threads/Threads";
61+
import { HelpDrawer } from "../room-components/help-drawer";
6162

6263
const statusMap = {
6364
["idle"]: "Idle",
@@ -474,6 +475,7 @@ export const Room = () => {
474475
}}
475476
/>
476477
<RoomLayout />
478+
<HelpDrawer />
477479
</WeaveProvider>
478480
)}
479481
</>

‎code/components/ui/drawer.tsx‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import { Drawer as DrawerPrimitive } from "vaul"
5+
6+
import { cn } from "@/lib/utils"
7+
8+
function Drawer({
9+
...props
10+
}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
11+
return <DrawerPrimitive.Root data-slot="drawer" {...props} />
12+
}
13+
14+
function DrawerTrigger({
15+
...props
16+
}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
17+
return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
18+
}
19+
20+
function DrawerPortal({
21+
...props
22+
}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
23+
return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
24+
}
25+
26+
function DrawerClose({
27+
...props
28+
}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
29+
return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
30+
}
31+
32+
function DrawerOverlay({
33+
className,
34+
...props
35+
}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
36+
return (
37+
<DrawerPrimitive.Overlay
38+
data-slot="drawer-overlay"
39+
className={cn(
40+
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
41+
className
42+
)}
43+
{...props}
44+
/>
45+
)
46+
}
47+
48+
function DrawerContent({
49+
className,
50+
children,
51+
...props
52+
}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
53+
return (
54+
<DrawerPortal data-slot="drawer-portal">
55+
<DrawerOverlay />
56+
<DrawerPrimitive.Content
57+
data-slot="drawer-content"
58+
className={cn(
59+
"group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
60+
"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg",
61+
"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg",
62+
"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-sm",
63+
"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-sm",
64+
className
65+
)}
66+
{...props}
67+
>
68+
<div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
69+
{children}
70+
</DrawerPrimitive.Content>
71+
</DrawerPortal>
72+
)
73+
}
74+
75+
function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
76+
return (
77+
<div
78+
data-slot="drawer-header"
79+
className={cn("flex flex-col gap-1.5 p-4", className)}
80+
{...props}
81+
/>
82+
)
83+
}
84+
85+
function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
86+
return (
87+
<div
88+
data-slot="drawer-footer"
89+
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
90+
{...props}
91+
/>
92+
)
93+
}
94+
95+
function DrawerTitle({
96+
className,
97+
...props
98+
}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
99+
return (
100+
<DrawerPrimitive.Title
101+
data-slot="drawer-title"
102+
className={cn("text-foreground font-semibold", className)}
103+
{...props}
104+
/>
105+
)
106+
}
107+
108+
function DrawerDescription({
109+
className,
110+
...props
111+
}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
112+
return (
113+
<DrawerPrimitive.Description
114+
data-slot="drawer-description"
115+
className={cn("text-muted-foreground text-sm", className)}
116+
{...props}
117+
/>
118+
)
119+
}
120+
121+
export {
122+
Drawer,
123+
DrawerPortal,
124+
DrawerOverlay,
125+
DrawerTrigger,
126+
DrawerClose,
127+
DrawerContent,
128+
DrawerHeader,
129+
DrawerFooter,
130+
DrawerTitle,
131+
DrawerDescription,
132+
}

‎code/components/ui/tabs.tsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import * as TabsPrimitive from "@radix-ui/react-tabs"
5+
6+
import { cn } from "@/lib/utils"
7+
8+
function Tabs({
9+
className,
10+
...props
11+
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
12+
return (
13+
<TabsPrimitive.Root
14+
data-slot="tabs"
15+
className={cn("flex flex-col gap-2", className)}
16+
{...props}
17+
/>
18+
)
19+
}
20+
21+
function TabsList({
22+
className,
23+
...props
24+
}: React.ComponentProps<typeof TabsPrimitive.List>) {
25+
return (
26+
<TabsPrimitive.List
27+
data-slot="tabs-list"
28+
className={cn(
29+
"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-1",
30+
className
31+
)}
32+
{...props}
33+
/>
34+
)
35+
}
36+
37+
function TabsTrigger({
38+
className,
39+
...props
40+
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
41+
return (
42+
<TabsPrimitive.Trigger
43+
data-slot="tabs-trigger"
44+
className={cn(
45+
"data-[state=active]:bg-background data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring inline-flex flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
46+
className
47+
)}
48+
{...props}
49+
/>
50+
)
51+
}
52+
53+
function TabsContent({
54+
className,
55+
...props
56+
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
57+
return (
58+
<TabsPrimitive.Content
59+
data-slot="tabs-content"
60+
className={cn("flex-1 outline-none", className)}
61+
{...props}
62+
/>
63+
)
64+
}
65+
66+
export { Tabs, TabsList, TabsTrigger, TabsContent }

0 commit comments

Comments
 (0)