style: Add React imports to component files

app/components/common/Iframe.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import clsx from "clsx";
 
 type IframeProps = {

app/components/common/Image.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 export function Image(props: { src: string; alt: string } & React.ComponentPropsWithoutRef<"img">) {
   return <img {...props} src={props.src} alt={props.alt} loading="lazy" />;
 }

app/components/common/Link.tsx

@@ -1,8 +1,9 @@
 import { usePageContext } from "vike-react/usePageContext";
 import { prefetch } from "vike/client/router";
+import React from "react";
 import clsx from "clsx";
 
-export function Link(props: React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }) {
+export function Link(props: React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string; className?: string }) {
   const { urlPathname } = usePageContext();
   const isActive = props.href === "/" ? urlPathname === props.href : urlPathname.startsWith(props.href);
   const isSameDomain = !(props.href.startsWith("http") || props.href.startsWith("mailto"));

app/components/md/Tabs.tsx

@@ -1,6 +1,6 @@
 import type { Dispatch, SetStateAction } from "react";
 
-import { createContext, useContext, useEffect, useState } from "react";
+import React, { createContext, useContext, useEffect, useState } from "react";
 import { Button } from "@syntax/Button";
 import clsx from "clsx";
 

app/components/syntax/Button.tsx

@@ -1,4 +1,5 @@
 import { Link } from "@/components/common/Link";
+import React from "react";
 import clsx from "clsx";
 
 const variantStyles = {

app/components/syntax/CSRSnippet.tsx

@@ -1,8 +1,8 @@
 import { ClipboardDocumentIcon } from "@heroicons/react/24/outline";
 import { prismThemes } from "@/data/themes/prism";
+import React, { Fragment, useMemo } from "react";
 import { Highlight } from "prism-react-renderer";
 import { useTheme } from "@/hooks/useTheme";
-import { Fragment, useMemo } from "react";
 import { toast } from "react-toastify";
 import { Button } from "./Button";
 import Prism from "prismjs";
@@ -40,7 +40,7 @@ export default function CSRSnippet({
                 {label}
               </div>
             )}
-            <pre className={clsx(className, { "pt-11": !!label })} style={style}>
+            <pre className={clsx(className, { "pt-11": label })} style={style}>
               <code>
                 {tokens.map((line, lineIndex) => (
                   <Fragment key={lineIndex}>
@@ -69,7 +69,7 @@ export default function CSRSnippet({
       <Button
         className={clsx(
           "absolute right-2 w-8 h-8 aspect-square opacity-0 group-hover:opacity-50 hover:opacity-100 transition-opacity",
-          !!label ? "top-10" : "top-2",
+          label ? "top-10" : "top-2",
         )}
         size="sm"
         variant="secondary"

app/components/syntax/Callout.tsx

@@ -1,4 +1,5 @@
 import { Icon } from "@syntax/Icon";
+import React from "react";
 import clsx from "clsx";
 
 const styles = {
@@ -36,10 +37,12 @@ export function Callout({
   type?: keyof typeof styles;
   collapsible?: boolean;
 }) {
-  let IconComponent = icons[type];
+  const IconComponent = icons[type];
 
   return (
-    <div className={clsx("my-8 flex flex-col rounded-3xl p-6", styles[type].container)}>
+    <div
+      className={clsx("my-8 flex flex-col rounded-3xl p-6", styles[type].container, { "cursor-pointer": collapsible })}
+    >
       <div className="flex items-center gap-6">
         <IconComponent className="h-8 w-8 flex-none" />
         <p className={clsx("!m-0 font-display text-xl text-balance", styles[type].title)}>{title}</p>

app/components/syntax/DocsHeader.tsx

@@ -1,6 +1,7 @@
 import { usePageContext } from "vike-react/usePageContext";
 import { ClockIcon } from "@heroicons/react/24/outline";
 import { navigation } from "@/lib/navigation";
+import React from "react";
 
 type DocsHeaderProps = {
   title?: string;

app/components/syntax/DocsLayout.tsx

@@ -5,6 +5,7 @@ import { PrevNextLinks } from "@syntax/PrevNextLinks";
 import { collectSections } from "@/lib/sections";
 import { DocsHeader } from "@syntax/DocsHeader";
 import { Prose } from "@syntax/Prose";
+import React from "react";
 
 export function DocsLayout({
   children,
@@ -17,7 +18,7 @@ export function DocsLayout({
   estimatedReadingTime?: string;
   nodes: Array<Node>;
 }) {
-  let tableOfContents = collectSections(nodes);
+  const tableOfContents = collectSections(nodes);
 
   return (
     <>

app/components/syntax/Fence.tsx

@@ -1,5 +1,6 @@
 import { clientOnly } from "vike-react/clientOnly";
 import { SSRSnippet } from "./SSRSnippet";
+import React from "react";
 
 const CSRSnippet = clientOnly(() => import("./CSRSnippet"));
 

app/components/syntax/Hero.tsx

@@ -3,8 +3,8 @@ import blurIndigoImage from "@/images/blur-indigo.webp";
 import blurCyanImage from "@/images/blur-cyan.webp";
 import { Image } from "@/components/common/Image";
 import { Highlight } from "prism-react-renderer";
+import React, { Fragment } from "react";
 import { Button } from "@syntax/Button";
-import { Fragment } from "react";
 import clsx from "clsx";
 
 const codeLanguage = "javascript";

app/components/syntax/HeroBackground.tsx

@@ -1,4 +1,4 @@
-import { useId } from "react";
+import React, { useId } from "react";
 
 export function HeroBackground(props: React.ComponentPropsWithoutRef<"svg">) {
   const id = useId();

app/components/syntax/Icon.tsx

@@ -5,7 +5,7 @@ import { PluginsIcon } from "@syntax/icons/PluginsIcon";
 import { PresetsIcon } from "@syntax/icons/PresetsIcon";
 import { ThemingIcon } from "@syntax/icons/ThemingIcon";
 import { WarningIcon } from "@syntax/icons/WarningIcon";
-import { useId } from "react";
+import React, { useId } from "react";
 import clsx from "clsx";
 
 const icons = {
@@ -32,8 +32,8 @@ export function Icon({
   color?: keyof typeof iconStyles;
   icon: keyof typeof icons;
 } & Omit<React.ComponentPropsWithoutRef<"svg">, "color">) {
-  let id = useId();
-  let IconComponent = icons[icon];
+  const id = useId();
+  const IconComponent = icons[icon];
 
   return (
     <svg aria-hidden="true" viewBox="0 0 32 32" fill="none" className={clsx(className, iconStyles[color])} {...props}>

app/components/syntax/Logo.tsx

@@ -1,11 +1,6 @@
-function LogomarkPaths() {
-  // return (
-  //   <g fill="none" stroke="#38BDF8" strokeLinejoin="round" strokeWidth={3}>
-  //     <path d="M10.308 5L18 17.5 10.308 30 2.615 17.5 10.308 5z" />
-  //     <path d="M18 17.5L10.308 5h15.144l7.933 12.5M18 17.5h15.385L25.452 30H10.308L18 17.5z" />
-  //   </g>
-  // );
+import React from "react";
 
+function LogomarkPaths() {
   return (
     <>
       <defs>
@@ -33,25 +28,6 @@ function LogomarkPaths() {
   );
 }
 
-export function LogoWithText(props: React.ComponentPropsWithoutRef<"svg">) {
-  return (
-    <svg viewBox="0 0 231 38" {...props}>
-      <LogomarkPaths />
-      <text
-        className="hidden lg:block fill-zinc-900 dark:fill-zinc-100"
-        fontFamily="Inter Variable, sans-serif"
-        fontSize={24}
-        fontWeight="bold"
-        letterSpacing="-.02em"
-        x={74}
-        y={26}
-      >
-        Memento Dev
-      </text>
-    </svg>
-  );
-}
-
 export function Logo(props: React.ComponentPropsWithoutRef<"svg">) {
   return (
     <svg viewBox="0 0 58 38" {...props}>

app/components/syntax/MobileNavigation.tsx

@@ -1,4 +1,4 @@
-import { Suspense, useCallback, useEffect, useState } from "react";
+import React, { Suspense, useCallback, useEffect, useState } from "react";
 import { usePageContext } from "vike-react/usePageContext";
 import { Dialog, DialogPanel } from "@headlessui/react";
 import { Navigation } from "@syntax/Navigation";
@@ -32,11 +32,12 @@ function CloseOnNavigation({ close }: { close: () => void }) {
 }
 
 export function MobileNavigation() {
-  let [isOpen, setIsOpen] = useState(false);
-  let close = useCallback(() => setIsOpen(false), [setIsOpen]);
+  const [isOpen, setIsOpen] = useState(false);
+  const close = useCallback(() => setIsOpen(false), [setIsOpen]);
 
   function onLinkClick(event: React.MouseEvent<HTMLAnchorElement>) {
-    let link = event.currentTarget;
+    const link = event.currentTarget;
+
     if (
       link.pathname + link.search + link.hash ===
       window.location.pathname + window.location.search + window.location.hash

app/components/syntax/Navigation.tsx

@@ -1,8 +1,8 @@
 import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/solid";
 import { usePageContext } from "vike-react/usePageContext";
+import React, { useEffect, useState } from "react";
 import { Link } from "@/components/common/Link";
 import { navigation } from "@/lib/navigation";
-import { useEffect, useState } from "react";
 import clsx from "clsx";
 
 type NavigationItemProps = {

app/components/syntax/PrevNextLinks.tsx

@@ -1,6 +1,7 @@
 import { usePageContext } from "vike-react/usePageContext";
 import { Link } from "@/components/common/Link";
 import { navigation } from "@/lib/navigation";
+import React from "react";
 import clsx from "clsx";
 
 function ArrowIcon(props: React.ComponentPropsWithoutRef<"svg">) {

app/components/syntax/Prose.tsx

@@ -8,7 +8,7 @@ export function Prose<T extends React.ElementType = "div">({
 }: React.ComponentPropsWithoutRef<T> & {
   as?: T;
 }) {
-  let Component = as ?? "div";
+  const Component = as ?? "div";
 
   return (
     <Component