From 78cad0bebd3ade3603e30a87eedddff57afbfa32 Mon Sep 17 00:00:00 2001
From: Gram Liu <gram.liu226@gmail.com>
Date: Mon, 4 Dec 2023 00:52:12 -0800
Subject: [PATCH] Create homepage with avatar

---
 apps/web/app/canvas/page.tsx                | 288 ++++++++++++++++++
 apps/web/app/page.tsx                       | 313 ++------------------
 apps/web/src/components/home-icon.tsx       |  13 +
 packages/config/tailwind/tailwind.config.js |   1 +
 packages/ui/package.json                    |   1 +
 packages/ui/src/components/ui/avatar.tsx    |  50 ++++
 packages/ui/src/components/ui/index.tsx     |   1 +
 pnpm-lock.yaml                              |  27 ++
 8 files changed, 400 insertions(+), 294 deletions(-)
 create mode 100644 apps/web/app/canvas/page.tsx
 create mode 100644 apps/web/src/components/home-icon.tsx
 create mode 100644 packages/ui/src/components/ui/avatar.tsx

diff --git a/apps/web/app/canvas/page.tsx b/apps/web/app/canvas/page.tsx
new file mode 100644
index 0000000..79a6ba1
--- /dev/null
+++ b/apps/web/app/canvas/page.tsx
@@ -0,0 +1,288 @@
+"use client";
+import { Editor, TLPageId } from "@tldraw/tldraw";
+import "@tldraw/tldraw/tldraw.css";
+import {
+  Badge,
+  Button,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  SkeletonPlaceholder,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Toaster,
+  useToast,
+} from "@ui/components";
+import Canvas from "@ui/components/canvas";
+import IconLabel from "@ui/components/icon-label";
+import clsx from "clsx";
+import {
+  CheckIcon,
+  ChevronsUpDownIcon,
+  GitBranchIcon,
+  GithubIcon,
+  Loader2,
+} from "lucide-react";
+import { useEffect, useReducer, useState } from "react";
+import { CopyBlock, nord } from "react-code-blocks";
+import HomeIcon from "~/components/home-icon";
+import { convertEditorToCode } from "~/lib/editorToCode";
+
+const projects = [
+  {
+    label: "My Journal",
+    value: "my_journal",
+  },
+  {
+    label: "Portfolio Website",
+    value: "portfolio_website",
+  },
+  {
+    label: "Sandbox",
+    value: "sandbox",
+  },
+];
+const repo = "gramliu/custom-journal";
+const branch = "main";
+const framework = "Next.js";
+const options = ["App Router"];
+
+interface ReducerState {
+  [key: string]: string;
+}
+
+interface ReducerAction {
+  type: "add_page";
+  pageId: string;
+  code: string;
+}
+
+function reducer(state: ReducerState, action: ReducerAction): ReducerState {
+  if (action.type === "add_page") {
+    return {
+      ...state,
+      [action.pageId]: action.code,
+    };
+  }
+  return state;
+}
+
+export default function IndexPage() {
+  const [editor, setEditor] = useState<Editor>();
+  const [standaloneCode, setStandaloneCode] = useState<string>();
+  const [loading, setLoading] = useState<boolean>(false);
+  const { toast } = useToast();
+
+  const [pageId, setPageId] = useState<TLPageId>();
+  const [page, setPage] = useState<string>("");
+
+  const [projectSelectionOpen, setProjectSelectionOpen] = useState(false);
+  const [selectedProject, setSelectedProject] = useState(projects[0].value);
+
+  const [state, dispatch] = useReducer(reducer, {} as ReducerState);
+
+  // Update page ID to trigger secondary effect
+  useEffect(() => {
+    if (editor != null) {
+      setPageId(editor.getCurrentPageId());
+    }
+  }, [editor]);
+
+  // Update page name in output pane
+  useEffect(() => {
+    if (pageId != null && editor != null) {
+      const page = editor.getPage(pageId);
+      if (page != null) {
+        setPage(page.name);
+        setStandaloneCode(state[pageId] ?? "");
+      }
+    }
+  }, [pageId, editor]);
+
+  const sectionWidth = "w-[45vw]";
+
+  return (
+    <main className="h-full w-full flex flex-col p-5 pl-10 pt-5">
+      <header className="flex flex-row gap-4 mb-5 items-center z-100 relative">
+        <HomeIcon />
+        <h1 className="text-2xl font-bold">
+          {projects.find((project) => project.value === selectedProject).label}
+        </h1>
+        <Popover
+          open={projectSelectionOpen}
+          onOpenChange={setProjectSelectionOpen}
+        >
+          <PopoverTrigger>
+            <ChevronsUpDownIcon />
+          </PopoverTrigger>
+          <PopoverContent>
+            <Command>
+              <CommandInput placeholder="Search for project" />
+              <CommandEmpty>No projects found</CommandEmpty>
+              <CommandGroup>
+                {projects.map(({ value, label }) => (
+                  <CommandItem
+                    key={value}
+                    value={value}
+                    onSelect={(value) => {
+                      setSelectedProject(value);
+                      setProjectSelectionOpen(false);
+                    }}
+                  >
+                    <CheckIcon
+                      className={clsx(
+                        "mr-2",
+                        selectedProject === value ? "opacity-100" : "opacity-0"
+                      )}
+                    />
+                    {label}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </Command>
+          </PopoverContent>
+        </Popover>
+      </header>
+      {/* Project info */}
+      <section className="p-4 grid grid-cols-2 items-start justify-center">
+        <div
+          className={clsx(
+            sectionWidth,
+            "flex flex-col justify-self-center items-start gap-2"
+          )}
+        >
+          <IconLabel icon={<GithubIcon />} label={repo} />
+          <div className="flex flex-row gap-2">
+            <Badge variant="secondary">{framework}</Badge>
+            {options.map((option) => (
+              <Badge variant="outline" key={`option_${option}`}>
+                {option}
+              </Badge>
+            ))}
+          </div>
+        </div>
+        <div
+          className={clsx(
+            sectionWidth,
+            "flex flex-col justify-self-center items-start gap-2"
+          )}
+        >
+          <IconLabel icon={<GitBranchIcon />} label={branch} />
+        </div>
+      </section>
+      {/* Panels */}
+      <section className="p-4 grid grid-cols-2 items-center justify-center">
+        {/* Editor */}
+        <div
+          className={clsx(
+            sectionWidth,
+            "h-[70vh]",
+            "self-center justify-self-center bg-gray-100 rounded-md"
+          )}
+        >
+          <Canvas
+            setEditor={setEditor}
+            onPageChanged={(newPageId) => {
+              setPageId(newPageId);
+            }}
+          />
+        </div>
+        {/* Output */}
+        <div
+          className={clsx(
+            sectionWidth,
+            "h-[70vh]",
+            "justify-self-center bg-gray-100 rounded-md",
+            "flex items-start justify-center"
+          )}
+        >
+          <Tabs
+            defaultValue="preview"
+            className="w-full h-full grid grid-rows-[auto_1fr]"
+          >
+            <TabsList className="justify-between">
+              <div className="pl-4">{page}</div>
+              <div>
+                <TabsTrigger value="preview">Preview</TabsTrigger>
+                <TabsTrigger value="code_standalone">
+                  Code (Standalone)
+                </TabsTrigger>
+              </div>
+            </TabsList>
+            {loading ? (
+              <SkeletonPlaceholder />
+            ) : (
+              <>
+                <TabsContent value="preview" className="h-full">
+                  <iframe className="h-full w-full" srcDoc={standaloneCode} />
+                </TabsContent>
+                <TabsContent
+                  value="code_standalone"
+                  className="h-full overflow-x-auto overflow-y-auto"
+                >
+                  {standaloneCode?.length && (
+                    <CopyBlock
+                      codeBlock
+                      text={standaloneCode}
+                      language="html"
+                      theme={nord}
+                      showLineNumbers
+                      customStyle={{
+                        fontFamily: "var(--font-mono)",
+                        overflowX: "auto",
+                        overflowY: "auto",
+                      }}
+                    />
+                  )}
+                </TabsContent>
+              </>
+            )}
+          </Tabs>
+        </div>
+      </section>
+      {/* Button */}
+      <div className="flex flex-row items-center justify-center mt-3">
+        <Button
+          className="w-32"
+          disabled={editor == null || loading}
+          onClick={async () => {
+            setLoading(true);
+            setStandaloneCode("");
+            try {
+              if (editor) {
+                const result = await convertEditorToCode(editor);
+                setStandaloneCode(result);
+                dispatch({ type: "add_page", pageId, code: result });
+              } else {
+                throw new Error("Editor is not ready yet!");
+              }
+            } catch (err) {
+              toast({
+                title: "An error occured",
+                description: err.message,
+                variant: "destructive",
+              });
+            } finally {
+              setLoading(false);
+            }
+          }}
+        >
+          {loading ? (
+            <Loader2 className="animate-spin mr-2" />
+          ) : (
+            <span className="mr-2">✨</span>
+          )}{" "}
+          Generate
+        </Button>
+      </div>
+      <Toaster />
+    </main>
+  );
+}
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index c08ab8c..9dd75cd 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -1,308 +1,33 @@
 "use client";
-import { Editor, TLPageId } from "@tldraw/tldraw";
+import { useUser } from "@clerk/nextjs";
 import "@tldraw/tldraw/tldraw.css";
-import {
-  Badge,
-  Button,
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  Skeleton,
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-  Toaster,
-  useToast,
-} from "@ui/components";
-import Canvas from "@ui/components/canvas";
-import IconLabel from "@ui/components/icon-label";
-import clsx from "clsx";
-import {
-  CheckIcon,
-  ChevronsUpDownIcon,
-  GitBranchIcon,
-  GithubIcon,
-  Loader2,
-} from "lucide-react";
-import Image from "next/image";
-import { useEffect, useReducer, useState } from "react";
-import { CopyBlock, nord } from "react-code-blocks";
-import { convertEditorToCode } from "~/lib/editorToCode";
-import SpiderWebIcon from "./icon.png";
+import { Avatar, AvatarFallback, AvatarImage, Toaster } from "@ui/components";
+import HomeIcon from "~/components/home-icon";
 
-const projects = [
-  {
-    label: "My Journal",
-    value: "my_journal",
-  },
-  {
-    label: "Portfolio Website",
-    value: "portfolio_website",
-  },
-  {
-    label: "Sandbox",
-    value: "sandbox",
-  },
-];
-const repo = "gramliu/custom-journal";
-const branch = "main";
-const framework = "Next.js";
-const options = ["App Router"];
-
-/**
- * Loading placeholder for rendered output
- */
-function SkeletonPlaceholder() {
-  return (
-    <div className="h-full w-full flex justify-center items-center space-x-4">
-      <Skeleton className="h-12 w-12 rounded-full bg-gray-300" />
-      <div className="space-y-2">
-        <Skeleton className="h-4 w-[250px] bg-gray-300" />
-        <Skeleton className="h-4 w-[200px] bg-gray-300" />
-      </div>
-    </div>
-  );
-}
-
-interface ReducerState {
-  [key: string]: string;
-}
-
-interface ReducerAction {
-  type: "add_page";
-  pageId: string;
-  code: string;
-}
-
-function reducer(state: ReducerState, action: ReducerAction): ReducerState {
-  if (action.type === "add_page") {
-    return {
-      ...state,
-      [action.pageId]: action.code,
-    };
-  }
-  return state;
+function getInitials(firstName: string, lastName: string) {
+  return firstName.charAt(0) + lastName.charAt(0);
 }
 
 export default function IndexPage() {
-  const [editor, setEditor] = useState<Editor>();
-  const [standaloneCode, setStandaloneCode] = useState<string>();
-  const [loading, setLoading] = useState<boolean>(false);
-  const { toast } = useToast();
-
-  const [pageId, setPageId] = useState<TLPageId>();
-  const [page, setPage] = useState<string>("");
-
-  const [projectSelectionOpen, setProjectSelectionOpen] = useState(false);
-  const [selectedProject, setSelectedProject] = useState(projects[0].value);
-
-  const [state, dispatch] = useReducer(reducer, {} as ReducerState);
-
-  // Update page ID to trigger secondary effect
-  useEffect(() => {
-    if (editor != null) {
-      setPageId(editor.getCurrentPageId());
-    }
-  }, [editor]);
-
-  // Update page name in output pane
-  useEffect(() => {
-    if (pageId != null && editor != null) {
-      const page = editor.getPage(pageId);
-      if (page != null) {
-        setPage(page.name);
-        setStandaloneCode(state[pageId] ?? "");
-      }
-    }
-  }, [pageId, editor]);
-
-  const sectionWidth = "w-[45vw]";
+  const { user } = useUser();
 
   return (
     <main className="h-full w-full flex flex-col p-5 pl-10 pt-5">
-      <header className="flex flex-row gap-4 mb-5 items-center z-100 relative">
-        <Image
-          src={SpiderWebIcon}
-          alt="spiderweb icon"
-          height={48}
-          width={48}
-        />
-        <h1 className="text-2xl font-bold">
-          {projects.find((project) => project.value === selectedProject).label}
-        </h1>
-        <Popover
-          open={projectSelectionOpen}
-          onOpenChange={setProjectSelectionOpen}
-        >
-          <PopoverTrigger>
-            <ChevronsUpDownIcon />
-          </PopoverTrigger>
-          <PopoverContent>
-            <Command>
-              <CommandInput placeholder="Search for project" />
-              <CommandEmpty>No projects found</CommandEmpty>
-              <CommandGroup>
-                {projects.map(({ value, label }) => (
-                  <CommandItem
-                    key={value}
-                    value={value}
-                    onSelect={(value) => {
-                      setSelectedProject(value);
-                      setProjectSelectionOpen(false);
-                    }}
-                  >
-                    <CheckIcon
-                      className={clsx(
-                        "mr-2",
-                        selectedProject === value ? "opacity-100" : "opacity-0"
-                      )}
-                    />
-                    {label}
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-            </Command>
-          </PopoverContent>
-        </Popover>
-      </header>
-      {/* Headers */}
-      <section className="p-4 grid grid-cols-2 items-start justify-center">
-        <div
-          className={clsx(
-            sectionWidth,
-            "flex flex-col justify-self-center items-start gap-2"
-          )}
-        >
-          <IconLabel icon={<GithubIcon />} label={repo} />
-          <div className="flex flex-row gap-2">
-            <Badge variant="secondary">{framework}</Badge>
-            {options.map((option) => (
-              <Badge variant="outline" key={`option_${option}`}>
-                {option}
-              </Badge>
-            ))}
-          </div>
-        </div>
-        <div
-          className={clsx(
-            sectionWidth,
-            "flex flex-col justify-self-center items-start gap-2"
-          )}
-        >
-          <IconLabel icon={<GitBranchIcon />} label={branch} />
+      <header className="flex flex-row justify-between w-full mb-5 items-center z-10 px-5">
+        <div className="flex flex-row gap-4 items-center">
+          <HomeIcon />
+          <h1 className="text-2xl font-bold">Projects</h1>
         </div>
-      </section>
-      {/* Panels */}
-      <section className="p-4 grid grid-cols-2 items-center justify-center">
-        {/* Editor */}
-        <div
-          className={clsx(
-            sectionWidth,
-            "h-[70vh]",
-            "self-center justify-self-center bg-gray-100 rounded-md"
-          )}
-        >
-          <Canvas
-            setEditor={setEditor}
-            onPageChanged={(newPageId) => {
-              setPageId(newPageId);
-            }}
-          />
+        <div className="flex flex-row">
+          <Avatar>
+            <AvatarImage src={user?.imageUrl} alt={user?.fullName} />
+            <AvatarFallback>
+              {user != null ? getInitials(user.firstName, user.lastName) : ""}
+            </AvatarFallback>
+          </Avatar>
         </div>
-        {/* Output */}
-        <div
-          className={clsx(
-            sectionWidth,
-            "h-[70vh]",
-            "justify-self-center bg-gray-100 rounded-md",
-            "flex items-start justify-center"
-          )}
-        >
-          <Tabs
-            defaultValue="preview"
-            className="w-full h-full grid grid-rows-[auto_1fr]"
-          >
-            <TabsList className="justify-between">
-              <div className="pl-4">{page}</div>
-              <div>
-                <TabsTrigger value="preview">Preview</TabsTrigger>
-                <TabsTrigger value="code_standalone">
-                  Code (Standalone)
-                </TabsTrigger>
-              </div>
-            </TabsList>
-            {loading ? (
-              <SkeletonPlaceholder />
-            ) : (
-              <>
-                <TabsContent value="preview" className="h-full">
-                  <iframe className="h-full w-full" srcDoc={standaloneCode} />
-                </TabsContent>
-                <TabsContent
-                  value="code_standalone"
-                  className="h-full overflow-x-auto overflow-y-auto"
-                >
-                  {standaloneCode?.length && (
-                    <CopyBlock
-                      codeBlock
-                      text={standaloneCode}
-                      language="html"
-                      theme={nord}
-                      showLineNumbers
-                      customStyle={{
-                        fontFamily: "var(--font-mono)",
-                        overflowX: "auto",
-                        overflowY: "auto",
-                      }}
-                    />
-                  )}
-                </TabsContent>
-              </>
-            )}
-          </Tabs>
-        </div>
-      </section>
-      {/* Button */}
-      <div className="flex flex-row items-center justify-center mt-3">
-        <Button
-          className="w-32"
-          disabled={editor == null || loading}
-          onClick={async () => {
-            setLoading(true);
-            setStandaloneCode("");
-            try {
-              if (editor) {
-                const result = await convertEditorToCode(editor);
-                setStandaloneCode(result);
-                dispatch({ type: "add_page", pageId, code: result });
-              } else {
-                throw new Error("Editor is not ready yet!");
-              }
-            } catch (err) {
-              toast({
-                title: "An error occured",
-                description: err.message,
-                variant: "destructive",
-              });
-            } finally {
-              setLoading(false);
-            }
-          }}
-        >
-          {loading ? (
-            <Loader2 className="animate-spin mr-2" />
-          ) : (
-            <span className="mr-2">✨</span>
-          )}{" "}
-          Generate
-        </Button>
-      </div>
+      </header>
+      <section className="p-4 grid grid-cols-2 items-start justify-center"></section>
       <Toaster />
     </main>
   );
diff --git a/apps/web/src/components/home-icon.tsx b/apps/web/src/components/home-icon.tsx
new file mode 100644
index 0000000..913d781
--- /dev/null
+++ b/apps/web/src/components/home-icon.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import SpiderWebIcon from "~/../app/icon.png";
+
+export default function HomeIcon() {
+  return (
+    <Link href="/">
+      <Image src={SpiderWebIcon} alt="spiderweb icon" height={48} width={48} />
+    </Link>
+  );
+}
diff --git a/packages/config/tailwind/tailwind.config.js b/packages/config/tailwind/tailwind.config.js
index b089458..f5c6663 100644
--- a/packages/config/tailwind/tailwind.config.js
+++ b/packages/config/tailwind/tailwind.config.js
@@ -73,6 +73,7 @@ module.exports = {
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        "spin-bezier": "spin 3s cubic-bezier(0.6, -0.8, 0.42, 1) infinite",
       },
     },
   },
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 5891426..62c3f55 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -20,6 +20,7 @@
     "typescript": "^5.3.2"
   },
   "dependencies": {
+    "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slot": "^1.0.2",
diff --git a/packages/ui/src/components/ui/avatar.tsx b/packages/ui/src/components/ui/avatar.tsx
new file mode 100644
index 0000000..3ae00df
--- /dev/null
+++ b/packages/ui/src/components/ui/avatar.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@ui/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/packages/ui/src/components/ui/index.tsx b/packages/ui/src/components/ui/index.tsx
index 0797d92..8824cac 100644
--- a/packages/ui/src/components/ui/index.tsx
+++ b/packages/ui/src/components/ui/index.tsx
@@ -1,3 +1,4 @@
+export * from "./avatar";
 export * from "./badge";
 export * from "./button";
 export * from "./command";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b2c1baa..3a7162b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -345,6 +345,9 @@ importers:
 
   packages/ui:
     dependencies:
+      '@radix-ui/react-avatar':
+        specifier: ^1.0.4
+        version: 1.0.4(@types/react-dom@18.2.14)(@types/react@18.2.31)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-dialog':
         specifier: ^1.0.5
         version: 1.0.5(@types/react-dom@18.2.14)(@types/react@18.2.31)(react-dom@18.2.0)(react@18.2.0)
@@ -2378,6 +2381,30 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /@radix-ui/react-avatar@1.0.4(@types/react-dom@18.2.14)(@types/react@18.2.31)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-kVK2K7ZD3wwj3qhle0ElXhOjbezIgyl2hVvgwfIdexL3rN6zJmy5AqqIf+D31lxVppdzV8CjAfZ6PklkmInZLw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.2
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.31)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.14)(@types/react@18.2.31)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.31)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.31)(react@18.2.0)
+      '@types/react': 18.2.31
+      '@types/react-dom': 18.2.14
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.14)(@types/react@18.2.31)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==}
     peerDependencies: