68 | No pages inside 69 |
70 | {documents.map((document) => ( 71 |
72 | - onRedirect(document._id)}
75 | label={document.title}
76 | icon={FileIcon}
77 | documentIcon={document.icon}
78 | active={params.documentId === document._id}
79 | level={level}
80 | onExpand={() => onExpand(document._id)}
81 | expanded={expanded[document._id]}
82 | />
83 | {expanded[document._id] && (
84 |
87 | ))}
88 |
89 | );
90 | };
91 |
--------------------------------------------------------------------------------
/app/(main)/_components/item.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | DropdownMenu,
5 | DropdownMenuContent,
6 | DropdownMenuItem,
7 | DropdownMenuSeparator,
8 | DropdownMenuTrigger,
9 | } from "@/components/ui/dropdown-menu";
10 | import { Skeleton } from "@/components/ui/skeleton";
11 | import { api } from "@/convex/_generated/api";
12 | import { Id } from "@/convex/_generated/dataModel";
13 | import { cn } from "@/lib/utils";
14 | import { useUser } from "@clerk/clerk-react";
15 | import { useMutation } from "convex/react";
16 | import {
17 | ChevronDown,
18 | ChevronRight,
19 | LucideIcon,
20 | MoreHorizontal,
21 | Plus,
22 | Trash,
23 | } from "lucide-react";
24 | import { useRouter } from "next/navigation";
25 | import { toast } from "sonner";
26 |
27 | interface ItemProps {
28 | id?: Id<"documents">;
29 | documentIcon?: string;
30 | active?: boolean;
31 | expanded?: boolean; // expanded = see the children of the document
32 | isSearched?: boolean;
33 | level?: number; // to use it to set the padding of the document
34 | onExpand?: () => void;
35 | label: string;
36 | onClick?: () => void;
37 | icon: LucideIcon;
38 | }
39 |
40 | export const Item = ({
41 | id,
42 | documentIcon,
43 | active,
44 | expanded,
45 | isSearched,
46 | level = 0,
47 | onExpand,
48 | label,
49 | onClick,
50 | icon: Icon,
51 | }: ItemProps) => {
52 | const { user } = useUser();
53 | const create = useMutation(api.documents.create);
54 | const router = useRouter();
55 | const archive = useMutation(api.documents.archive);
56 |
57 | // handle archiving a document
58 | const onArchive = (event: React.MouseEvent
110 | {/* Render this part if and only if the item has an id (documents id) */}
111 | {!!id && (
112 |
172 | );
173 | };
174 |
175 | Item.Skeleton = function ItemSkeleton({ level }: { level?: number }) {
176 | return (
177 |
117 |
119 | )}
120 | {/* Render the appropriate icon based on the presence of documentIcon */}
121 | {documentIcon ? (
122 | {documentIcon}
123 | ) : (
124 |
135 | {/* Action button */}
136 |
137 | e.stopPropagation()}>
138 |
145 |
151 |
152 |
155 |
160 |
161 | {/* Create button */}
162 |
170 | )}
171 |
142 |
144 |
157 | Last edited by: {user?.fullName}
158 |
159 |
167 |
169 |
181 |
184 | );
185 | };
186 |
--------------------------------------------------------------------------------
/app/(main)/_components/menu.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Button } from "@/components/ui/button";
4 | import {
5 | DropdownMenu,
6 | DropdownMenuContent,
7 | DropdownMenuItem,
8 | DropdownMenuSeparator,
9 | DropdownMenuTrigger,
10 | } from "@/components/ui/dropdown-menu";
11 | import { Skeleton } from "@/components/ui/skeleton";
12 | import { api } from "@/convex/_generated/api";
13 | import { Id } from "@/convex/_generated/dataModel";
14 | import { useUser } from "@clerk/clerk-react";
15 | import { useMutation } from "convex/react";
16 | import { MoreHorizontal, Trash } from "lucide-react";
17 | import { useRouter } from "next/navigation";
18 | import { toast } from "sonner";
19 |
20 | interface MenuProps {
21 | documentId: Id<"documents">;
22 | }
23 |
24 | export const Menu = ({ documentId }: MenuProps) => {
25 | const router = useRouter();
26 | const { user } = useUser();
27 |
28 | const archive = useMutation(api.documents.archive);
29 |
30 | const onArchive = () => {
31 | const promise = archive({ id: documentId });
32 |
33 | toast.promise(promise, {
34 | loading: "Moving to trash...",
35 | success: "Note moved to trash!",
36 | error: "Failed to archive note.",
37 | });
38 |
39 | router.push("/documents");
40 | };
41 |
42 | return (
43 |
61 | Last edited by: {user?.fullName}
62 |
63 |
201 | {!!params.documentId ? (
202 |
216 |
217 | );
218 | };
219 |
--------------------------------------------------------------------------------
/app/(main)/_components/publish.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Button } from "@/components/ui/button";
4 | import {
5 | Popover,
6 | PopoverContent,
7 | PopoverTrigger,
8 | } from "@/components/ui/popover";
9 | import { api } from "@/convex/_generated/api";
10 | import { Doc } from "@/convex/_generated/dataModel";
11 | import { useOrigin } from "@/hooks/use-origin";
12 | import { useMutation } from "convex/react";
13 | import { CheckIcon, CopyIcon, Globe } from "lucide-react";
14 | import { useState } from "react";
15 | import { toast } from "sonner";
16 |
17 | interface PublishProps {
18 | initialData: Doc<"documents">;
19 | }
20 |
21 | export const Publish = ({ initialData }: PublishProps) => {
22 | const origin = useOrigin();
23 | const update = useMutation(api.documents.update);
24 |
25 | const [copied, setCopied] = useState(false);
26 | const [isSubmitting, setIsSubmitting] = useState(false);
27 |
28 | const url = `${origin}/preview/${initialData._id}`;
29 |
30 | const onPublish = () => {
31 | setIsSubmitting(true);
32 |
33 | const promise = update({ id: initialData._id, isPublished: true }).finally(
34 | () => setIsSubmitting(false)
35 | );
36 |
37 | toast.promise(promise, {
38 | loading: "Publishing...",
39 | success: "Note published!",
40 | error: "Failed to publish note.",
41 | });
42 | };
43 |
44 | const onUnpublish = () => {
45 | setIsSubmitting(true);
46 |
47 | const promise = update({ id: initialData._id, isPublished: false }).finally(
48 | () => setIsSubmitting(false)
49 | );
50 |
51 | toast.promise(promise, {
52 | loading: "Unpublishing...",
53 | success: "Note unpublished!",
54 | error: "Failed to unpublish note.",
55 | });
56 | };
57 |
58 | const onCopy = () => {
59 | navigator.clipboard.writeText(url);
60 | setCopied(true);
61 |
62 | setTimeout(() => {
63 | setCopied(false);
64 | }, 1000);
65 | };
66 |
67 | return (
68 |
80 |
113 | ) : (
114 |
81 |
86 | 83 | This note is live on web. 84 |
85 |
87 |
92 |
103 |
104 |
112 |
115 |
129 | )}
130 | Publish this note
117 | 118 | Share your work with others. 119 | 120 | 128 |
48 | {!!initialData.icon &&
70 | );
71 | };
72 |
73 | Title.Skeleton = function TitleSkeleton() {
74 | return {initialData.icon}
} 49 | {isEditing ? ( 50 | 59 | ) : ( 60 | 68 | )} 69 |
62 |
64 | );
65 | }
66 |
67 | return (
68 |
69 |
112 | );
113 | };
114 |
--------------------------------------------------------------------------------
/app/(main)/_components/user-item.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Avatar, AvatarImage } from "@/components/ui/avatar";
4 | import {
5 | DropdownMenu,
6 | DropdownMenuContent,
7 | DropdownMenuItem,
8 | DropdownMenuLabel,
9 | DropdownMenuSeparator,
10 | DropdownMenuTrigger,
11 | } from "@/components/ui/dropdown-menu";
12 | import { SignOutButton, useUser } from "@clerk/clerk-react";
13 | import { ChevronsLeftRight } from "lucide-react";
14 |
15 | export const UserItem = () => {
16 | const { user } = useUser();
17 | return (
18 |
70 |
78 | {/* Will be rendered only if it is the last element */}
79 |
80 |
111 | 81 | No documents found. 82 |
83 | {filteredDocuments?.map((document) => ( 84 | onClick(document._id)}
88 | className="text-sm rounded-sm w-full hover:bg-primary/5 flex items-center text-primary justify-between"
89 | >
90 | {document.title}
91 |
109 | ))}
110 |
92 | onRemove(document._id)}>
100 |
107 |
108 | onRestore(e, document._id)}
94 | role="button"
95 | className="rounded-sm p-2 hover:bg-neutral-200 dark:hover:bg-neutral-600"
96 | >
97 |
99 |
104 |
106 |
24 |
34 |
25 |
26 |
28 |
29 | {user?.fullName}'s Notion
30 |
31 |
32 |
42 |
58 | 43 | {user?.emailAddresses[0].emailAddress} 44 |
45 |
46 |
57 |
47 |
48 |
50 |
51 |
52 |
56 | 53 | {user?.fullName}'s Notion 54 |
55 |
16 |
18 | );
19 | }
20 |
21 | // to protect the route from being accessed without logging in.
22 | // redirect the user to the landing page
23 | if (!isAuthenticated) {
24 | return redirect("/");
25 | }
26 |
27 | return (
28 |
29 |
31 |
34 |
35 | );
36 | };
37 |
38 | export default MainLayout;
39 |
--------------------------------------------------------------------------------
/app/(marketing)/_components/footer.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import { Logo } from "./logo";
3 |
4 | export const Footer = () => {
5 | return (
6 |
7 |
17 | );
18 | };
19 |
--------------------------------------------------------------------------------
/app/(marketing)/_components/heading.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Spinner } from "@/components/spinner";
4 | import { Button } from "@/components/ui/button";
5 | import { SignInButton } from "@clerk/clerk-react";
6 | import { useConvexAuth } from "convex/react";
7 | import { ArrowRight } from "lucide-react";
8 | import Link from "next/link";
9 |
10 | export const Heading = () => {
11 | const { isAuthenticated, isLoading } = useConvexAuth();
12 |
13 | return (
14 |
9 |
12 |
15 |
16 |
15 |
20 | Notion is the connected workspace where
23 | {isLoading && (
24 |
37 |
40 |
41 | )}
42 |
43 | );
44 | };
45 |
--------------------------------------------------------------------------------
/app/(marketing)/_components/heroes.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 |
3 | export const Heroes = () => {
4 | return (
5 | 16 | Your Ideas, Documents, & Plans. Unified. Welcome to{" "} 17 | Notion 18 |
19 |
20 | Notion is the connected workspace where
21 | better, faster work happens.
22 |
23 | {isLoading && (
24 |
25 |
27 | )}
28 | {isAuthenticated && !isLoading && (
29 |
34 | )}
35 | {!isAuthenticated && !isLoading && (
36 |
6 |
37 | );
38 | };
39 |
--------------------------------------------------------------------------------
/app/(marketing)/_components/logo.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import { Poppins } from "next/font/google";
3 | import { cn } from "@/lib/utils";
4 |
5 | const font = Poppins({
6 | subsets: ["latin"],
7 | weight: ["400", "600"],
8 | });
9 |
10 | export const Logo = () => {
11 | return (
12 |
7 |
36 |
8 |
21 |
22 |
35 |
13 |
29 | );
30 | };
31 |
--------------------------------------------------------------------------------
/app/(marketing)/_components/navbar.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useScrollTop } from "@/hooks/use-scroll-top";
4 | import { cn } from "@/lib/utils";
5 | import { Logo } from "./logo";
6 | import { ModeToggle } from "@/components/mode-toggle";
7 | import { useConvexAuth } from "convex/react";
8 | import { SignInButton, UserButton } from "@clerk/clerk-react";
9 | import { Button } from "@/components/ui/button";
10 | import { Spinner } from "@/components/spinner";
11 | import Link from "next/link";
12 |
13 | export const Navbar = () => {
14 | const scrolled = useScrollTop();
15 | const { isAuthenticated, isLoading } = useConvexAuth();
16 |
17 | return (
18 | Notion
28 |
24 |
50 | );
51 | };
52 |
--------------------------------------------------------------------------------
/app/(marketing)/layout.tsx:
--------------------------------------------------------------------------------
1 | import { Navbar } from "./_components/navbar";
2 |
3 | const MarketingLayout = ({ children }: { children: React.ReactNode }) => {
4 | return (
5 |
26 | {isLoading &&
30 |
33 |
34 |
35 |
36 |
37 |
38 | )}
39 | {isAuthenticated && !isLoading && (
40 | <>
41 |
44 |
49 |
6 | {children}
8 |
9 | );
10 | };
11 |
12 | export default MarketingLayout;
13 |
--------------------------------------------------------------------------------
/app/(marketing)/page.tsx:
--------------------------------------------------------------------------------
1 | import { Footer } from "./_components/footer";
2 | import { Heading } from "./_components/heading";
3 | import { Heroes } from "./_components/heroes";
4 |
5 | const MarketingPage = () => {
6 | return (
7 |
8 |
14 | );
15 | };
16 |
17 | export default MarketingPage;
18 |
--------------------------------------------------------------------------------
/app/(public)/(routes)/preview/[documentId]/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Cover } from "@/components/cover";
4 | import { Toolbar } from "@/components/toolbar";
5 | import { Skeleton } from "@/components/ui/skeleton";
6 | import { api } from "@/convex/_generated/api";
7 | import { Id } from "@/convex/_generated/dataModel";
8 | import { useMutation, useQuery } from "convex/react";
9 | import dynamic from "next/dynamic";
10 | import { useMemo } from "react";
11 |
12 | interface DocumentIdPageProps {
13 | params: {
14 | documentId: Id<"documents">;
15 | };
16 | }
17 |
18 | const DocumentIdPage = ({ params }: DocumentIdPageProps) => {
19 | const Editor = useMemo(
20 | () => dynamic(() => import("@/components/editor"), { ssr: false }),
21 | []
22 | );
23 |
24 | const document = useQuery(api.documents.getById, {
25 | documentId: params.documentId,
26 | });
27 |
28 | const update = useMutation(api.documents.update);
29 |
30 | const onChange = (content: string) => {
31 | update({ id: params.documentId, content: content });
32 | };
33 |
34 | if (document === undefined) {
35 | return (
36 |
9 |
12 |
13 |
37 |
47 | );
48 | }
49 |
50 | if (document === null) {
51 | return
39 |
46 |
40 |
45 | Not found
;
52 | }
53 |
54 | return (
55 |
56 |
66 | );
67 | };
68 |
69 | export default DocumentIdPage;
70 |
--------------------------------------------------------------------------------
/app/(public)/layout.tsx:
--------------------------------------------------------------------------------
1 | const PublicLayout = ({ children }: { children: React.ReactNode }) => {
2 | return
58 |
65 | {children}
;
3 | };
4 |
5 | export default PublicLayout;
6 |
--------------------------------------------------------------------------------
/app/api/edgestore/[...edgestore]/route.ts:
--------------------------------------------------------------------------------
1 | import { initEdgeStore } from "@edgestore/server";
2 | import { createEdgeStoreNextHandler } from "@edgestore/server/adapters/next/app";
3 | const es = initEdgeStore.create();
4 | /**
5 | * This is the main router for the Edge Store buckets.
6 | */
7 | const edgeStoreRouter = es.router({
8 | publicFiles: es.fileBucket().beforeDelete(() => {
9 | return true; // allow delete
10 | }),
11 | });
12 | const handler = createEdgeStoreNextHandler({
13 | router: edgeStoreRouter,
14 | });
15 | export { handler as GET, handler as POST };
16 | /**
17 | * This type is used to create the type-safe client for the frontend.
18 | */
19 | export type EdgeStoreRouter = typeof edgeStoreRouter;
20 |
--------------------------------------------------------------------------------
/app/error.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Button } from "@/components/ui/button";
4 | import Image from "next/image";
5 | import Link from "next/link";
6 |
7 | const Error = () => {
8 | return (
9 |
10 |
29 | );
30 | };
31 |
32 | export default Error;
33 |
--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | html,
6 | body,
7 | :root {
8 | height: 100%;
9 | }
10 |
11 | @layer base {
12 | :root {
13 | --background: 0 0% 100%;
14 | --foreground: 0 0% 3.9%;
15 |
16 | --card: 0 0% 100%;
17 | --card-foreground: 0 0% 3.9%;
18 |
19 | --popover: 0 0% 100%;
20 | --popover-foreground: 0 0% 3.9%;
21 |
22 | --primary: 0 0% 9%;
23 | --primary-foreground: 0 0% 98%;
24 |
25 | --secondary: 0 0% 96.1%;
26 | --secondary-foreground: 0 0% 9%;
27 |
28 | --muted: 0 0% 96.1%;
29 | --muted-foreground: 0 0% 45.1%;
30 |
31 | --accent: 0 0% 96.1%;
32 | --accent-foreground: 0 0% 9%;
33 |
34 | --destructive: 0 84.2% 60.2%;
35 | --destructive-foreground: 0 0% 98%;
36 |
37 | --border: 0 0% 89.8%;
38 | --input: 0 0% 89.8%;
39 | --ring: 0 0% 3.9%;
40 |
41 | --radius: 0.5rem;
42 | }
43 |
44 | .dark {
45 | --background: 0 0% 3.9%;
46 | --foreground: 0 0% 98%;
47 |
48 | --card: 0 0% 3.9%;
49 | --card-foreground: 0 0% 98%;
50 |
51 | --popover: 0 0% 3.9%;
52 | --popover-foreground: 0 0% 98%;
53 |
54 | --primary: 0 0% 98%;
55 | --primary-foreground: 0 0% 9%;
56 |
57 | --secondary: 0 0% 14.9%;
58 | --secondary-foreground: 0 0% 98%;
59 |
60 | --muted: 0 0% 14.9%;
61 | --muted-foreground: 0 0% 63.9%;
62 |
63 | --accent: 0 0% 14.9%;
64 | --accent-foreground: 0 0% 98%;
65 |
66 | --destructive: 0 62.8% 30.6%;
67 | --destructive-foreground: 0 0% 98%;
68 |
69 | --border: 0 0% 14.9%;
70 | --input: 0 0% 14.9%;
71 | --ring: 0 0% 83.1%;
72 | }
73 | }
74 |
75 | @layer base {
76 | * {
77 | @apply border-border;
78 | }
79 | body {
80 | @apply bg-background text-foreground;
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from "next";
2 | import { Inter } from "next/font/google";
3 | import "./globals.css";
4 | import { ThemeProvider } from "@/components/providers/theme-provider";
5 | import { ConvexClientProvider } from "@/components/providers/convex-provider";
6 | import { Toaster } from "sonner";
7 | import { ModalProvider } from "@/components/providers/modal-provider";
8 | import { EdgeStoreProvider } from "@/lib/edgestore";
9 |
10 | const inter = Inter({ subsets: ["latin"] });
11 |
12 | export const metadata: Metadata = {
13 | title: "Notion Clone",
14 | description: "The connected workspace where better, faster work happens.",
15 | icons: {
16 | icon: [
17 | {
18 | media: "(prefers-color-scheme: light)",
19 | url: "/logo.svg",
20 | href: "/logo.svg",
21 | },
22 | {
23 | media: "(prefers-color-scheme: dark)",
24 | url: "/logo-dark.svg",
25 | href: "/logo-dark.svg",
26 | },
27 | ],
28 | },
29 | };
30 |
31 | export default function RootLayout({
32 | children,
33 | }: {
34 | children: React.ReactNode;
35 | }) {
36 | return (
37 |
38 |
39 | Something went wrong!
25 | 28 |
41 | {!!url &&
65 | );
66 | };
67 |
68 | Cover.Skeleton = function CoverSkeleton() {
69 | return
44 |
53 |
62 |
63 | )}
64 |
37 |
42 | );
43 | };
44 |
45 | export default Editor;
46 |
--------------------------------------------------------------------------------
/components/icon-picker.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | Popover,
5 | PopoverContent,
6 | PopoverTrigger,
7 | } from "@/components/ui/popover";
8 | import EmojiPicker, { Theme } from "emoji-picker-react";
9 | import { useTheme } from "next-themes";
10 |
11 | interface IconPickerProps {
12 | onChange: (icon: string) => void;
13 | children: React.ReactNode;
14 | asChild?: boolean;
15 | }
16 |
17 | export const IconPicker = ({
18 | onChange,
19 | children,
20 | asChild,
21 | }: IconPickerProps) => {
22 | const { resolvedTheme } = useTheme();
23 | const currentTheme = (resolvedTheme || "light") as keyof typeof themeMap;
24 |
25 | const themeMap = {
26 | dark: Theme.DARK,
27 | light: Theme.LIGHT,
28 | };
29 |
30 | const theme = themeMap[currentTheme];
31 |
32 | return (
33 | {document.icon}
68 | ) : ( 69 |
125 | {disabled && (
126 |
182 | );
183 | }
184 | );
185 | SingleImageDropzone.displayName = "SingleImageDropzone";
186 |
187 | const Button = React.forwardRef<
188 | HTMLButtonElement,
189 | React.ButtonHTMLAttributes
127 |
129 | )}
130 |
139 | {/* Main File Input */}
140 |
141 |
142 | {imageUrl ? (
143 | // Image Preview
144 | ![{acceptedFiles[0]?.name}]({imageUrl})
149 | ) : (
150 | // Upload Icon
151 |
178 |
179 | {/* Error Text */}
180 |
152 |
157 | )}
158 |
159 | {/* Remove Image Icon */}
160 | {imageUrl && !disabled && (
161 |
154 | Click or drag file to this area to upload
155 |
156 | {
164 | e.stopPropagation();
165 | void onChange?.(undefined);
166 | }}
167 | >
168 |
176 | )}
177 |
169 |
175 | {errorMessage}
181 |
67 | {/* Render this when the user is viewing their document */}
68 | {!!initialData.icon && !preview && (
69 | onInput(e.target.value)}
121 | className="text-5xl bg-transparent font-bold break-words outline-none text-[#3F3F3F] dark:text-[#CFCFCF] resize-none"
122 | />
123 | ) : (
124 |
132 | );
133 | };
134 |
--------------------------------------------------------------------------------
/components/ui/alert-dialog.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
5 |
6 | import { cn } from "@/lib/utils";
7 | import { buttonVariants } from "@/components/ui/button";
8 |
9 | const AlertDialog = AlertDialogPrimitive.Root;
10 |
11 | const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
12 |
13 | const AlertDialogPortal = AlertDialogPrimitive.Portal;
14 |
15 | const AlertDialogOverlay = React.forwardRef<
16 | React.ElementRef
70 |
71 |
75 |
83 |
84 | )}
85 | {/* Render this when the guest is viewing others' document */}
86 | {!!initialData.icon && preview && (
87 | 72 | {initialData.icon} 73 |
74 |{initialData.icon}
88 | )} 89 |
90 | {!initialData.icon && !preview && (
91 |
92 |
100 |
101 | )}
102 | {!initialData.coverImage && !preview && (
103 |
112 | )}
113 |
114 | {isEditing && !preview ? (
115 |
128 | {initialData.title}
129 |
130 | )}
131 |
45 |
55 | ))
56 |
57 | CommandInput.displayName = CommandPrimitive.Input.displayName
58 |
59 | const CommandList = React.forwardRef<
60 | React.ElementRef